오토레이아웃 - 첫번째 시간

안녕하세요. ^^

금일은 오토레이아웃에 대해서 알아보겠습니다. 

모바일 개발자라면 누구나 단말기의 해상도에 따른 컴포넌트들의 표시에 대해서 고민을 한번쯤은 해보셨을거라고 생각합니다.

오토레이아웃은 constraint를 지정하여 어떤 해상도에서도 동일한 디스플레이를 할 수 있도록 해주는 기능입니다.

x-code에서 프로젝트를 하나 만들면 파일 인스펙터에서 기본적으로 오토레이아웃 사용으로 체크되어져있습니다.

그럼 x-code를 실행시켜서 간단한 오토레이아웃 예제를 만들어보도록 하겠습니다.

간단히 Main.storyboard에 라벨을 하나 올려놓고 오토레이아웃 설정을 해보는 실습을 하겠습니다.

x-code를 실행시켜서 File->New->Project->i-os application->Single View Application을 실행합니다.

그리고 Product Name에 아래와 같이 AutoLayoutCenterExam이라고 입력하고 Next버튼을 클릭합니다.

왼쪽판넬에서 Main.storyboard를 선택하고 View에서 하단오른쪽 아래의 Object Library에서 Label을 검색해서 선택한 후 화면으로 옮깁니다.

오른쪽 Attributes Inspector에서 Text 타이틀을 AutoLayoutCenterLabel로 입력하고 Alignment를 center로 합니다.

하단 아래의 오토레이아웃 메뉴의  두번째 Align을 클릭하면 아래와 같이 팝업이 뜨는데 거기서 Horizontally in Container와 Vertically in Container를 체크해서 선택한 후

Add 2 Constraints를 선택합니다.

그리고 오토레이아웃 네번째 메뉴인 Resolve Auto Layout Issues를 선택하고 "All Views in ViewController"의 "Update Frames"를 선택합니다.

그런다음 Command + R을 눌르면 아래와 같이 수평,수직으로 가운데 정렬된 텍스트 화면을 보실 수 가 있습니다.

그럼 오늘은 여기까지 알아보겠습니다.

그럼 다음시간에 또 뵐께요.~~~~

바이바이~~~