42
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Xcode】画面サイズの違うシミュレーターをいちいちビルドせずにUIデザインを確認する方法

Posted at

はじめに

独学でプログラミング学び始めて約1年、業務でプログラムを書き始めて2ヶ月、Swift始めて1ヶ月のSwifterです。
アプリを開発する際、画面サイズの違うデバイスにも対応するのはかなり重要ですが、AutoLayoutの設定をすると意図しないUIデザインになってしまうことが多々あります。
この記事ではいちいちシミュレーターを起動しなくてもその場でデザインを確認できる方法を記載するので参考にしてください

デザイン確認時のイライラ

こんな確認の仕方していませんか??

  1. とりあえずボタンとかラベルとか部品置く
  2. まずはシミュレーターでビルドして表示を確認
  3. 大きさの違うシミュレーターで起動して表示確認
  4. ず、ずれてる・・・
  5. 位置を変えてAutoLayoutを設定して、シミュレーターで起動して確認
  6. 別のシミュレーターを変えて表示を確認
  7. 試しにデバイス横にしてみたらずれてる・・・
  8. 以下、ループ

当てはまる人はこの記事見れば効率アップ間違いないです!

手順

①まずはプロジェクト作ってViewControllerの画面サイズを指定

今回は4インチでサイズ指定してます
スクリーンショット 2016-04-28 23.34.37.png

②適当に部品を配置

適度にこんな感じで配置しましたスクリーンショット 2016-04-28 23.57.03.png

③右上の円が重なっているボタン(アシスタントエディタボタン)を押して画面を分割にする

画面分割ができればよいので、右側はなんでもよいです
スクリーンショット 2016-04-29 0.09.40.png

④右画面上部の青く光ってるアイコンをクリックしてPreview(1) → Main.storyboard(Preview)を選択する

スクリーンショット 2016-04-29 0.19.30.png

⑤サイズを追加

こんな感じの画面になるはず
※見にくいので左のナビゲーターエリア、右のユーティリティーエリアは消しました
スクリーンショット 2016-04-29 0.24.43.png

左側のstoryboardで部品の位置を変えたり、AutoLayoutを設定・変更すれば、右側で即時デザインが確認できます!
スクリーンショット 2016-04-29 0.34.52.png

右画面下の+ボタンを押せば他の画面サイズも確認できます
スクリーンショット 2016-04-29 0.35.54.png

終わりに

どうでしょうか? 僕がこれを知った時は衝撃でした。 Xcodeは色々便利な機能があるので、知ってる知らないが開発効率に大きく影響します。ちょっとしたtipsで開発効率アップ! 
お疲れ様でした。

42
39
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?