웹개발자의 iOS 개발기(9) - [UIKit] AutoLayout

AutoLayout에 대하여 공부해 보았습니다.

 

다양한 디바이스에서 일관성 있는 UI를 유지하기 위해서 AutoLayout은 필수라고 생각됩니다.

03. 위치를 잡아주는 오토레이아웃

AutoLayout

• 다양한 화면에서 동일하게 나오도록 하는 방법

AutoLayout

1. 요소를 선택
2. 위치값 설정
3. Constraints 추가된 것을 확인
   • View Controller Scene 옆에 빨간색 오류가 뜨는지 잘 확인해야 한다.
   • 예를 들어 Slider의 Top Space를 130으로 지정 → 하지만 Slider 위에 있는 Label의 위치값이 지정되지 않아서 문제 발생

요소를 우클릭으로 드래그를 해서 다른 요소에 드롭하면, 요소간 간격을 설정이 가능하다. (우클릭해서 다른 요소에 연결 하는게 아닌 바닥에 드랍하면 화면을 기준으로 위치를 설정할 수도 있다.)

→ 위에서부터 차례대로 위치를 지정하면서 내려오는 게 좋아 보인다.

04. 아주 간단한 화면 UIKit으로 만들기

• 이름을 입력받아서, 인사하는 화면
• 디버깅 컬러: 개발 단계에서 영역을 확인하기 위해 사용

storyboard에서 ViewController추가

ViewController 추가

 

신규 ViewController 파일 생성

Cocoa Touch Class로 생성

ViewController 파일 생성

 

View와 ViewController 연결

View와 ViewController 연결

 

요소 간의 AutoLayout 설정 시, 연결된 요소를 변경하고 싶으면

설정된 Constraints 더블 클릭 → Second Item 값 변경

요소간 연결 요소 변경

 

 

TextField, Button의 가로 시작, 끝 위치를 Label이 자동으로 따라갔으면 한다면

원하는 설계

 

Label 우클릭 드래그로 TextField에 연결 후 Leading 설정

또 Label 우클릭 드래그로 Button에 연결 후 Trailing 설정

설정