[iOS/Swift] xib로 TableView 만들기

이번 글은

xib로 간단한 TableView를 만드는 방법입니다.
첨부 이미지는 Storyboard intreface기반 Swift 프로젝트입니다.

1. Storyboard에 Table View 추가/설정

프로젝트 생성 후 Main.storyboard > View Controller에 Table View 를 추가합니다.

Table View의 AutoLayout을 설정합니다.

Table View > > delegate, dataSource 를 설정합니다.

2. UITableViewCell 클래스 생성

New File > iOS > Cocoa Touch Class 를 클릭합니다.

Subclass of > UITableViewCell 로 설정하고, Class 명을 원하는 명으로 바꾼 뒤, Also create XIB file을 체크하고 Next를 클릭합니다.

이와 같이 cell.swift 파일과 cell.xib 파일이 생성되어야 합니다.

3. xib 에서 Cell 설정

FruitCell.xib > cell을 원하는 형태로 커스텀합니다.

FruitCell 선택 > 선택 > identifier에 cell의 클래스명을 입력합니다.

4. FruitCell.swift

@IBOutlet weak var thumbnail: UIImageView!
@IBOutlet weak var lblName: UILabel!
@IBOutlet weak var lblInfo: UILabel!

FruitCell.swift 에 IBOutlet을 선언합니다.

5. ViewController.swift

@IBOutlet weak var tableView: UITableView!
var arrImageName: [String] = ["image1","image2","image3","image4","image5","image6","image7","image8","image9","image10"]

var arrFruitName: [String] = ["Apples","Apricots","Aubergines","Avocados","Bananas","Butternut squash","Cherries","Clementines","Dates","Elderberries"]

var arrFruitInfo: [String] = ["Granny Smith, Royal Gala, Golden Delicious and Pink Lady are just a few of the thousands of kinds of apple that are grown around the world.","Apricots can be eaten fresh or dried – both are packed with vitamins. ","Most aubergines are teardrop-shaped and have glossy purple skin.","Sometimes called an avocado pear, this fruit is often mistakenly described as a vegetable because we eat it in salads.","A great snack in a handy yellow skin!","Butternut squash is a large and pear-shaped fruit with a golden-brown to yellow skin.","Cherries grow from stalks in pairs and a tree can produce fruit for as long as 100 years!","This citrus fruit is the smallest of the tangerines.","These fruits come from the date palm tree and grow abundantly in Egypt.","These little, almost black berries grow on bushes all over the UK countryside in summer."]

ViewController.swift > tableView와 tableView에 뿌려줄 데이터 배열을 선언합니다.

override func viewDidLoad() {
    super.viewDidLoad()
    
    // TableView에 Cell 등록
    let nibName = UINib(nibName: "FruitCell", bundle: nil)
   tableView.register(nibName, forCellReuseIdentifier: "FruitCell")
}

ViewController.swift > viewDidLoad() 에 위와 같이 Table View에 Cell을 등록합니다.

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    
    // TableView item 개수
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return arrImageName.count
    }
    
    // TableView Cell의 Object
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "FruitCell", for: indexPath) as! FruitCell
        
        cell.thumbnail.image = UIImage(named: arrImageName[indexPath.row])
        cell.lblName.text = arrFruitName[indexPath.row]
        cell.lblInfo.text = arrFruitInfo[indexPath.row]
        
        return cell
        
    }
}

ViewController extension 을 만들어, UITableViewDelegate, UITableViewDataSource 프로토콜을 선언해, extension 안에 위와 같이 작성합니다.

이제 빌드를 하면 결과를 확인할 수 있습니다.

TIP. TableViewCell Select Highlight

Table View Cell의 Default설정은 위와 같이 Cell을 선택하면 하이라이트가 들어갑니다. 하이라이트를 없애는 방법입니다.

cell.xib > Cell 선택 > > Selection을 None으로 선택합니다.

프로젝트 소스 GitHub

SNTableView 다운받으러 가기