iOS SnapKit 02 | Then 라이브러리

✅ 이번 시간에는 지난 시간에 코드로 작성했던 부분과 더불이 Then 라이브러리에 대해서 알아보자.

지난 시간에 작성했던 부분과 비교하면서 보면 2배로 좋다.

 

https://github.com/devxoul/Then

GitHub - devxoul/Then: ✨ Super sweet syntactic sugar for Swift initializers

 

✅ Then 라이브러리를 활용한 코드 구성

//
//  ViewController.swift
//  SnapKit_practice
//
//  Created by Hamlit Jason on 2021/08/18.
//

import Foundation
import UIKit
import Then

class ViewController02: UIViewController {

    lazy var box = UIView().then {
        $0.backgroundColor = .gray
    }
    
    lazy var newbox = box.with {
        $0.backgroundColor = .brown
    }
    
    let tableView = UITableView().then {
        $0.backgroundColor = .clear
        $0.separatorStyle = .none
      }
    
    lazy var nameLabel = UILabel().then{
        $0.text = "this is then UILabel"
        $0.textColor = .red
        $0.textAlignment = .center
        $0.backgroundColor = .blue
        $0.font = UIFont.systemFont(ofSize: 18)
    }
    
    lazy var nameTextField = UITextField().then {
        $0.placeholder = "this is then UITextField"
        $0.backgroundColor = .green
    }
    
    lazy var changeButton = UIButton().then {
        $0.setTitle("this is UIButton", for: .normal)
        $0.backgroundColor = .red
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        addSubView()
        setUpView()
    }
    
    func setUpView() {
        
        self.nameLabel.snp.makeConstraints {
            $0.top.equalToSuperview().offset(80)
            $0.leading.equalToSuperview().offset(24)
            $0.trailing.equalToSuperview().offset(-24)
        }
        
        self.nameTextField.snp.makeConstraints { // 네임 레이블을 기준으로 배치하기
            $0.top.equalTo(self.nameLabel.snp.bottom).offset(24)
            $0.leading.equalTo(self.nameLabel)
            $0.trailing.equalTo(self.nameLabel)
            //$0.leading.trailing.equalTo(self.nameLabel) 이렇게 줄여쓸 수 있다.
        }
        
        self.changeButton.snp.makeConstraints { make in
            make.center.equalToSuperview()
            // $0.center.equalToSuperview()
            //make.size.greaterThanOrEqualTo(nameTextField) // 같거나 크게
        }
        
        self.box.snp.makeConstraints {
            $0.top.equalTo(self.changeButton.snp.bottom).offset(24)
            $0.leading.equalTo(20)
            $0.trailing.equalTo(-20)
            $0.bottom.equalToSuperview().offset(-20)
        }
        
        self.tableView.snp.makeConstraints {
            $0.bottom.equalTo(self.changeButton.snp.top).offset(-20)
            $0.leading.equalTo(20)
            $0.trailing.equalTo(-20)
            $0.top.equalTo(self.nameTextField.snp.bottom).offset(20)
        }
    }
    
    private func addSubView() {
        self.view.addSubview(self.nameLabel)
        self.view.addSubview(self.nameTextField)
        self.view.addSubview(self.changeButton)
        self.view.addSubview(self.box)
        self.view.addSubview(self.newbox)
        self.view.addSubview(self.tableView)
    }
}

 

 

결과물

 

이렇게 구성하고 보니까 궁금한 것이 하나더 생겼는데, tableView는 그럼 코드로 어떻게 구성할까?

이건 다음 포스팅에 이어서 하도록 하겠다