[iOS] AutoLayout 개념

오토 레이아웃(Auto Layout) 이란?

오토 레이아웃(Auto Layout)은 제약조건(Constraints)을 이용해서 뷰의 위치를 지정하는 것.

다시 말하면, 두 뷰 사이의 관계를 제약 조건이라는 것을 이용해서 뷰의 크기와 위치를 지정하는 것.

Auto Layout 기본 활용도

- 오토 레이아웃은 여러 해상도를 지원하기 위해 개발됨

- iPhone의 크기가 다양해지면서 해상도가 달라지게 되었고, 서로 다른 크기에서도 같은 화면을 보여주기 위함

- 세로 보기 화면 뿐만 아니라 가로 보기 화면까지도 지원 됨

- 만약 오토 레이아웃을 사용하지 않는다면, iPhone 기종만다 스토리보드를 만들어야 하고 그로 인해 다수의 스토리보드 파일이 생성을 해야 됨으로 효율성이 없음

- 오토 레이아웃을 이용해서 하나의 스토리보드에서 모두 대응 가능

Auto Layout 예시

---

Frame Layout  vs Auto Layout

- 전통적으로 앱은 유저 인터페이스를 각 뷰의 프레임(frame)을 프로그래밍 방식으로 계산해 배치

- 유저 인터페이스를 배치하려면 뷰 계층의 모든 뷰에 대한 크기와 위치를 계산해야함

- 변경이 발생하면 영향을 받는 모든 뷰에 대해 다시 계산을 함

- 뷰의 프레임을 프로그래밍 방식으로 정의하면 유연해짐 (변화가 생겨도 대응할 수 있기 때문)

- 모든 변경 사항을 직접 관리해야 하기 때문에 많은 노력이 필요

[Frame Layout]                                                                                                        [Auto Layout]

- 오토 레이아웃은 일련의 제약 조건을 사용하여 유저 인터페이스를 정의

- 제약 조건은 일반적으로 두 뷰 간의 관계를 나타냄

- 오토 레이아웃은 이러한 제약 조건을 기반으로 각 뷰의 크기와 위치를 계산함

- 화면에 배치하는 모습이 같기 때문에 프레임 방식을 사용해도 되고, 오토 레이아웃을 사용해도 됨

- 개발 시간을 많이 줄여줌

 

---

스토리보드에서의 오토 레이아웃

[스토리보드 우하단에 있는 메뉴]

- iOS 앱 개발은 Xcode의 스토리보드를 이용해서 화면을 제작

---

[Pin 메뉴, Add New Constraints]

- 핀(Pin) 메뉴는 버튼 또는 레이블과 같은 UI 요소에 새로운 제약 조건들을 추가할 수 있음

- 시계 방향으로 Top, Trailing, Bottom, Leading 제약 조건의 값을 입력할 수 있고, 화살표를 눌러 어느 뷰와 기준으로 할지 선택

- 두 뷰와 핀 메뉴를 선택하면 같은 너비와 높이를 설정할 수 있음

---

[Align 메뉴, Add New Alignment Constaints]

- 정렬(Align) 메뉴는 다른 뷰와의 가로, 세로 정렬과 같은 정렬 제약 조건들을 추가할 수 있음

- 정렬하고 싶은 두 뷰를 선택하여 수직, 수평 정렬을 추가할 수 있음

---

[Resolve Auto LayOut lssues 메뉴]

- 오토 레이아웃 이슈 툴은 오토 레이아웃 관련된 이슈들을 해결하는 옵션들을 제공

- 오토 레이아웃을 현재 설정된 상태로 재설정하는 옵션들

- 상당은 선택된 뷰와 관련된 것이고, 하단은 모든 뷰와 관련된 것

 

---

프로그램 상의 제약 조건들

- 스토리보드에서만 제약 조건들을 설정할 수 있는 것은 아님 (프로그램 상에서도 제약조건 가능)

- 스토리보드에서 뷰를 배치한 다음, 제약 조건들을 소스파일과 연결해서 값을 지정할 수 있음

-주로 어떤 변화가 일어나면 제약 조건들을 다시 설정할 때, 프로그램 상에서 값을 다시 설정함

import UIKit

class ViewController: UIViewController {
    
    var randomValue : Int = 0
    var count : Int = 0
    
    @IBOutlet weak var slider: UISlider!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        slider.setThumbImage(#imageLiteral(resourceName: "slider_thumb.png"), for: .normal)
        reset()
    }

    @IBAction func sliderValueChanged(_ sender: UISlider) {
        print(sender.value)
        let integerValue : Int = Int(sender.value)
        sliderValueLable.text = String(integerValue)
    }
}