[swift] 2탄 : AutoLayout UI 그리기

지난 편에서는 프로젝트를 생성하는 방식과 프로젝트의 속성을 결정하는 방식에 대해서 살펴 봤다면,

이번 편에서는 드디어 hello world를 화면에 찍어보겠다!!!

 

좌측의 프로젝트 계층 구조에서, storyboard라는 확장자로 정의된 파일을 클릭하면 다음과 같은 화면이 등장한다. 

여기에 그림을 그리게 되는데, 오늘은 여기에 hellow world를 출력해 보겠다!

storyboard 확장자 클릭시 나오는 화면

 

우선, storyboard와 swift를 매칭 시키는 방식을 알아보자. 

 

Main.storyboard에 들어가면 아래와 같이 화면이 뜬다.

우측의 View Controller Scene을 클릭하면 우측에 속성을 결정할 수 있는 창이 뜬다. 

그 중 네번째에 있는 보드판 형식의 버튼을 클릭하면 Custom Class로 시작하는 창이 뜬다. 

 

Custom Class의 Class 명을 보면, ViewController라고 되어 있는 것을 확인할 수 있다.

 

디렉토리 계층 구조에서 ViewController.swift를 들어가면, 우측에서 보다시피, ViewController로 시작하는 class가 존재함을 알 수 있다. 

swift와 stroyboard에서 view는 파일 명이 아니라, class 이름으로 매칭됨을 주의 하자!!

 

 

이제 storyboard에 텍스트를 출력해 보자

화면 우측 상단에 있는 버튼들 중 가장 왼쪽에 있는 + 버튼을 누르면 화면에 띄울 수 있는 각종 object들이 제안된다. 

 

storyboard에 사용할 수 있는 다양한 object들

 

이 중에서 지금은 글자를 쓰기 위해서 Label object를 사용해 보겠다. 

사용 방식을 스크린샷으로 찍을 수가 없어서 영상을 첨부한다.

 

 

 

Label object를 끌어다가 storyboard로 가져가면, 가운데를 기준으로 파란 선이 뜨는 것을 볼 수 있다. 

이 파란선이 바로 아이폰 개발에서 필수적인 요소인 AutoLayout이다. 

 

그러면 왜 AutoLayout을 사용해야 할까?

파란선을 기준으로 맞춰서 디자인을 해 줘야, 하나의 디자인을 아래에 보이는 모든 device들에 자동으로 적용시킬 수 있기 때문이다. 

 

Label object를 하나 더 추가 해보면, 아래와 영상에서 처럼 못 보던 파란 선들이 추가적으로 생기는데,

이런 선들이 모두 AutoLayout이다. (일단 오늘은 Label object 하나만 띄우기로..!!!)

 

 

이제 Label Object의 글자를 바꿔보겠다.

글자는 xcode 우측 화면에서 다섯번째 아이콘을 클릭해서 나오는 화면에서 변경할 수 있다. 

 

Text 라고 되어있는 칸 아래의 항목을 원하는 글자로 바꿔 주면 된다. 

글자를 바꿔준 뒤에는, 다시 한 번 정중앙으로 Label의 위치를 조정 해야한다. 

 

 

근데 그렇게 변경하고 나면, 아래와 같은 경고 문구가 뜬다.

layout에 contraint가 지정되지 않았다는 내용인데, 어떤 constraint인지 살펴보자. 

 

우리가 Label 객체를 화면에 놓을 때 뜨는 파란선은 사실 가이드라인 정도라고 생각하면 된다. 실제 그에 맞는 제약사항을 우리가 직접 설정 해 줘야한다. 그래야 AutoLayout의 localization을 위한 설정을 맞친 것이라 볼 수 있다. 

 

 

아래 영상에서처럼, 화면 하단에 있는 버튼을 클릭해서, Add new alignment constraints 화면에서

horizontal과 vertical에 대한 제약사항을 주고 나면, 경고가 꺼진다. 

 

 

 

 

 

 

 

HelloWorld Label을 눌렀을 때 우측처럼 선들이 뜨면,

알맞게 따라온 것이다! :-)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이제 앱을 실행 시켜보자. 

화면 상단 좌측에 있는 실행 버튼을 누르면 Build가 시작되고, Build Success가 뜨면, xcode simulator가 뜬다. 

(지금은 se2로 실행 시켜보았다.)

 

그럼 우리가 띄운 Hello World가 화면에 출력되는 것을 확인할 수 있다.