*

StoryBoardの表示サイズをデバイスに合わせる。 – コタツと台所にて作るアプリ 6

   

MAX_sumahodon20141025170110500

「それじゃ、始めましょうか。」

と、独り言を呟きながらXcodeのアイコンをクリックする。

新規プロジェクトを開き、Single Application Viewを選択。

プロダクト名に「MADO」と入れる。言語はもちろん「Swift」だ。

OKボタンを押したら、一つのViewControllerのみが設定された、まっさらな画面が表れる。

この画面を見るたびに、私は新しい真っ白な画用紙を連想する。

これからいろんなものを書き加えていくんだというワクワク感が共通しているのかもしれない。

早速、左ペインのメニューから「Main.storyBoard」のファイルを選択する。

私の開発手順としては、まずは最初にトップ画面とその次の画面までをStoryBoardで簡単に作り、そこから機能を作り込んでいく。

そして、その後にレイアウト等を作り込んでいくようにしている。

まずは難しい部分から着手したほうが、スケジュールがブレるリスクが少なくなるからだ。

どこも似た様なものかもしれないけれど。

ウィンドウにStoryBoardの画面が表示される。

「え?あ、えぇ?」

画面には真四角なViewが表示されている。

Xcode5まではこんな事はなかった。最初に表示されるのは直感的にiPhoneだとわかる縦長のViewだった。

AppleはApple Watchを意識しすぎて、四角にでもしたというのだろうか。

「これ、どうすりゃいいのよ・・・」

スタートから5秒。開発が速攻で行き詰ってしまった。

StoryBoardの表示サイズを変更する

iOS8から、Adaptiveというマルチデバイスな概念が取り入れられ、それに合わせてXcode6のレイアウトの設定もXcode5から変わりました。

Size Classというデバイスを判定する新しい定義ができて、それを用いる必要があります。

その辺りの詳細は以下のサイト様をご参考ください。

[iOS 8] マルチデバイス対応の新機能「Trait Collection」

ただ、「もちろんマルチデバイスは必要なのはわかるけど、それはともかくとして、まずは手持ちのiPhoneで手っ取り早くデモをしたいから、実機に合わせたサイズでStoryBoardを設定したいんだけども!」という方もいると思います。(私です。)

その場合は、ViewControllerを選択後にStoryBoardの右ペインから「Attributes inspector」を選択します。

そして、「Simulated Metrics」のサイズを選択します。

スクリーンショット 2015-01-20 6.17.54

すると、一覧の選択項目にデバイスのサイズが出てきますので、自分が使いたい好みのサイズにします。

スクリーンショット 2015-01-20 6.18.07

ちなみに3.5-inchがiPhone4s、4-inchがiPhone5とiPhone5s、4.7-inchがiPhone6で、5.5-inchがiPhone6Plusになります。

すると、Viewの画面がそのサイズに合わせた形に変わります。

あとはボタンを配置すれば、そのデバイスではボタンが配置された通りに表示がされるはずです。

Constraintを設定しないと他のデバイスではガタガタになる

この方法は、手っ取り早くパーツを配置して確認するにはもってこいですが、問題もあります。

このSizeの指定は、あくまでその端末でのみに有効な設定のため、他のデバイスで見ると、それはそれは無残な形になります。

Autolayoutを使っていて、パーツのConstraintを設定していないので当たり前といえば当たり前なんですが、普段使っているデバイスではまともに見える分、ショックが大きかったりします。

この方法は、あくまで仮設定と考えて、ゆくゆくは必ずConstraintを設定して、マルチデバイス対応するようにしてください。

 - Swift, Xcode, アプリ