피린이 탈출기원 프로젝트
반응형웹처럼 레이아웃을 원하는데로 고정시켜 화면을 늘리거나 줄였을때 원하는 디자인이 보여지게 할 수 있으며,
버튼이나 중복된 리스트 디자인을 만들 때 유용하게 사용된다.
부모와 자식의 두개의 레리아웃이 있을 때만 오토레이아웃 적용이 가능하다.
한 개의 요소에는 적용할 수 없다. 이점 명심하시길..
부모요소와 자식요소 두개의 레이어를 잡고 우클릭 > Add Autolayout 또는
단축키 shift + A 로 만들 수 있습니다.
화살표 선택된 오토레이아웃 프레임 내부의 요소들이 세로로 배치되어있으면 세로 화살표로 표시되고 가로방향으로 배치된 겅우 가로 화살표가 선택
기본이 되는 도형위에 여러개의 컨텐츠가 있는 경우 간격을 자동으로 맞춰주는 기능
스페이스 비트윈을 적용하면 아래있는 도형을 움직이면 그 크기에 맞춰서 간격이 조절된다.
수직수평 아이콘을 클릭해 정렬 변경도 가능하다
CSS에서와 마찬가지로 각 오토 레이아웃 부모 프레임에는 그 안의 요서 주위에 패딩이 있습니다.
오토레이아웃을 통해 패딩을 설정하게 되면, 패딩값이 자동으로 늘어나고 줄어든다.
무모요소를 기준으로 자식요소의 위치를 어디에 고정시킬지 지정해준다.
유연한 반응형의 레이아웃 작업 시 유용하게 쓰인다.
Advanced layout 에서는 세부 설정을 해줄 수 있다.
Spacing mode : 자식레이어가 왼쪽부터 차곡하게 정렬되는 패키지, 그리고 가로길이에 맞춰 동일한 여백이 적용되며 정렬되는 Space Between이 있다.
Strokes : 스트로크를 포함한 영역을 사용할지, 스트로크를 제외한 영역을 사용할지 설정해주는 메뉴이다.
Canvas stracking : 자식요소의 나열을 순서대로 하단 배치할지(First on top), 아니면 순서를 역행하여 붙이는 순서대로 상위 배치할지(Last on top)를 지정해준다.
이 부분은 예제를 활용하면 쉽게 이해가 될 것 같아 나중에 예제와 함께 활용해 보겠다.
1. 박스와 텍스트 요소를 만들어준다
2. 요소를 함께 선택한 후 마우스 우클릭 > Add auto layout, 혹은 ctrl(Command) + A 를 눌러서 오토레이아웃을 설정해준다.
3. 설정창에서 좌우여백을 설정해주고 상하 마진값을 조절해주면
아주 유용하게 사용할 수 있는 버튼 간단 완성!!
기본적인 기능은 익혔으니 다음예제에는 오토레이아웃을 활용한
기본 리스트와, 앱 메인 화면을 만들어 보기로 하자 :)