【Xcode】화면 사이즈가 다른 시뮬레이터를 일일이 빌드하지 않고 UI 디자인을 확인하는 방법

소개

독학으로 프로그래밍 배우기 시작해 약 1년, 업무로 프로그램을 쓰기 시작해 2개월, Swift 시작해 1개월의 Swifter입니다.
앱을 개발할 때 화면 크기가 다른 기기에도 대응하는 것은 꽤 중요하지만, AutoLayout 설정을 하면 의도하지 않은 UI 디자인이 되어 버리는 경우가 많습니다.
이 기사에서는 일일이 시뮬레이터를 기동하지 않아도 그 자리에서 디자인을 확인할 수 있는 방법을 기재하므로 참고로 해 주세요

디자인 확인시의 좌절

이런 확인 방법은 없습니까? ?

우선 버튼이나 라벨이나 부품 넣는다

우선 시뮬레이터로 빌드하여 표시를 확인

크기가 다른 시뮬레이터로 시작하여 표시 확인

위치를 변경하여 AutoLayout을 설정하고 시뮬레이터에서 시작하여 확인

다른 시뮬레이터를 변경하여 디스플레이를 확인합니다

시도에 장치 옆으로 보지 못했습니다 ...

이하, 루프

해당되는 사람은 이 기사 보면 효율 업 틀림없습니다!

절차

① 우선은 프로젝트 만들어 ViewController의 화면 사이즈를 지정

이번에는 4 인치로 크기를 지정합니다.

② 적당히 부품을 배치

적당히 이런 식으로 배치했습니다

③ 오른쪽 상단의 원이 겹치고 있는 버튼(어시스턴트 에디터 버튼)을 눌러 화면을 분할한다

화면 분할을 할 수 있으면 좋기 때문에, 오른쪽은 무엇이든 좋다

④ 오른쪽 화면 상단의 푸르게 빛나는 아이콘을 클릭하여 Preview(1) → Main.storyboard(Preview)를 선택한다

⑤크기 추가

이런 느낌의 화면이 될 것
※보기 어려우므로 왼쪽의 네비게이터 에리어, 오른쪽의 유틸리티 에리어는 지웠습니다


왼쪽 storyboard에서 부품의 위치를 ​​바꾸거나 AutoLayout을 설정 변경하면 오른쪽에서 즉시 디자인을 확인할 수 있습니다!


오른쪽 화면 아래의 + 버튼을 누르면 다른 화면 크기도 확인할 수 있습니다.

끝에

어때? 내가 이것을 알았을 때는 충격이었습니다. Xcode는 여러가지 편리한 기능이 있으므로, 알고 모르지만 개발 효율에 크게 영향을 줍니다. 작은 tips로 개발 효율 향상!　
수고하셨습니다.