[SeSAC] 220817 TIL

FrameBaseLayout

• FrameBaseLayout + AutoResizing
• 요즘에는 해당 방식으로는 기기를 전부 대응하기 어려워짐

view.addSubview(emailTextField)

// 크기와 위치 및 속성 정의
emailTextField.frame = CGRect(x: 50, y: 50, width: UIScreen.main.bounds.width - 100, height: 50)
emailTextField.borderStyle = .line
emailTextField.backgroundColor = .lightGray

 

---

 

AutoLayout

• AutoLayout (기기별 대응 필요) + NSLayoutConstraints Class(- base)
• AutoLayout 작업 시 AutoResizing False 필요
• Constraints 잡기 위해 isActive, addConstraints, NSLayoutAnchor(iOS 9+) 사용
• SafeAreaLayoutGuide(iOS 13+)

1. NSLayoutConstraint

view.addSubview(passwordTextField)

passwordTextField.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: passwordTextField, attribute: .top, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .top, multiplier: 1, constant: 100).isActive = true
NSLayoutConstraint(item: passwordTextField, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 50).isActive = true
NSLayoutConstraint(item: passwordTextField, attribute: .trailing, relatedBy: .equal, toItem: emailTextField, attribute: .trailing, multiplier: 1, constant: -50).isActive = true
NSLayoutConstraint(item: passwordTextField, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1, constant: 60).isActive = true

2. NSConstraints + addConstraints

view.addSubview(passwordTextField)

let top = NSLayoutConstraint(item: passwordTextField, attribute: .top, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .top, multiplier: 1, constant: 100)
let leading = NSLayoutConstraint(item: passwordTextField, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 50)
let trailing = NSLayoutConstraint(item: passwordTextField, attribute: .trailing, relatedBy: .equal, toItem: emailTextField, attribute: .trailing, multiplier: 1, constant: -50)
let height = NSLayoutConstraint(item: passwordTextField, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1, constant: 60)

view.addConstraints([top, leading, trailing, height])

3. NSLayoutAnchor

view.addSubview(signButton)
signButton.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    signButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    signButton.widthAnchor.constraint(equalToConstant: 300),
    signButton.heightAnchor.constraint(equalToConstant: 50),
    signButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])

 

---

 

Adaptive Layout

• 아이폰, 아이패드 대응
• 다크모드
• 슬라이드오버

 

---

 

SnapKit

• SnapKit은 오토레이아웃을 쉽게 잡을 수 있도록 도와주는 라이브러리
• 내부적으로 translatesAutoresizingMaskIntoConstraints가 false로 구현되게 되어 있음
• 제약 조건의 충돌을 막기 위함이라고 볼 수 있음

internal func prepare() {
    if let view = self as? ConstraintView {
        view.translatesAutoresizingMaskIntoConstraints = false
    }
}

• 더 자세한 방법은 찾아보기 바람

[redView, blackView].forEach {
    view.addSubview($0)
}

redView.snp.makeConstraints {
    $0.width.height.equalTo(200)
    $0.top.equalTo(view.safeAreaLayoutGuide)
    $0.centerX.equalTo(view)
}

blackView.snp.makeConstraints {
    $0.edges.equalTo(redView).inset(50)
}