読者です 読者をやめる 読者になる 読者になる

使って創ってApp

ソフトウェアを使ったり作ったりするブログです

Storyboardのレイアウト設定を楽に確認する

Storyboard で UI部品に Constraints を設定して、結果をシミュレータ無しで確認してみましょう。

Storyboard のプレビュー画面

Storyboard でレイアウトした画面をアシスタントエディタに表示させて、実際の表示を確認することができます。確認画面は下の画像のようになります。

f:id:hitxutokun:20151207154047p:plain

右側にレイアウトした結果が表示されます。ここでは、 iPhone 4-inch と 3.5-inch のサイズでの表示を確認しています。この方法なら、いちいちそれぞれの iOS シミュレータを表示しなくて済みますね。

Storyboard のプレビューを表示する

  1. Storyboardを開く
  2. Assistant editorを表示
  3. 表示するファイルを Automatic -> ViewController から Preview -> Main.storyboardに変更

    f:id:hitxutokun:20151207155154p:plain

これで表示されます。デフォルトでは iPhone 4-inch サイズが表示されています。

Storyboard のプレビューを使用する

・画面の向きを変更

f:id:hitxutokun:20151207155830p:plain

上画像中の赤丸のアイコンをクリックすると、向きを変更できます。

・画面を追加

プレビュー画面左下の + アイコンをクリックして、他のサイズを追加できます。

f:id:hitxutokun:20151207160445p:plain

・拡大縮小

プレビュー画面の、何もない真っ白な所をダブルクリック

まとめ

この機能を使用すれば、iOSシミュレータを起動することなくレイアウトを確認できます。様々な画面サイズを表示できるので、iOSシミュレータを切り替える必要も無くなります。