[iOS] Day 5 - AutoLayout 간단한 View 만들어보기

 

AutoLayout은 엄청난 집중을 요한다 강제 스토리보드의 매직아이 현상 경험중

 

---

간단한 View 만들기

배달의 민족 처음 View를 만들어보려한다

어떻게 만들어야할까?

 

배달의 민족의 뷰들은 고정되어 있고 움직이지 않는다

위치지정이 필수다

 

눈에 보이는 뷰는 상단의 TextFieldView 1개와 아래쪽에 8개의 ImageView가 보인다(버튼인 것을 알지만 오늘은 ImageView로 만들어보겠다)

 

 

간단한 View를 만들었다

1. 처음에는 StoryBoard에 만들고 싶은 View의 배열과 같게 main storyboard에 형성한다

예시

이런 View들을 배열하고 AutoLayout을 설정하면 편하다

 

2. 기준을 설정 해주자

개인적으로 맨위의 View와 맨 아래의 View의 AutoLayout을 설정하는 것이 편하다

 

아이폰에는 SafeArea라는 것이 존재한다

SafeArea?

-> Status Bar, Navigation Bar, Tabbar 등 의해서 View가 가려지지 않게 하기 위해서 제공되는 시스템적 Margin

 

iOS 11 부터 노치의 등장으로 예전에는 Top, Bottom의 Margin만 신경쓰면 됐지만

Leading / Traiing에 대한 Margin도 필요해졌다

-> Top, Bottom, Leading, Trailing System Margin 모두 가지는  Safe Area가 등장

 

이 때문에 항상  Top, Bottom, Leading, Trailing 의 Safe Area를 생각하며 구현해야한다 

(Safe Area를 쓰지 않는 방법도 있다! 게시물 아래쪽에서 언급하겠다)

 

돌아가서 왜  맨위와 맨아래를 먼저 제약조건을 주는 것이 편할까?

-> SafeArea를 기준으로 제약조건을 설정하기 편하다

 

왼쪽의 메뉴에서 제일 하단 View의 control을 누른채 마우스로 Drag를 메인 View에 가져다 놓으면 

위의 사진처럼 메뉴가 보인다

Safe Area와의 공간을 띄어 고정하는 것이다

맨 아래 View는 Bottom의 SafeArea와의 공간을 띄는 것이 명확하기 때문에 SafeArea의 Bottom을 '기준'으로 띄어준다

 

Leading과 Trailing은 왜 설정했나?

-> 구현하려는 View를 보면 모든 뷰가 Leading(왼쪽) Trailing(오른쪽)에 여백에 있는 것을 확인 할 수 있다

 

설정이 잘 됐는지 확인해보자

오른쪽에 위치한 size inspector를 누르면 설정이 된



Size Inspector 영역에서 보면 설정이 잘된 것을 볼 수 있다

SafeArea를 기준으로 위치를 설정하면 Image에 대한 Constraints가 설정이 안되어서 빨간선이 뜬다

 

 

오른쪽 하단에 Add new Constraints 버튼을 누르면 선택된 Image의 Width와 Height을 고정할 수 있다

꼭 체크박스에 체크가 되어있는 것을 확인하고 Add Constraints 버튼을 누르자

 

추가로 중앙(Center) X축 Safe Area를 기준으로 Image를 정렬해서 가운데 정렬을 했다

 

맨위의 View와 맨아래의 View는 해결했다.

개인적으로 그 다음은 CenterView를 설정한다

-> 기준이 명확한 View부터 차차 설정하는 것

 

Center는 생각해보면 간단하다

-> SafeArea 기준으로 Top, Bottom, Leading, Trailing 제약조건을 설정하면 된다

-> Center Horizontality, Center Vertically 설정해도 된다

 

다른 View들은?

'기준'이 중요하다. 

Width와 Height Constraints를 설정한 후 위치가 중요한대 배민 1의 Image의 경우 오른쪽에 여백이 있는 것을 확인 할 수 있다

SafeArea Trailing을 주고 배달 Image를 '기준으로 Leading Space를 줬다 

Top의 경우 TextFieldView를 기준으로 Top Space를 주었다

 

 

다른 Image의 경우도 Top의 기준은 TextField로 설정 그외 Trailing Leading은 MainView에서 보이는 근접 Image를 기준으로 설정하였다

 

너무 반복작업 아닌가...?

반복의 반복..

방법이 있다

 

View 객체 간 레이아웃 설정 시 Equal Widths Equal Height 설정으로 객체간 동일한 Constraints를 줄 수 있다

 

AutoLayout은 글만 보는 것이 아닌 많은 시간을 투자해서 몸으로 느껴보는 것을 추천한다