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

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

 

스토리보드에서 코드로 UITableView를 구성하는게 처음이라서 cell register나 delegate, datasource 등 놓치는 부분이 많은데, 천천히 구성해보자

 

이번에는 RxSwift를 활용해 Delegate와 DsataSource를 처리하자.

 

//
//  ViewController05.swift
//  SnapKitPractice
//
//  Created by Lee Geon Woo on 2021/08/19.
//

import UIKit
import SnapKit
import RxSwift
import RxCocoa

class ViewController05Cell : UITableViewCell {
    
    static let identifier = "ViewController05Cell"
    
    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.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 ViewController05 : UIViewController {
    
    let data = Observable<[String]>.just(["first","second","third",])
    
    private let tableView : UITableView = { // 테이블 뷰 생성
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(ViewController05Cell.self, forCellReuseIdentifier: ViewController05Cell.identifier)
        return tableView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemTeal
        configure()
        addSubView()
        autoLayout()
        
        data.bind(to: tableView.rx.items(cellIdentifier: ViewController05Cell.identifier, cellType: ViewController05Cell.self)) {
            index, item, cell in
            cell.img.image = UIImage(systemName: "ticket")
            cell.label.text = "view 5 item \(index)"
        }
    }
    
}

extension ViewController05 {
    
    private func configure() {
        tableView.rowHeight = 100
    }
    
    private func addSubView() {
        view.addSubview(tableView)
    }
    
    private func autoLayout() {
        tableView.snp.makeConstraints {
            $0.edges.equalTo(view.safeAreaLayoutGuide)
                .inset(UIEdgeInsets(top: 0, left: 0, bottom: 200, right: 0))
        }
    }
}

rx적용

 

RxSwift + Snapkit을 이용해서 간단하게 UI를 그려보았음.

DataSource는 Delegate를 더 다채롭게 활용하는건, RxSwift를 공부하는 섹션에다가 작성하는게 더 나을거 같아서 RxSwift 공부할 때 더 딥하게 보자.