Xcode 4.4.1 で Interface Builder を使用した iPhone 5 対応のデザイン #1 Autosizing 編

Xcode 4.4.1 の Interface Builder は、iPhone 5 の画面に対応したサイズになっていません。しかし、Autosizing を活用することで、ソースコードで場合分けすることなく、iPhone 5 にも対応したデザインをある程度作成できます。

今回は、ボタンを5つ並べた次のようなデザインで、Autosizing の動作を検証してみます。

検証用デザイン

検証用デザイン

これまでの画面では、Autosizing を変更しても、配置や大きさに変化はありませんでした。しかし、iPhone 5 の液晶サイズに拡大されたときは、Autosizing の設定によって、下記のように配置や大きさに違いが生じます。

検証結果

検証結果

Autosizing については、Interface Builder User Guide(現在は公開されていないようです。)に記載があります。

The springs and struts in the autosizing control define the selected view’s relationship to its parent frame. A spring causes the view to resize itself proportionally based on the width or height of its superview. A strut causes the view to maintain a fixed distance between itself and its superview along the given edge.

Spring が中央の上下左右の矢印で、Strut が周囲の上下左右のエの字を示しています。Spring は、オブジェクトが拡大可能か拡大不可能かの制約になります。Strut は、設定された側の画面端からの距離が固定される制約になります。

Autosizing を活用して、iPhone 3G から iPhone 5 まで対応したアプリを開発しましょう。

参考文献

iPhone 3G と iPhone 5 の両方で動作するアプリを開発

About TSUCHIDA Takuya

生まれ変わったら黒猫になりたいシステムアーキテクトです。僕への連絡は右下の MessageLeaf からお願いします。
This entry was posted in Xcode and tagged , , , . Bookmark the permalink.