iOS :: TableView xib로 구현하기

안녕하세요! 상어입니다.

이제 드디어 TableView를 구현하는 방법중 세번째 방법인 xib를 소개합니다!!

저도 처음 TableView를 할 땐 cell에 일일히 그렸는데 xib를 안 이후는 요것만 사용해요 ㅎㅎ

관리가 넘나 편하다눙~><

xib는 크게 어렵지 않아요~ 처음 접하시는 분들은

엇, 이게모야 할 수 있는데 

간단하게 cell을 따로 빼서 관리한다고 생각하시면 됩니다.

우선, xib를 만들어야하니 파일을 하나 만들어줍니다.

파일은 이전에 UITableViewCell파일을 만든 것처럼 NewFile을 눌러주세요!

그 다음 이름을 적고, 밑에 Also create XIB file을 체크해주세요!

그러면

이렇게 .swift파일과 .xib파일이 만들어져있습니다.

여기서 xib파일을 클릭하면 

이런 형태의 빈화면이 나오는데 화면이 너무 작지요?

일단 크기를 늘려보겠습니다.

cell을 클릭한 후 width는 375로 height는 80으로 늘려줍니다.

속이 후련하네요ㅋㅋ

자! 다들 잘하시는 그 오토레이아웃을 이용하여 원하는 형태로 cell을 만들어줍니다. 

저는 이전편과 같이 image와 label 하나씩 넣었습니다.

네네 죠아용~~ 

추가로 저희가 늘 cell을 만들면 하는 일이 있지요?

맞습니다! identifier을 설정해줍니다.

원래는 TableViewCell class도 함께 지정을 해주어야 하지만, xib로 만들면 자동으로 지정이 되어있기 때문에 이 과정은 생략합니다.

저는 sharkTableCell이라고 지정했습니다.

다 되었으면 다시 ViewController로 돌아갑니다.

그리고 TableView를 추가합니다.

저는 TableView를 꽉채우지만, 기호에 따라 맞게 조절하시면 됩니다 :)

TableViewCell.swift파일은 Storyboard에서 cell을 만들 때와 마찬가지로 IBOutlet 연결하셔서 작업하시면 된답니다.

달라지는건 없찌용!! 헤헿

이제 거의 다 했으니 마지막으로 xib만 TableView에 등록시켜주면 끝입니다!

ViewController를 여시고 TableView를 IBOutlet으로 연결시켜줍니다.

그 다음, register하는 코드를 추가해주세요!

private func registerXib() {
    let nibName = UINib(nibName: "SharkTableViewCell", bundle: nil)
    tableView.register(nibName, forCellReuseIdentifier: "sharkTableCell")
}

nibName에는 TableViewCell.swift파일 이름을 쓰시면 되고,

forCellReuseIdentifier에는 아까 지정한 cell의 identifier을 쓰면 됩니다.

그럼, 모든 세팅이 끝났습니다.

ViewController에 UITableViewDelegate와 UITableViewDataSource 프로토콜을 채택해준 후 실행 해주면

이런 화면이 쨘하고 뜬답니다. 히히

정말 쉽죠? register하는 작업만 제대로 해준다면 큰 무리없이 화면을 나타낼 수 있을거에요 :)

그럼 아래에 ViewController 코드를 올려놓겠습니다.

행여, 잘 안되는 부분이나 모르는 부분은 꼭 알려주세용>< 

안뇽!

class ViewController: UIViewController {
    
    // MARK: - IBOutlet
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        registerXib()
    }
    
    private func registerXib() {
        let nibName = UINib(nibName: "SharkTableViewCell", bundle: nil)
        tableView.register(nibName, forCellReuseIdentifier: "sharkTableCell")
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "sharkTableCell", for: indexPath) as? SharkTableViewCell else { return UITableViewCell() }
        
        return cell
    }
}