iOS SnapKit 03 | iOS tableView를 코드로 구성하는 법 01

✅ 이번 시간에는 지난 시간에 이어서 tableView를 코드로 구성하는 방법에 대해서 알아보자

 

SnapKit이란 이번에는 조금 매칭이 안될 수도 있는데, tableVeiw는 SanpKit과 RxSwift까지 적용하는 것 까지 한단계 한단계 볼 예정이야.

tableView를 코드를 구성하는데도 생각보다 잡고 가야할 내용이 많다. 그럼 같이 보도록 하자.

 

✅ 코드로 테이블 뷰를 구성하는 순서

 - ViewController

1. ViewContoller에서 tableView를 선언한다.

2. tableView에 register를 통해서 tableViewCell의 id를 입력한다.

3. delegate 및 dataSource를 viewDidLoad에 연결해준다.

4. addSubView를 사용하여 tableView를 넣는다.

 

 - ViewControllerCell

1. id로 사용할 변수에 아이디를 지정한다.

2. override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) 및 required init?(coder: NSCoder)를 추가한다.

 - override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) 

 : Cell에서 viewDidLoad()와 같은 기능으로 addContentView를 넣는다.

❗️여기서 주의

 -> tableView의 경우에는 contentView.addSubView()를 사용한다. 즉, contentView를 써서 추가해야 한다는 말!

 - required init?(coder: NSCoder)

 : 이건 자동으로 추가된다.

 

✅ 코드 리뷰

//
//  ViewController03.swift
//  SnapKit_practice
//
//  Created by Hamlit Jason on 2021/08/19.
//

import Foundation
import UIKit

class ViewController03Cell : UITableViewCell {
    
    static let identifier = "ViewController03Cell"
    
    let img : UIImageView = { // 이미지 생성
        let imgView = UIImageView()
        imgView.image = UIImage(named: "icon")
        imgView.translatesAutoresizingMaskIntoConstraints = false
        return imgView
    }()
    
    let label : UILabel = {
        let label = UILabel()
        label.text = "상어상어"
        label.textColor = UIColor.gray
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        addContentView()
        autoLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func addContentView() {
        contentView.addSubview(img)
        contentView.addSubview(label)
    }
    
    private func autoLayout() {
        let margin : CGFloat = 10
        NSLayoutConstraint.activate([
            img.topAnchor.constraint(equalTo: self.topAnchor),
            img.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            img.widthAnchor.constraint(equalToConstant: 100),
            img.heightAnchor.constraint(equalToConstant: 100),
            
            
            label.topAnchor.constraint(equalTo: self.topAnchor),
            label.leadingAnchor.constraint(equalTo: img.trailingAnchor, constant: margin),
            label.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            
                    ])
    }
}

class ViewController03 : UIViewController {
    
    private let tableView : UITableView = { // 테이블 뷰 생성
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(ViewController03Cell.self, forCellReuseIdentifier: ViewController03Cell.identifier)
        return tableView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configure()
        addSubView()
        autoLayout()
    }
    
}

extension ViewController03 {
    
    private func configure() {
        tableView.dataSource = self
        tableView.rowHeight = 100
        tableView.delegate = self
    }
    
    private func addSubView() {
        view.addSubview(tableView)
    }
    
    private func autoLayout() {
        let guide = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: guide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: guide.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: guide.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)
        ])
    }
}

extension ViewController03 : UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: ViewController03Cell.identifier, for: indexPath) as! ViewController03Cell
        cell.img.image = UIImage(systemName: "ticket")
        cell.label.text = "\(indexPath.row)"
        return cell
    }
}

extension ViewController03 : UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("select \(indexPath.row)")
    }
}

tableView 결과

 

다음 시간에는 SnapKit으로 레이아웃을 구성해보자!

 

 

✅ 이어서 학습하려면 ...

2021.08.19 - [iOS/SnapKit] - iOS SnapKit 04 | iOS tableView를 코드로 구성하는 법 02

iOS SnapKit 04 | iOS tableView를 코드로 구성하는 법 02