iOS SnapKit 공식문서로 공부하기 6탄 (UITableView 코드로 구성하기 2편)

iOS SnapKit 공식문서로 공부하기 6탄 (UITableView 코드로 구성하기 2편)

이전 포스팅에서 TableView를 코드 기반으로 작성했는데, 이번에는 Snapkit을 온전하게 전부 적용해보자.

다음 포스팅에는 RxSwift를 적용예정.

 

 

예제 코드

//
//  ViewController.swift
//  SnapKitPractice
//
//  Created by Lee GeonWoo 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 적용

 

인셋 적용하기

테이블 뷰 전체에 인셋을 적용하면 스크롤 영역 전체가 줄어든다 !

만약 안의 컨텐츠만을 조정하려면 contentView에 인셋을 조정하는게 필요할 수 있다.

스토리보드를 활용할 때 ContentView와 TableView를 따로 잡아주던 걸 생각하기!

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

tableView 바꾼거