[UI] xib로 Table View 만들기

안녕하세요오 소진입니다 ㅎㅎ

오늘은 xib를 사용하여 TableView를 만들어보도록 하겠습니다 : D

회사에서도 custom cell을 사용할때 xib를 많이 이용한다고해요!!

어렵지 않으니 해봅시다@

 

다른 방법으로 TableView 만들어보려면!

[UI] Code base로 Table View 만들기

[UI] Story board로 Table View 만들기

[UI] SwiftUI로 Table View 만들기

---

미리 보기

 

 

 

자! 이번에도 위와 같은 디자인으로

Table View를 만들어보겠습니다ㅎㅎㅎㅎ

 

 

Cell 만들기

자! 이제 Custom Cell을 만들어볼까요??

우선 xib 파일을 만들러 갑시다!

 

 

New File을 누르거나 Commend + N 를 눌러줍니다.

 

 

여기서 Cocoa Touch Class 선택해줍니다.

 

 

Subclass of를 UITableViewCell을 선택해 준 후,

🌟 Also create XIB file을 체크해줍니다 🌟

 

 

짠! 

이렇게 swift, xib 파일 두개가 만들어집니다!

 

 

일단 저희는 Cell을 Custom 해줄꺼라

이렇게 생긴 xib 파일을 눌러줍니다

 

 

그럼 위 이미지 처럼 생긴게 뜨는데,

그대로해도 상관 없지만 너무 작기때문데..

저는 키운 후에 하겠습니다!

 

 

위 이미지에 표시된 부분을

원하시는 만큼 width, height을 조절해주면됩니다ㅎㅎ

 

 

저는 위같이 image, Label로만 구성했구요!

이 부분은 각자 편한대로 꾸며주시면됩니당

 

 

이제 Cell 이름(identifier)을 만들어주어야하겠죠?

저는 파일 이름과 동일하게 CustomCell로 만들었습니다 :)

 

 

Cell은 거의 다 했습니다!

이제, image와 label을 코드와 연결해줍니다.

(저는 반복적인 데이터만 출력해줄꺼라 굳이 연결 안 해줘도되지만,

다른 데이터가 나오게 하고싶으신 분들은 꼭! 연결해주어야합니당!)

 

Table View 설정

 

이 부분은 Story board로 Table View 만들기에서랑 똑같습니다!

 

 

Story board에서

우측 상단 + (Library) 버튼 (cmd + shift + L)을 누른 후,

Table View를 화면에 꽉 채워줍니다

(constranits는 원하는데로 해도 됩니다!)

 

 

이제 위처럼

tableView를 코드랑 이어줍시다!

 

Code 작성하기

 

이제 storyboard를 다 구성했으니 코드를 짜봅시다~~

저희가 tableview를 만들려면

꼭 Delegate와 DataSource를 구독해야한다고 했죠?

 

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell
        return cell
    }
}

 

저는 위 코드처럼  cell을 10개만 출력도록했구요! (numberOfRowsInSection)

아까 설정해 놓은 cell 이름(identifier)을

tableView에서 출력될 수 있도록 cellForRowAt에도 지정해주었습니다.

 

 

private func registerXib() {

    let nibName = UINib(nibName: "CustomCell", bundle: nil)

    tableView.register(nibName, forCellReuseIdentifier: "CustomCell")

}

 

🌟 위 코드는 xib 파일을 사용하면 추가해야할 코드입니다!! 🌟

nibName 상수에 아까 만든 cell 이름(identifier)을 적어주고

tabelView에 register(등록)해주면 끝!

 

실행해보기

 

 

 

짠! 

잘 실행되네요!!

다음에는 SwiftUI를 사용해서 table view를 만들어보겠습니다 ㅎㅎ

너무 재밌네용

 

전체 코드

https://github.com/sojin2/TIL/tree/master/iOS/UI/Storyboard/TableViewXib