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

✅ 이번 시간에는 이전 포스팅의 내용을 SnapKit으로 만들어보자

이번에는 SnapKit을 view에 tableView를 넣는 것과 tableView안에 레이블이랑 이미지를 넣는 두개를 해볼거야

그리고 다음 시간에 rx를 이용해서 마이그레이션을 완성해보자

 

✅ 코드 리뷰

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

import UIKit
import SnapKit

class ViewController04Cell : UITableViewCell {
    
    static let identifier = "ViewController04Cell"
    
    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() {
        
        img.snp.makeConstraints {
            $0.leading.top.equalTo(5)
            //$0.trailing.bottom.equalTo(-5)
            $0.size.width.height.equalTo(100)
        }
        
        label.snp.makeConstraints {
            $0.leading.equalTo(img.snp.trailing).offset(5)
            $0.top.equalTo(5)
            $0.trailing.equalTo(-5)
        }
    }
}

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

extension ViewController04 {
    
    private func configure() {
        tableView.dataSource = self
        tableView.rowHeight = 100
        tableView.delegate = self
    }
    
    private func addSubView() {
        view.addSubview(tableView)
    }
    
    private func autoLayout() {
        tableView.snp.makeConstraints {
            $0.edges.equalTo(view.safeAreaLayoutGuide)
                .inset(20)
        }
    }
}

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

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

snapkit 적용 

 

✅ 테이블 뷰를 조금 더 조정해보자

private func autoLayout() {
        tableView.snp.makeConstraints {
            $0.edges.equalTo(view.safeAreaLayoutGuide)
                .inset(UIEdgeInsets(top: 0, left: 0, bottom: 200, right: 0))
        }
    }

tableView 바꾼거

 

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

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