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

✅ 이번 시간에는 RxSwift를 적용하여 코드를 조금 더 수정해보자

 

코드로 테이블 뷰를 구성하는게 처음이다보니 계속 늘어지는 기분이지만 꾸준히 나아가보자!

//
//  ViewController05.swift
//  SnapKit_practice
//
//  Created by Hamlit Jason 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적용

 

여기까지가 SnapKit + RxSwift 적용이야

여기에는 테이블 뷰만 구성한 것이고 DataSource는 Delegate를 이용해서 구성하는 건 SnapKit 카테고리에 위치하기에는 애매해서 RxSwift쪽으로 이동해서 작성하게 할 생각이야.

 

 

✅ 여기서 다음단계는 

2021.08.19 - [iOS/RxSwift] - iOS RxSwift 06 | RxDataSources 기초

iOS RxSwift 06 | RxDataSources 기초