[iOS] TableViewController - Custom Table View Cell

 

오늘은 TableViewController에서 Table View Cell을 직접 만들어보는 Custom Table View Cell에 대해 다뤄보겠습니다!!!

 

Custom Table View Cell이란?

이전포스팅에서 다뤘듯 애플은 기본적으로 우리가 쉽게 사용할 수 있는 테이블뷰 셀을 만들어 두었습니다. 그냥 왼쪽에 타이틀만 추가해주는 Basic, 오른쪽에 Detail로 글자를 더 줄 수 있는 Right Detail 등이 있습니다. 이 것을 우리는 System Cell(Systtem Table View Cell)이라고 부릅니다.

 

하지만 이 형식만으론 우리가 더 자유롭게 Table View를 만들 수 없죠. 그래서 있는게 Custom Cell(Custom Table View Cell)입니다. 우리가 원하는데로 Table View를 만들 수 있는 방법이죠.

Table View Cell의 스타일

오늘은 가볍게 커스텀 셀을 이용해 쇼핑 목록을 만들어 보겠습니다.

---

기본 세팅

시작하기 전에 반드시 이 설정을 해주셔야 합니다. 안 하면 오류가 발생하기 때문에 꼭!!! 해주셔야합니다.

우리는 커스텀 셀을 만들 기전에 Table View의 Content를 Dynamic(동적)으로 설정해주어야 합니다. 왜냐하면 Static Cell은 이전 포스팅에서 다루었듯 정적인 테이블 뷰를 만들 때 사용되고 스토리보드로(코드 X) 만들기 때문입니다.

 

우리는 오늘 커스텀 셀을 만들거기 때문에 반드시 코드작성이 필요합니다. 그리고 위 사진에서 보았듯 Table View Cell의 Style을 Custom으로 해주셔야합니다.(그래야 커스텀 테이블 뷰 셀이죠!)

 

그 다음이 중요! 합니다. Table View를 나타낼 TableViewCell과 Table View Controller 두 가지 파일을 만들어 주셔야합니다!!!!

 

왜냐하면 우리는 Custom Table View Cell을 만들거기 때문에 테이블 뷰 안의 객체를 다루는 것과 테이블 뷰 밖의(Table View Controller 내)의 객체를 다루어야 하기 때문입니다.

 

쉽게 말하면 테이블 뷰 안의 객체를 다루는 것은 Table View Cell 안에 해야하고 그 밖의 테이블 뷰 컨트롤러 안의 객체를 다루는 것은 Table View Controller에서 해야된다고 이해하시면 되겠습니다.

 

UITableViewController와 UITableViewCell의 파일 을 만들어 줍니다.

파일 생성

파일 확인

그러면 다음과 같이 파일이 생성됩니다.

 

 

그 이후에 이 만든 파일을 스토리보드상에서 연결 해주어야합니다!!! 당연히! TableViewController는 TableViewController끼리 TableViewCell은 TableViewCell 끼리 해주어야 겠죠?? 아래 그림과 같이 해주시면 됩니다.(테이블 뷰는 선택이 잘 안 될 수 있기 때문에 왼쪽 영역에서 선택 해주시면 되겠습니다.

Table View Controller 연결

Table View Cell 연결

그 이후 레이아웃을 설정해주고 Table View Cell안의 객체들을 Table View Cell에 변수로 선언해줍니다.(오른쪽 Assistant창이 잘 안열어 지는데 네비게이터 영역에서 alt + 클릭 해주면 잘 열립니다.)



그 다음 View를 먼저 넣어주고 뷰 안에 레이블, 텍스트필드, 버튼을 넣어주겠습니다. 반드시 View를 먼저 넣어주셔야 합니다.

---

이후에 코드를 이와 같이 작성해 주었습니다.

import UIKit

class ShoppingTableViewController: UITableViewController {

    var todoList: [String] = ["그립톡 구매하기", "사이다 구매", "아이패드 케이스 최저가 알아보기", "양말"]
    
    @IBOutlet weak var addButton: UIButton!
    @IBOutlet weak var userTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.rowHeight = 56 
        viewSetting(addBtnBackColor: .systemGray5, userTextFieldBackColor: .systemGray6)
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "todoCell", for: indexPath) as! ShoppingTableViewCell
        
        if indexPath.row == 0 {
            cell.shoppingListLabel.text = todoList[0]
            cell.imageView?.image = UIImage(systemName: "checkmark.square.fill")
            cell.bookmarkButton.setImage(UIImage(systemName: "star.fill"), for: .normal)
        } else if indexPath.row == 1 {
            cell.shoppingListLabel.text = todoList[1]
            cell.imageView?.image = UIImage(systemName: "checkmark.square")
            cell.bookmarkButton.setImage(UIImage(systemName: "star"), for: .normal
        } else if indexPath.row == 2 {
            cell.shoppingListLabel.text = todoList[2]
            cell.imageView?.image = UIImage(systemName: "checkmark.square")
            cell.bookmarkButton.setImage(UIImage(systemName: "star.fill"), for: .normal)
        } else {
            cell.shoppingListLabel.text = todoList[3]
            cell.imageView?.image = UIImage(systemName: "checkmark.square")
            cell.bookmarkButton.setImage(UIImage(systemName: "star.fill"), for: .normal)
        }

        cell.bookmarkButton.tintColor = .black
        cell.imageView?.tintColor = .black
        cell.backgroundColor = .systemGray6
        return cell
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return todoList.count
    }
    
    func viewSetting(addBtnBackColor: UIColor, userTextFieldBackColor: UIColor) {
        addButton.backgroundColor = addBtnBackColor
        addButton.setTitleColor(.black, for: .normal)
        userTextField.backgroundColor = addBtnBackColor
        userTextField.placeholder = "무엇을 구매하실 건가요?"
    }
}

class ShoppingTableViewCell: UITableViewCell {
   
    @IBOutlet weak var checkButton: UIButton!
    @IBOutlet weak var bookmarkButton: UIButton!
    @IBOutlet weak var shoppingListLabel: UILabel!
}

뷰 안에 userTextField와 addButton을 변수로 설정해주었습니다. 그리고 셀 안에 checkButton, shoppingListLabel, bookmarkButton을 변수로 설정해 주었습니다.(셀 안의 변수는 Table View Cell안에 설정!)

 

여기서 중요한 부분은 이 부분입니다.

let cell = tableView.dequeueReusableCell(withIdentifier: "todoCell", for: indexPath) as! ShoppingTableViewCell

 

저번 시스템 테이블뷰 셀에서완 다르게  as!를 사용해 ShoppingTableViewCell로 형 변환을 해준 것을 볼 수 있습니다. 이렇게 형 변환을 해주는 이유는 우리가 Table View Cell에서 설정해준 변수 checkButton, shoppingListLabel, bookmarkButton에 접근하기 위해서입니다. 때문에 반드시 형 변환을 해주셔야합니다.

 

---

결과

 

아직 코드가 지저분하지만 추후에 수정해서 올려보도록 하겠습니다.