[UIKit] autolayout, code base UI

autolayout

레이아웃을 자동으로 계산해준다!

 

핵심

1. 뷰의 위치

- 가로 [x축]

- 세로 [y축]

- 앵커로 제공

 

2. 뷰의 크기

- 가로, 세로

- 앵커기반 스크린사이즈로 뷰의 크기 제공가능

 

위치 + 크기 -> autolayout -> 화면 렌더링

 

앵커를 왼쪽, 오른쪽에 설정하고 고정 너비를 주면 오류,,

왜냐! 앵커를 기준으로 계산해서 그리는데 고정 너비 값 때문에 충돌이 나기 때문임

 

 

코드로 autolayout 설정하기 예시

// ⭐️ 필수: 자동으로 autolayout 설정해주는 옵션 꺼주기
myView.translatesAutoresizingMaskIntoConstraints = false

// 최상위 view로 부터 top: 30, leading: 15, trailing: 15 띄우고 고정 height: 45
myView.topAnchor.constraint(equalTo: view.topAnchor, constant: 30).isActive = true
myView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15).isActive = true
myView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15).isActive = true
myView.heightAnchor.constraint(equalToConstant: 45).isActive = true


// 위와 동일한 코드 isActive 하나하나 주기 귀찮을 때
NSLayoutConstraint.activate([
	myView.topAnchor.constraint(equalTo: view.topAnchor, constant: 30),
	myView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15),
	myView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15),
	myView.heightAnchor.constraint(equalToConstant: 45)
])

Y축 가운데 설정

myView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

 

 

모서리 둥글게 넣기

view.layer.cornerRadius = 5
view.clipsToBounds = true
// or view.layer.masksToBounds = true

 

 

클로저 형태로 속성 세팅하기

// addSubView까지 하고 싶다면 lazy 키워드 추가
private var myView: UIView = {
    let view = UIView()
    // 속성 세팅
    return view
}()

 

 

스택 뷰 생성

private lazy var stackView: UIStackView = {
    let stview = UIStackView(arrangedSubviews: [myFirstView, mySecondView, myButton])
    stview.spacing = 18                   // 간격 설정
    stview.axis = .vertical               // 정렬 축
    stview.distribution = .fillEqually    // 분배 설정
    stview.alignment = .fill              // 좌, 우, 가운데, 채우는 정렬
    return stview
}()

 

 

autolayout을 동적으로 조정한 후 애니메이션 주고 싶을 때

(오토 레이아웃을 설정을 한 것을 따로 변수에 넣어 놓고 그 변수에 접근해서 나중에 변경을 시키는 형식으로 가능)

UIView.animate(withDuration: 0.3) {
	self.myView.layoutIfNeeded()
}