AutoLayout
오토레이아웃
뷰 계층 구조에 있는 모든 뷰 객체의 크기와 위치를 해당 뷰에 적용된 제약 조건으로 위치를 지정해주는 것
나만의 규칙이 제일 중요하다고 생각해 먼저 내가 깨닳은 점을 작성해보겠다.
오토레이아웃의 제약조건
먼저 결과적으로는 수차례 혼자 반복된 연습으로 나온 결과이며 Document Outlet이 정......말 많다. 내가 가져온 도큐먼트 아웃렛에서 먼저 SafeArea 밑으로 Label이 있으며 레이블의 위치와 크기를 먼저 잡아준 다음에 아래 StackView의 위치와 크기를 잡아주었다. 이렇게 말로 풀어내는 것이 의미가 없을지 몰라도 먼저 나만의 규칙 5가지를 설명하겠다.
- 한 방향으로 잡기 : 디바이스의 상단과 하단은 누구나 다 알 것이고 나는 위에서 말한 것 처럼 label -> stack view순으로 제약조건을 설정해주었다. 그 이유는 label을 상단에서 그 이후에 stack view를 label과의 거리로 잡아주어 stack뷰의 다음 제약조건을 설정해주기 위함이다.
- 큰 Stack View의 제약조건을 먼저 잡기 : 스택뷰는 안에 여러 스택 뷰, 또는 여러 객체들을 지니고 있을 것이다. 그러나 제일 크게 묶어준 객체를 먼저 잡고 내부 작은 객체들의 위치를 잡아주는 것이 가장 큰 스택 뷰를 나중에 잡아버리면 디바이스의 크기에 따라 내부 객체들끼리 제약조건이 부딪히는 불상사를 줄일 수 있다.
- 큰 Stack view의 제약조건 잡는 방법 : 먼저 모든 뷰는 뷰의 위치 2개(디바이스 왼쪽 상단으로부터 x축, y축 얼마만큼 떨어져있는지)와 뷰의 크기 2개(뷰의 가로, 세로 길이) 총 4가지를 잡아주어야한다. + 여기서는 뷰의 크기는 equal height, equal width를 디바이스 뷰의 비율로 맞춰주었다. 그리고 뷰의 위치는 label의 위치가 먼저 잡혀있기 때문에 label의 하단(bottom)으로부터 떨어진 거리를 잡아 y축 위치를 설정해주었고, stack view를 디바이스의 horizontally 하게 즉 , x축은 디바이스 가로의 정중앙에 오도록 설정하여 x축위치를 잡아주었다.
- 제일 큰 Stack View 내부 객체들 중 그 다음으로 큰 것부터 잡기
큰 스택 뷰 안에는 3개의 스택뷰와 UIView, 그리고 Image View 이렇게 총 5개의 객체들이 들어있다. 결과에서 볼 수 있듯이 파랑색 박스의 크기가 그 다음으로 크면서 가로세로의 비율이 대충 1:1로 유추할 수 있었기 때문에 파랑색 스택뷰의 제약조건을 내부 view의 가로 세로의 비율로 크기를 잡았다. 여기서 핵심은 제일 바깥의 스택뷰의 위치(x,y좌표)를 정해주었기 때문에 내부 객체들은 stack view Attributes inspector의 spacing과 distribution(fill equally)로 스택뷰 내부에서의 위치를 지정해주면서 위치는 자동으로 정해진다. 그렇기 때문에 총 4가지의 제약조건을 갖는 3번 조건을 충족시켰다.
+ 나머지 초록색 stack view와 빨간색 stack view, UIview, Image View는 가장 큰 스택뷰의 위치(x,y)로 제약조건이 잡힌 것이며, 크기 중 가로 또한 정해져 있기 때문에 초록색 stack view와의 equal height를 이용한 비율 설정으로 빨강,일반뷰,이미지뷰의 세로 길이의 제약 조건이 충족하게 돼면서 위와 같은 결과가 나타났다.