Swifter {Swift Developer}

메뉴

Xcode에서 화면크기별로 빌드해서 확인할 필요없이 바로 UI확인하는 방법

앱개발을 하면서 최근 Auto Layout설정을 하면서 UI디자인에서 애를 먹는 분들이 많다. 이 내용은 일일이 시뮬레이터를 사용하지 않고 Xcode화면에서 바로 디자인 상태를 확인할 수 있는 방법을 소개한다.

(1) 우선 프로젝트를 열고 ViewController의 화면크기를 지정한다. 기본 4인치로 지정하는 것을 추천한다. 화면에 디자인 UI요소를 모두 배치한다.

xcode-auto1

그런 다음 [Show the Assistant editor]메뉴 버튼을 눌러 화면을 분할한다.

(2) 오른쪽 화면 상단에 있는 “Automatic”등으로 표기된 바를 누르면 여러가지 메뉴가 나오는데 [Preview (1)]에서 [Main.storyboard (Preview)]를 선택한다.

xcode-auto2

(3) 소스코드 화면이 없어지도 디자인된 화면이 보여지는데  스토리보드 화면이 나오게 된다. 일단 기본 설정된 화면크기만 미리보기형태로 보여진다.

xcode-auto3

(4) 미리보기 화면 좌측 하단의 [+]버튼을 누르면 다양한 화면크기별 선택메뉴가 나온다. 여러분이 개발목적에 따라 필요한 화면크기들을 선택하면 바로 미리보기 화면에 추가되고 같은 크기 화면을 더 추가하면 화면에 세로상태와 가로상태를 모두 볼 수 있다.

xcode-auto5

(5) 아래와 같이 바로 디자인 상태를 확인할 수 있고 Auto Layout상태를 화면크기별로 확인할 수 있기 때문에 개발시간을 더욱더 단축시킬 수 있다.

xcode-auto6

Facebook Comments

카테고리:   Xcode

댓글

죄송하지만 댓글은 닫혀 있습니다.