iOS SnapKit 공식문서로 공부하기 3탄 (UI 배치하기)

iOS SnapKit 공식문서로 공부하기 3탄 (UI 배치하기)

 

스토리보드가 제일 익숙해서 그런지 작업속도가 제일 빠른데, 코드로 작성하면 뭔가 복잡한거 짤 때 콘솔에 에러가 너무 많이 나온다.

익숙하지 않으니 개발 속도가 너무 느려서 결국 스토리보드를 주로 썼는데, 아이콘, 이미지 등 UI가 복잡해지면 개발하기가 너무 불편해서 다시 공부하고자 함.

 

아 그리고 협업할 때 스토리보드 꼬였는데 답 없어서 걍 날리고 다시작업 ㅠㅠ

 

 

연습내용

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

 

스크린샷

결과 이미지

 

코드

//
//  ViewController.swift
//  SnapKit_Practice
//
//  Created by Lee Geon Woo on 2021/08/18.
//

import UIKit
import SnapKit

final class ViewController: UIViewController {

    private lazy var box = UIView()
    private lazy var nameLabel = UILabel()
    private lazy var nameTextField = UITextField()
    private lazy var changeButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        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) // 같거나 크게
        }
    }
        
}

코드를 보면 크게 어려운 점은 없다.
하지만 두 뷰가 만나는 지점에서 priority 등의 설정이 좀 까다로운데 이는 천천히 공부해보자.
특히 버튼의 경우에는 버튼의 크기가 내용에 맞게 조절되므로 유의하자

 

 

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

 

 

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