AutoLayout 하는 법 3가지! (codebase)

이창형·2023년 4월 13일
0

iOS 박살내기

목록 보기
5/10
post-thumbnail

AutoLayout을 코드로 작성하는 방법에는 3가지 방법이 있습니다

이 화면을 구현해볼거에요

pinkView는 위에서 80, 좌우 간격 10
pinkView 20밑에 grayView 좌우간격 40

일단 기본설정 !!

import UIKit

class ViewController: UIViewController {
    var pinkView = UIView()
    var grayView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        self.view.addSubview(pinkView)
        self.view.addSubview(grayView)
        
        pinkView.translatesAutoresizingMaskIntoConstraints = false
        grayView.translatesAutoresizingMaskIntoConstraints = false
        
        pinkView.backgroundColor = .systemPink
        grayView.backgroundColor = .systemGray
    }
}

이제 하나하나씩 살펴보죠

NSLayoutConstraint

NSLayoutConstraint.init(item: , attribute: , relatedBy: , toItem: , attribute: , multiplier: , constant: )

NSLayoutConstraint를 생성했을때 초기 코드 입니다.

item: 제약을 지정할 UI
attribute: 제약을 지정할 UI의 제약 속성
relatedBy: 제약을 지정할 UI와 제약의 기준이 되는 UI 사이의 관계
toItem: 제약의 기준이 되는 UI
attribute: 제약의 기준이 되는 UI의 제약 속성
multiplier: 제약의 비율
constraint: 제약의 상수값

대충 감이 오시나요? 구현하고자 했던 화면을 구현하면서 더 이해해보죠!

// pinkView
NSLayoutConstraint.init(item: pinkView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 80).isActive = true
NSLayoutConstraint.init(item: pinkView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 10).isActive = true
NSLayoutConstraint.init(item: pinkView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: -10).isActive = true
NSLayoutConstraint.init(item: pinkView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 100).isActive = true
    
// grayView
NSLayoutConstraint.init(item: grayView, attribute: .top, relatedBy: .equal, toItem: pinkView, attribute: .bottom, multiplier: 1.0, constant: 20).isActive = true
NSLayoutConstraint.init(item: grayView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 40).isActive = true
NSLayoutConstraint.init(item: grayView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: -40).isActive = true
NSLayoutConstraint.init(item: grayView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 100).isActive = true

구현에 성공한 것 같네요!!
위 코드를 만져보며 화면이 바뀌는 것을 보고 궁금한 것을 해결해보시면 좋을 것 같아요

Visual Format Language

ASCII 아트와 유사한 시각적 형식 문자열로 설명된 제약 조건을 만드는 방식입니다 !

NSLayoutConstraint.constraints(withVisualFormat: , metrics: , views: )

?? 무슨말이지..
너무 생소하죠??🥲 알아봅시다

format: 제약 조건에 대한 형식 사양
options: 시각적 형식 문자열의 모든 개체에 대한 속성 및 레이아웃 방향을 설명하는 옵션
matrics: 시각적 형식 문자열에 나타나는 상수 dictionary이다.
views: 시각적 형식 문자열에 표시되는 보기 dictionary이다. key는 시각적 형식 문자열에 사용된 문자열 값, value는 view 개체여야 한다.

직관적인 시각적 형식이라고 보시면 편할 것 같네요 !!

밑에 코드 보면서 같이 이해해보죠

import UIKit

class ViewController: UIViewController {
    var pinkView = UIView()
    var grayView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        self.view.addSubview(pinkView)
        self.view.addSubview(grayView)
        
        // view를 지정해주는 과정
        let views: [String : Any] = ["pink": pinkView, "gray": grayView]
        // H(좌우) V(상하)
        // pinkView 좌우간격 10
        let format1 = "H:|-10-[pink]-10-|"
        // grayView 좌우간격 40
        let format2 = "H:|-40-[gray]-40-|"
        // pink 상간격 80
        let format3 = "V:|-80-[pink(100)]"
        // pink와 gray 사이 20간격
        let format4 = "V:[pink]-20-[gray(100)]"
        
        pinkView.translatesAutoresizingMaskIntoConstraints = false
        grayView.translatesAutoresizingMaskIntoConstraints = false
        
        pinkView.backgroundColor = .systemPink
        grayView.backgroundColor = .systemGray
        
        var constraint = NSLayoutConstraint.constraints(withVisualFormat: format1, metrics: nil, views: views)
        constraint += NSLayoutConstraint.constraints(withVisualFormat: format2, metrics: nil, views: views)
        constraint += NSLayoutConstraint.constraints(withVisualFormat: format3, metrics: nil, views: views)
        constraint += NSLayoutConstraint.constraints(withVisualFormat: format4, metrics: nil, views: views)
        
        view.addConstraints(constraint)
    }
}

이해가 되셨나요?!!

결과는 바로바로

잘 나왔죠? 😎

NSLayoutAnchor

마지막이에요 !!
아까 위에서 보신 NSLayoutConstraint가 복잡하고 사용법이 어려워서 새로나온 클래스입니다
얼마나 쉬운지 코드로 볼까요??

pinkView.topAnchor.constraint(equalTo: view.topAnchor, constant: 80).isActive = true
pinkView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
pinkView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
pinkView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        
grayView.topAnchor.constraint(equalTo: pinkView.bottomAnchor, constant: 20).isActive = true
grayView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40).isActive = true
grayView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -40).isActive = true
grayView.heightAnchor.constraint(equalToConstant: 100).isActive = true

훨씬 짧아졌죠??

이제 결과화면 보시죠 !!

완벽하네요 ㅎㅎ

이렇게 AutoLayout을 하는 법 3가지를 설명드렸습니다 !!

profile
iOS Developer

0개의 댓글