지난번 실습했던 bmi 앱을 활용하여 오토 레이아웃을 연습할 예정!
▼ 지난 게시글
https://yejprogramming.tistory.com/24
[iOS] Swift 오토레이아웃 auto layout 이론편!
오늘은 iOS 앱 개발에서는 필수적으로 배워야한다고 강조되는 오토레이아웃을 정리해보려고 한다. 일단, 오토레이아웃이란 무엇일까? 애플에서 사용하는 레이아웃 엔진 Auto Layout dynamically calculat
yejprogramming.tistory.com
해당 앱은 아이폰 11 기준으로 만들어진 앱이다. 이를 아이폰11, 아이폰8 시뮬레이터에 실행을 시키니 아이폰8 화면에서는 비율이 살짝 어색한게 눈에 보인다.
오토레이아웃을 적용하면 아이폰8에서도 아이폰11 처럼 비율이 잘 맞춰져서 나오겠지?
하나하나 천천히 실습해보자!
스토리보드의 오른쪽 하단에서 캔버스 메뉴에서 두번째, 세번째 아이콘을 클릭하여 contraints(제약조건)를 추가할 수 있다.
선택된 BMI Calculator 라벨에 contraints(제약조건)을 추가해보자!
라벨의 top에 27이라는 수를 입력하니 빨간 점선이 실선으로 바뀐다. 이 상태에서 Add 1 Constraint를 클릭하면 해당 제약 조건이 설정된다. 이후 alignment constraints에서 Horizontally(수평) in Container을 선택 시 화면 가운데 선을 기준으로 가운데 정렬을 해준다.
▼ 결과물
이제 다시 아이폰8 시뮬레이터에서 해당 앱을 실행시켜보자!
오른쪽(after) 캡쳐본을 보면 왼쪽(berfore)과는 다르게 라벨이 제대로 가운데 정렬이 된 것을 볼 수 있다.
이제 같은 방법으로 해당 씬의 뷰의 다른 오브젝트들에도 제약을 정의해보자.
'iOS > Swift실전' 카테고리의 다른 글
| [iOS] 오토레이아웃 적용 완료 (0) | 2022.01.13 |
|---|---|
| [iOS] Swift 오토레이아웃 auto layout 실전편! 2 (0) | 2022.01.12 |
| [iOS] Swift 오토레이아웃 auto layout 이론편! (0) | 2022.01.10 |
| Swift)iOS프로그래밍, BMI 앱 만들기Ⅱ : Tab Bar, 동영상 삽입, 라벨 색상 변경 및 모서리 둥글게 (0) | 2021.11.29 |
| Swift) iOS프로그래밍, BMI 앱 만들기Ⅰ (0) | 2021.11.23 |