iOS ) AutoLayout1 - Frame-based Layout Autoresizing Mask

자동 레이아웃
크기 등급
특성 수집
유니버설 스토리보드

Loading

 

 

이번 포스팅에서는 오토레이아웃에 대해서 알아보도록 하겠습니다.

 

아이폰의 변천사를 살펴보면 위의 사진처럼 아이폰은 4S까지 3.54의 인치의 귀여운 사이즈의 액정을 유지했었는데요. 이때까지만 해도 다양한 크기를 가진 갤럭시 기기와 달리 아이폰은 고정된 크기를 가지고 있었기 때문에 개발자들은 화면에 컨텐츠를 표시할 때 디바이스의 크기를 고려할 필요가 없었습니다. 하지만...

 

사진출처: https://7178.tistory.com/90

 

2012년 9월 12일에 발표된 여섯 번째 아이폰!

 

iPhone 5는 4인치로 위아래로 조금 늘어난 액정크기를 가지게 됩니다.

사용자는 좋아졌지만 우리 개발자들은 눈물을 흘리게 됐죠.... 하지만 제가 이때의 디자인 정말 좋아해요....

 

이때부터 아이폰의 크기가 다양해지게 되면서 뷰를 설계할 때 이전의 위치와 크기를 지정 하는 방식에서 제약을 지정하는 방식으로 변경되게 됩니다. 제약이 뭔지 간단히 말하면 다른 뷰와의 관계로 위치와 크기를 지정하는 방식입니다.

 

그게 바로 우리가 배울 오토레이아웃인거죠!!

 

그럼 여기서 잠깐 애플의 Auto Layout Guide 에 써있는 오토레이아웃을 배워야하는 이유를 보고갈까요?!

 

iPhone 5이후 나온 아이폰들은 다양한 크기를 가지게 됩니다. 또 화면을 가로모드로도 사용할 수 있죠. 그뿐만 아니라 아이패드도 등장하고, 또 아이패드에서 Split VIew 기능도 생기고 하면서 다양한 사이즈에 대응할 수 있는 앱을 만들어야 하게 된거죠.

 

또 요즘같은 글로벌 시대에 우리의 앱이 다양한 언어를 지원할 수도 있겠죠?! 영어에 비해 독일어는 훨씬 더 많은 공간이 필요하고, 반대로 일본어는 더 적은 공간을 차지한다고 합니다. 그뿐만 아니라 우리는 왼쪽에서 오른쪽으로 글자를 읽지만 아랍어나 히브리어는 오른쪽에서 왼쪽으로 글을 읽는 문화를 가지고 있기 때문에 이런 부분에서도 오토레이아웃이 필요할 수 있습니다.

 

그럼 이제 본격적으로 오토레이아웃을 공부해보도록 하겠습니다!!

 

1. Frame-based layout
   • Auto resizing Mask
2. Auto Layout
3. Adaptive Layout
   • Auto Layout
   • Size Class
   • Trait Collection
   • Universal Storyboard

 

위와 같이 크게 세덩어리로 나눠서 설명해볼텐데 이번 첫번째 글에선 Auto resizing Mask를 설명해볼게요!

Frame-based layout & Autoresizing Mask

 

Frame-based layout은 위의 그림처럼 특정 뷰의 위치와 크기(프레임)을 지정하는 방식입니다.

let myView: UIView = .init(frame: .init(x: 30, y: 80, width: 350, height: 200))
myView.backgroundColor = .red
view.addSubview(myView)

 

위와 같이 myView를 Frame으로 만들었다고 합시다.

위의 iPhone11에서의 실행화면과 SE에서의 실행화면에서 보이듯이 Frame-based layout 방식은 현재 화면의 크기가 어떻든 무조건 (30, 80)의 위치에 (350, 200)크기의 myView를 그립니다. Frame 베이스의 레이아웃의 한계가 보이는 부분이죠.

 

 

또한 Frame-based layout은 변경사항이 발생하면 영향을 받는 모든 하위 뷰의 위치와 크기를 다시 계산해야하는 단점이 있습니다. 이 때 Autoresizing Mask를 사용하면 이런 노력을 줄일 수 있는데요. Autoresizing Mask란 슈퍼 뷰의 프레임이 변경될 때 하위 뷰의 프레임을 자동으로 조정하는 방식입니다.

 

 

이 Autoresizing Mask를 인터페이스 빌더에서 쉽고 빠르게 적용할 수 있는 방법을 알아볼게요!!

 

스토리보드에서 설정을 원하는 View를 클릭하고 [Inspector]영역에서 삼각자 모양으로 생긴 [Show Size Inspector]를 봐볼게요!

저기에서 X, Y로 위치를 지정하고 ,Width, Height으로 크기를 지정할 수 있습니다.

 

 

여기에서 설정하는 것은 Design Constraint 입니다. 따라서 뒤에 나올 제약을 따로 추가하지않는다면 Runtime에도 여기에서 설정된대로 표시되게 됩니다. 하지만 제약을 추가해준다면 여기에서 설정해준 것은 무시된다고 하네요! 제약을 설정하는 것보다 위치와 크기를 지정하는 것이 직관적이고 편하기 때문에 빠르게 프로토타입으로 앱을 만들고 디자인을 보고싶을 때 활용하면 좋을 것 같네용!

 

 

그런데 아까 Autoresizing Mask란 슈퍼 뷰의 프레임이 변경될 때 하위 뷰의 프레임을 자동으로 조정하는 방식이라고 했는데요. 어떻게 그런 부분을 적용할 수 있냐면! 아래의 Autoresizing 에서 설정할 수 있습니다.

선들의 의미를 적어봤습니다.

I바의 실선은 고정된 마진을 의미하고 점선은 유연하게 변화할 수 있는 마진을 의미합니다. 뷰 내부의 <-> 이 모양의 선은 크기를 나타냅니다. I바와 반대로 실선은 크기가 부모뷰에 따라 변하고 점선은 고정크기를 나타냅니다.

고정시킨 I바에 따라 부모뷰의 크기가 변할 때 빨간 뷰의 위치가 변화하는 걸 확인할 수 있죠?! 크기의 변화도 한번 직접 확인해보시면 좋을 것 같습니다!

 

 

다음 포스팅에선 Frame-based layout의 한계를 극복한 Autolayout에 대해서 설명해볼게요!

 

2021.10.04 - [IOS] - AutoLayout2 - Content Hugging, Compression Resistance

AutoLayout2 - Content Hugging, Compression Resistance

2021.10.05 - [IOS] - Autolayout3 - Adaptive Layout, Size Class

Autolayout3 - Adaptive Layout, Size Class

 

출처

• https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://medium.com/@Alpaca_iOSStudy/uitraitcollection-공부-c85f2a9901ef
• https://developer.apple.com/documentation/uikit/uiview/1622559-autoresizingmask
• https://babbab2.tistory.com/133