Auto Layout이란

👋 들어가기 전

최근에 CS 관련된 포스팅을 많이 했는데 이번에는 iOS 관련 포스팅을 할까한다.

 

UIKit으로 많은 프로젝트를 지정했지만 거기에 나오는 용어들을 크게 정리해 놓은 경험없이

그냥 대충 이해하고 넘어간게 마음에 걸리기 시작했다.

 

이번 시간부터는 당분간 iOS 관련된 포스팅을 주력으로 하되 간간히 CS 지식을 곁드리는 방식으로
진행할까한다.

 

iOS의 첫 주제는 Auto Layout이다.

UI를 그리는데 필수적으로 사용되는 개념을 이제 정리하다니 ..  그래도 늦었다고 생각했을 때가

 

진짜 늦은거라고 좋아하는 코미디언 "박명수"님의 말씀이 떠올랐다. 진짜 진짜 더 늦기전에 지금이라도 시작하자.

---

✊ 정의

Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.

링크 공식 문서를 살펴보면 오토 레이아웃이란 제약조건에 따라 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를
동적으로 계산하는 기법 이라고 한다.

---

☝️ 왜 필요할까?

그렇다면 오토레이아웃이 없으면 뷰의 위치와 크기를 지정할 방법이 없을까??

 

그렇지 않다. 부스트 캠프 과정에 정리했던 내용 중 하나가 여기에 해당한다. 바로 Frame이다.

1. Frame

Frame은 부모 뷰 좌표계 기준으로 View의 위치와 크기를 나타낸다.

 

한번 코드로 살펴보자.

 

부모 뷰를 기준으로 지정한 프레임만큰 잘 들어갔다.

 

그러면 여기서 프레임으로 지정한 단점이 무엇일까?? 바로 실행되는 기기가 변해도 frame은 변하지 않기때문에

 

모든 기기에 대해 대응하지 않는 코드이다.

 

만약 대응을 하고 싶다면 만약 모든 기기의 정보를 항상 갖고 있어야 하고 그 기기별로 또 계산을 따로 해줘여한다.

 

굉장히 비효율적이다.

2. Autoresizing

Frame 처럼 위치와 크기를 직접 건드리는 것은 아니지만 Auotoresizing는 특별한 순간 위치와 크기에 관여를한다.

 

 

An integer bit mask that determines how the receiver resizes itself when its superview’s bounds change.

링크 공식문서를 살펴보면 부모 뷰의 bounds가 바뀔 때 현재 뷰의 크기와 위치를 어떻게 할지를 지정하는
비트 마스트다.

 

속성을 살펴보자.

Constants	flexibleLeftMargin / RightMargin	flexibleWidth/Height	flexibleTop/Bottom
설명	왼쪽 또는 오른쪽에 마진 적용	크기 부여	위 또는 아래에 마진 적용

 

    sampleSuperview.center = view.center
    view.addSubview(sampleSuperview)
    sampleSuperview.addSubview(sampleSubview)

    sampleSubview.autoresizingMask = [.flexibleLeftMargin]
    UIView.animate(withDuration: 1.5) {
        self.sampleSuperview.bounds.size = CGSize(width: 300, height: 300)
    }

 

autoresizeMask에 필요한 속성들을 지정해준다.

 

속성 2개를 비교해보자.

sampleSubview.autoresizingMask = [.flexibleTopMargin]
sampleSubview.autoresizingMask = [.flexibleRightMargin]

 

첫번 째는 top으로 지정해서 상단 마진이 적용되고 두번째는 우측에 마진이 적용되는 모습을 볼 수 있다.

 

⚠️ 주의

여기서 주의할 점은 autoresizing 역시 제약조건(constraints)을 통해 적용되므로

 

auto layout을 적용하면 autoresizing 제약조건가 충돌이 될 수 있다.

 

그렇기 때문에 뷰의 translatesAutoresizingMaskIntoConstraints을 false로 설정해주는 이유가
바로 autoresizing을 꺼 제약조건 충돌을 방지하는 것

---

😀 소감 및 마무리

auto layout보다 autoresizing을 더 공부한 것 같다 ㅋㅋ..

 

왜 꺼줘야하는 지 그리고 만약 저걸 사용하게 되면 어떻게 변하는 지를 살펴봤다.

 

다음 포스팅은 Auto Layout에서 사용되는 priority를 정리해보자.

 

계속 헷갈렸는데 확실히 정리해보자.

---

출처

[iOS - swift] AutoresizingMask, translatesAutoresizingMaskIntoConstraints 개념

 

iOS) Auto Layout 정복하기 (1/5) - Auto Layout이란?