Programmatic UI

Autolayout을 숙지하고 있다는 가정하에 작성된 글입니다.

UIKit에서 Layout을 그리는 방법에는 크게 두가지 방법이 있다.

• Storyboard
• Programmatic UI

Storyboard는 GUI 환경에서 드래그 앤 드랍과 인스펙터 조정등을 통하여 레이아웃을 그리므로 코드를 쓰지 않고도 레이아웃을 그릴 수 있다는 장점이 있다.
하지만 협업을 할 때 충돌이 잦고 레이아웃 설정을 한번에 볼 수 없다는 단점이 있다.

Programmatic UI or programmatically라고 부르는 방식은 Storyboard없이 오직 코드로만 레이아웃을 그린다. 협업시 충돌 위험이 적고, 레이아웃 수정이 용이하다.
하지만 기본적으로 Storyboard보다는 코드를 작성하는데에 있어 시간이 오래걸린다.

이 글에서는 Programmatic UI에 대하여 간단하게 알아보겠다

NSLayoutConstraint

• NSLayoutConstraint로 Constraint 작성 가능.
• Constraint는 뷰와 뷰 사이의 제약조건을 의미. 오토 레이아웃에서 중요한 개념.
• leadingAnchor trailingAnchor topAnchor bottomAnchor widthAnchor heightAnchor
• centerXAnchor : 뷰에 가로선 그었을 때 그 중간을 의미.
• centerYAnchor : 뷰에 세로선 그었을 때 그 중간을 의미.
• NSLayoutConstraint.activate([제약조건들]) : 제약조건들을 넣고 코드 작성하면 제약조건 활성화.

  https://developer.apple.com/documentation/uikit/nslayoutconstraint

예제

class ViewController: UIViewController {

    lazy var numberLabel: UILabel = {
        let label = UILabel()
        label.text = "0"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 45)
        label.textAlignment = .center
        return label
    }()
    //UILabel 선언및 설정 
    //lazy 쓰는 이유: 기본뷰가 먼저 생성되기를 기다렸다가 메모리에 올려야 하기 때문
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setLayout()
    }

    func setLayout() {
        numberLabel.translatesAutoresizingMaskIntoConstraints = false
        // 오토리사이징 끄기
        [numberLabel]
            .forEach {
                view.addSubview($0)
            }
            //뷰 추가
            
        NSLayoutConstraint.activate([
            numberLabel.widthAnchor.constraint(equalToConstant: 80),
            numberLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            numberLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
        // 오토레이아웃 제약조건 넣기
        
    }

}

코드로 오토레이아웃을 설정할 때
numberLabel.translatesAutoresizingMaskIntoConstraints = false
각각의 엘리먼트에 오토리사이징을 꺼주어야한다!

전체 코드