[SeSAC] August 21, 2023

✔︎ 오늘의 정리

• Notification
• 코드로 오토레이아웃 잡아보기
• 오토레이아웃 연습

 

---

Notification

https://dk308c.tistory.com/27

[iOS] Notification

아... 목표를 정햇다

온라인 수업 날에는 밥 묵고 들와서 무조건 블로그 개념 정리 글을 하나씩 적어야겠다

매일 하나씩은 쓸 수 없겠지만 ㅇ.ㅇ 3일에 2개는 써바야겟음 ㅋ

 

 

 

 

 

코드로 오토레이아웃 잡아보기

먼저, 이전에 프레임으로 레이아웃을 잡을 때의 순서는 다음과 같다.

1. 원하는 객체 프로퍼티 선언
2. 명시적으로 루트 뷰에 선언한 객체를 추가해 주기
3. 크기와 위치를 frame으로 정의해 줌
4. 속성을 정의해 줌

 

 

코드로 레이아웃을 잡는 방법은 다음과 같다.

1. 원하는 객체를 선언
2. 객체를 뷰에 얹기
3. 해당 객체는 오토리사이징이 켜져 있으므로 오토리사이징을 값을 false로 바꿔줌
4. 이후 NSLayoutConstraint로 레이아웃을 잡아준 후,
5. 속성을 정의해 준다.

 

오토레이아웃 이전에, 그러니까 프레임으로 레이아웃을 잡을 때는 왜 그렇게 잡았을까?

그 답은 바로 아이폰의 화면 크기 변화에 있다.

이전의 아이폰들은 모두 크기가 작고, 화면 크기가 같아서 가장 왼쪽 위, 그러니까 좌표상으로는 (0, 0)으로 말하는 부분에서부터의 위치를 프레임으로 잡아주면, 모든 핸드폰에 올바른 위치에 들어갔다.

하지만 점점 신제품이 나오면서 화면의 크기와 해상도가 다양해지고, 더 이상 프레임을 통해서 레이아웃을 잡게 되면 다른 해상도의 아이폰에서 해당 앱을 켰을 때 붕... 떠 있거나 너무 확대되어 있을 것이다.

 

따라서, NSLayoutConstraint, AutoLayout이 나온 것이다.

우리는 모두 다른 아이폰의 크기와 해상도에 맞춰서 레이아웃을 자동으로 잡아주는 게 필요한 것이다!

 

 

일단 해 보는 게 좋을 거라고 생각해서 수업 시간의 코드를 보고 이해한 뒤에 열심히 따라쳐 봤따 ㅋ.ㅋ

 

위에서 정리한 과정 그대로 시행하면 된다.

import UIKit

class CodeViewController: UIViewController {
    
    
    let firstTextField = UITextField()
    let firstButton = UIButton()
    let secondButton = UIButton()
    
    let bigButton = UIButton()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupLayout()
        
    }


    func setupLayout() {
        view.addSubview(firstButton)
        view.addSubview(secondButton)
        view.addSubview(firstTextField)
        view.addSubview(bigButton)
        
        
        firstTextField.translatesAutoresizingMaskIntoConstraints = false
        firstButton.translatesAutoresizingMaskIntoConstraints = false
        secondButton.translatesAutoresizingMaskIntoConstraints = false
        bigButton.translatesAutoresizingMaskIntoConstraints = false
        
        
        NSLayoutConstraint(item: firstTextField, attribute: .top, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .top, multiplier: 1, constant: 16).isActive = true
        NSLayoutConstraint(item: firstTextField, attribute: .leading, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .leading, multiplier: 1, constant: 16).isActive = true
        NSLayoutConstraint(item: firstTextField, attribute: .trailing, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .trailing, multiplier: 1, constant: -16).isActive = true
        NSLayoutConstraint(item: firstTextField, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1, constant: 45).isActive = true
        
        firstTextField.backgroundColor = .yellow
        
        
        NSLayoutConstraint(item: firstButton, attribute: .top, relatedBy: .equal, toItem: firstTextField, attribute: .bottom, multiplier: 1, constant: 16).isActive = true
        NSLayoutConstraint(item: firstButton, attribute: .leading, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .leading, multiplier: 1, constant: 16).isActive = true
        NSLayoutConstraint(item: firstButton, attribute: .trailing, relatedBy: .equal, toItem: secondButton, attribute: .leading, multiplier: 1, constant: -16).isActive = true
        NSLayoutConstraint(item: firstButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1, constant: 50).isActive = true
        NSLayoutConstraint(item: firstButton, attribute: .width, relatedBy: .equal, toItem: secondButton, attribute: .width, multiplier: 1, constant: 0).isActive = true
        
        firstButton.backgroundColor = .green
        
        
        NSLayoutConstraint(item: secondButton, attribute: .trailing, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .trailing, multiplier: 1, constant: -16).isActive = true
        NSLayoutConstraint(item: secondButton, attribute: .leading, relatedBy: .equal, toItem: firstButton, attribute: .trailing, multiplier: 1, constant: 16).isActive = true
        NSLayoutConstraint(item: secondButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1, constant: 50).isActive = true
        NSLayoutConstraint(item: secondButton, attribute: .top, relatedBy: .equal, toItem: firstTextField, attribute: .bottom, multiplier: 1, constant: 16).isActive = true
        NSLayoutConstraint(item: secondButton, attribute: .width, relatedBy: .equal, toItem: firstButton, attribute: .width, multiplier: 1, constant: 0).isActive = true
        
        secondButton.backgroundColor = .cyan
        
        
        NSLayoutConstraint(item: bigButton, attribute: .trailing, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .trailing, multiplier: 1, constant: -16).isActive = true
        NSLayoutConstraint(item: bigButton, attribute: .leading, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .leading, multiplier: 1, constant: 16).isActive = true
        NSLayoutConstraint(item: bigButton, attribute: .top, relatedBy: .equal, toItem: firstTextField, attribute: .bottom, multiplier: 1, constant: 82).isActive = true
        NSLayoutConstraint(item: bigButton, attribute: .width, relatedBy: .equal, toItem: bigButton, attribute: .height, multiplier: 1, constant: 0).isActive = true
        
        bigButton.backgroundColor = .black
    }

 

 

 

 

 

 

 

 

 

 

 

오토레이아웃 연습