오토레이아웃(Auto Layout) - 사용법 및 실습 기초
Mac을 이용하여 Auto Layout을 실행시키고 개념에서의 사진들과 같이
iPhone, iPad, iPod에서의 모든 화면이 같게 나오게 하는 방법을 알아보겠습니다.
1. Label 추가
Main.storyboard에 평범한 Label을 하나 추가해줍니다.
2. Auto Layout에서 사용할 아이콘 위치 확인
image1에서 가장 하단부분을 보면 5개의 아이콘이 떠 있는것을 볼수 있는데
Auto Layout을 설정하기 위한 아이콘은 두번째 아이콘과 세번째 아이콘 입니다.
3. 두번째 아이콘 Add New AlignMent Constraints알아보기
두번째 아이콘을 누르면 위와 같은 창이 뜨게 됩니다. Add New AlignMent Constraints
Add New AlignMent Constraints를 해석해보면 [ 새로운 선형(나란히) 제약조건을 추가한다]라는 의미입니다.
가장 대표적인 4가지에 대해 설명드리겠습니다.
1) Horizontal(수평) Centers - 두개 이상의 View(뷰)를 세로방향(수평)으로 한줄로 표시하고 싶을때 사용합니다.
2) Vertical(수직) Centers - 두개 이상의 View(뷰)를 가로방향(수직)으로 한줄로 표시하고 싶을때 사용합니다.
3) Horizontally(가로적인) in Container - View(뷰)의 위치를 x(가로), y(세로)로 나누었을때 x축을 중앙으로 고정하는것을 의미합니다.
4) Vertically(세로적인) in Container - View(뷰)의 위치를 x(가로), y(세로)로 나누었을때
y축을 중앙으로 고정하는것을 의미합니다.
4. 세번째 아이콘 Add New Constraints 알아보기
세번째 아이콘을 누르면 위와 같은 창이 뜨게 됩니다. Add New Constraints
Add New Constraints를 해석해보면 [새로운 제약을 추가한다] 라는 의미로 생성해 놓은 Label에
Constraints(제약조건)을 추가하여 뷰(Label)의 위치를 얼만큼씩 떨어트려 줄지 위치를 지정해 주는 것을 의미합니다.
ex) View를 위에서 부터 300떨어트리고 싶다면
위와같이 떨어졌으면 하는 위치에 원하는 숫자를 쓴 후 Add 1 Constraint를 누르면 설정이 완료됩니다.
*숫자를 입력하여 Constraints를 주게 된다면 희미하게만 보였던
가운데 빨간 선들이 진하게 바뀌는 것을 확인할 수 있습니다.
5. Auto Layout 오류잡기
많이 발생하는 오류중에는 Add New Constraints를 설정했다가
값을 바꾸고 싶어서 한번 더 값을 설정했을때 발생하는 오류입니다.
값을 수정하고 싶다면 Add New Constraints를 다시 한번 설정하는 것이 아닌
위의 아이콘들 중 뒤에서 두번째 아이콘[show the size insepecter]로 넘어가서
Horizontal 또는 Vertical 부분에서 Edit를 누르고 설정을 변경해주면 됩니다.
실수로 한개를 더 만들어 두개가 생겼다면 Delete로 삭제해주시면 없어집니다.
6. 실행화면
[Auto Layout 실행 전]
[Auto Layout 실행 후]
모든 기기의 실행 화면을 통해 Auto Layout을 쓰는 이유를 한번 더 설명해보았습니다.
끝~
참조영상 : https://www.youtube.com/watch?v=ICV5meUBVK8&list=PLz8NH7YHUj_ZF2oja5rP4Sow5KK1zf2yk&index=24
'iOS_Mac기능 정리 > Auto Layout(오토레이아웃)' 카테고리의 다른 글
| AutoLayout - self sizing (0) | 2022.01.13 |
|---|---|
| Auto Layout - Constraints의 시작점, 끝점 (0) | 2022.01.12 |
| Auto Layout - 오류 자동 수정 (0) | 2022.01.12 |
| Auto Layout - 사용법, 실습(두번째) (0) | 2022.01.11 |
| Auto Layout - 개념 (0) | 2022.01.10 |
