📌
1. 부모-자식 관계
2. 정렬
3. 오토레이아웃 (auto layout)
4. 컨스트레인트 (constraint)
5. 리사이징(resizing)
1. 부모-자식 관계
부모 레이어 안에 자식 레이어가 존재함
Frame5가 부모이고 그 안의 Frame1와 Frame2가 자식
부모 레이어를 펼쳐서 확인할 수 있다.
2. 정렬
단일 객체 - 기준이 부모
다중 객체 - 서로가 기준
균등분배
Tidy up
그리드 맞춰서 정렬 (객체들이 같은 사이즈면 더 잘 보임)
이렇게 질서없이 마구잡이로 배치되어 있을 때 tidy up을 클릭하면
이렇게 균일한 간격을 갖고 정렬된다.
3. 오토레이아웃 (auto layout)
📌
레이아웃에 유연함을 만들어주는 기능 (레이아웃을 자동으로 조정할 수 있는 기능)
디스플레이의 크기가 모두 달라서 크기가 바뀌어도 유연하게 대응할 수 있도록 만들어야한다.
오토 레이아웃은 <<패딩>>으로 감싸 컨테이너를 만든다.
여러개의 컨테이러를 간격에 맞게 쌓는 것도 가능하다. (flex랑 유사하다고 생각)
프레임 x → 기본 패딩값을 가진 오토 레이아웃 프레임 생성
프레임 o → 프레임 자체가 오토 레이아웃으로 변환
오토레이아웃 컨테이너(세로 정렬) 안에서는 새로운 것이 추가되면 아래쪽으로 쌓인다
(flex-direction : column 생각)
4. 컨스트레인트 (constraint)
📌
오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한
부모 컨테이너의 크기가 변할 때 자식 컨테이너는 어디를 기준으로 변하는지 정함
우측의 오토 레이아웃 영역에서 변경이 가능하다.
자식 컨테이너의 주변에 파란색 점선을 확인할 수 있다.
파란색 점선이 부모 컨테이너의 아래쪽과 오른쪽에 연결되어 있는데 이것은 자식컨테이너가 부모 컨테이너의 아래쪽과 오른쪽에 붙어 조정될 것이라는 것을 의미한다.
부모 컴포넌트의 사이즈가 변경될 때
가로 271 세로 166 사이즈의 부모 컴포넌트의 크기를 조정한다.
자식 컴포넌트는 부모의 우측 하단에 붙어있어 부모 컴포넌트의 크기가 커져도 부모의 우측 하단에 존재한다.
5. 리사이징(resizing)
📌
프레임을 오토레이아웃으로 감싸는 순간, fixed외의 다른 사이즈값이 생기는 것
부모, 자식 둘 다 리사이징 값에 서로 영향을 받음
fixed - 고정값 (부모, 자식 둘 다 사용 가능)
hud - 자식 컨테이너의 크기에 맞춰 부모의 크기가 조정 (부모 컨테이너에만 사용 가능)
fill - 부모 컨테이너의 크기에 맞춰 자식의 크기가 조정 (자식 컨테이너에만 사용 가능)
요소의 가로, 세로 사이즈를 조절하는 곳에서 확인하고 변경할 수 있다.
🤓 다음 시간 학습할 내용
포지션
파운데이션
컬러 스타일, 폰트 스타일
