[ios - Swift] UITableViewCell을 Xib로 만들기 (UITableView 2/2)

 

 

 

이전 글에서 TableViewCell 만들어봤습니다.

 

하지만 매번 TableView를 생성할 때마다 Cell을 만들어주는 건 매우 귀찮은 일입니다.

 

그렇기 때문에 한번 제작한 UITableViewCell을 재사용 가능하도록 Xib대해 알아보고 파일로 만들어 보도록 하겠습니다.

 

 

NIB (NeXT Interface Builder)

 - iOS 및 Mac 앱의 사용자 인터페이스를 저장할 때 사용하는 리소스 파일

 - 바이너리 형식

 

XIB (Xml Interface Builder)

- 플랫 파일에 저장

- NIB를 XML 형식으로 변환한 파일로 Nib와는 기능적으로 동일

 

 

 

 

 

1. xib file 생성

 

 

 

 

COCOA Touch Class -> UITableViewCell

 

이때 Subclass의 Also create XIB file 체크해야 합니다.

 

Class명은 MemberTableViewCell이라 칭하겠습니다.

 

 

2. cell Custom

 

 

 

 

방금 만든 MemberTableViewCell.xib 파일을 열어보면 이미지와 같이 Cell 하나만 덩그러니 나와있는 모습을 볼 수 있습니다.

 

 

 

 

여기서 위와 같이 인터페이스를 추가합니다.

 

 

 

 

MemberTableViewCell.swift 파일을 열어 추가된 인터페이스의 아웃렛을 연결합니다.

 

 

MemberTableViewCell.xib로 돌아가 cell을 선택 후 identifier의 Reuse identifier 다음과 같이 추가해 줍니다.

 

이제 xib 설정은 이것으로 완료되었습니다.

 

 

 

3. MainStoryBoard 구현

 

 

 

 

UITableView를 View Controller에 추가해준 후 아웃렛을 생성해 주도록 합니다.

 

 

 

4. ViewController 작성

 

 

 

let nib = UINib(nibName: "MemberTableViewCell", bundle: nil)

이전 단계에서 생성한 Xib를 불러와야 하는데 UINib를 이용해 불러옵니다.

 

 

mTableView.register(nib, forCellReuseIdentifier: "MemberTableViewCell")

UITableView에서 Nib를 사용하려면 register에 등록을 해야 하는데 등록해 주도록 합니다.

 

forCellReuseIdentifier는 xib에서 작성한 Cell의 Reuse Identifier입니다. (Class명이 아니니 주의)

 

TableVIewDataSource의 구현 방법은 이전 글과 동일하니 생략하도록 하겠습니다.

 

 

아래는 전체 소스입니다.

 

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var mTableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        mTableView.delegate = self
        mTableView.dataSource = self
        
        let nib = UINib(nibName: "MemberTableViewCell", bundle: nil)
        
        mTableView.register(nib, forCellReuseIdentifier: "MemberTableViewCell")
    }
    
}


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: "MemberTableViewCell") as! MemberTableViewCell
        
        cell.mImage?.image = UIImage(systemName: "pencil.circle")
        cell.mName.text = "이름 \(indexPath.row)"
        cell.mStateMsg.text = "상태 메시지 \(indexPath.row)"
        
        return cell
    }
}

 

 

 

5. 결과