UITableView 와 Custom UITableViewCell 적용 하기 | Swift

쓸 때마다 헷갈리는 UITableView와 커스텀 셀 적용 순서대로 정리

1. Table View 추가

2. Table View Cell 추가

3. ViewController에 Table View outlet 연결

class ViewController: UIViewController {

    @IBOutlet weak var myTableView: UITableView!  // 생성한 Table View를 연결
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

4. Table View Cell에 필요한 UI 추가

Cell 안에 표시할 UI - 이미지, 라벨, 등 추가

5. Custom Cell을 위한 파일을 생성하고, 연결 하기

Custom UITableViewCell Class 파일 생성

UITableViewCell 파일 생성(이름은 자유)

생성한 파일과 생선한 셀 연결하기

1. Storyboard에서 TableViewCell 선택
2. Custom Class의 Class를 내가 생성한 Cell Class로 수정
3. Identifier를 만들어 주기(이름 자유)
   

셀의 요소를 class 파일과 연결하기

import UIKit

class MyTableViewCell: UITableViewCell {

    @IBOutlet weak var myLabel: UILabel! 
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

6. UITableView delegate, datasource 채택, 구현

import UIKit

// UITableViewDelegate, UITableViewDataSource 채택
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource  {

    @IBOutlet weak var myTableView: UITableView!
    // Cell의 Label에 표시할 내용
    let data = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 대리자 위임
        myTableView.delegate = self
        myTableView.dataSource = self
    }
    
    /// 필수 함수 구현
    // 한 섹션(구분)에 몇 개의 셀을 표시할지
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10 // 한 개의 섹션당 10개의 셀을 표시하겠다
    }
    
    // 특정 row에 표시할 cell 리턴
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 내가 정의한 Cell 만들기
        let cell: MyTableViewCell = tableView.dequeueReusableCell(withIdentifier: "MyTableViewCell", for: indexPath) as! MyTableViewCell
        // Cell Label의 내용 지정
        cell.myLabel.text = data[indexPath.row]
        
        // 생성한 Cell 리턴
        return cell
    }
}

7. 결과