iOS SnapKit 01 | leading & trailing

✅ 이번 시간에는 가장 기초적인 부분에 대해서 알아볼 예정이야.

스냅킷을 공부할 때는 예제를 통해서 하나하나 알아보는게 두배로 좋을 것 같아서 이렇게 진행하기로 했어

 

들어가기에 앞서...

지금까지 나는 UIStoryboard 에다가 버튼이나 레이블들을 올려서 주로 사용했었는데, 이 방법의 치명적인 단점을 알게되어서 코드로 작성하는 법도 여기선 공부해 보려고해.

물론, IBOulet을 이용해서 snp를 걸어도 가능해.

 

💡 내가 느낀 치명적인 단점

 - Storyboard에 올려서 작업 시, 추후에 넣는 이미지나 아이콘들이 가장 뒷 부분으로 가야하면, 스토리 보드를 가리게 되어서 불편함을 초래함.

 

 

✅ [오늘의 예제]

SnapKit을 활용하여 UIButton, UILabel, UITextField를 배치하여 보자.

 

✅ [예제의 결과]

결과 이미지

 

✅ 코드 리뷰

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

import UIKit
import SnapKit
class ViewController: UIViewController {

    lazy var box = UIView()
    lazy var nameLabel = UILabel()
    lazy var nameTextField = UITextField()
    lazy var changeButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        setUpView()
    }
    
    func setUpView() {
        self.view.addSubview(self.nameLabel)
        self.view.addSubview(self.nameTextField)
        self.view.addSubview(self.changeButton)
        
        nameLabel.text = "this is UILabel"
        nameTextField.placeholder = "this is UITextField"
        changeButton.setTitle("this is UIButton", for: .normal)
        nameLabel.backgroundColor = .blue
        nameTextField.backgroundColor = .green
        changeButton.backgroundColor = .red
        
        
        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) // 같거나 크게
        }
    }
        
}

코드를 그냥 쭉 읽어보면 크게 어려운 부분이 없다. 

다만, Button의 경우 size를 지정해주지 않으면 버튼의 크기가 버튼의 내용에 맞게 조절되므로 꼭 유의하기

또한 텍스트필드는 네임레이블 쪽에 걸어준 모습을 확인할 수 있어.

좌  : 레이아웃 해설, 우 : 버튼 사이즈 코드 주석처리

코드로 작성시에는 계층으로 확인하기