この記事はXcode 4.6.* + iOS 6のものです。Xcode 5 + iOS 7はこちら。

http://blogios.stack3.net/archives/1540

前回の続き。今回はSubviewを縦に並べて画面回転するとサイズを自動調整するサンプルです。

サンプル: https://github.com/stack3/STLayoutViewSample

サンプルのMenu画面からAuto LayoutセクションのVerticalを選択します。

f:id:eimei23:20130104115619p:plain

f:id:eimei23:20130104115624p:plain

ヘッダ(UIView)とフッタ(UIView)があって、中身はTableViewというありがちな構成です。今回もLayout部分に関してはプログラムを書かずに実現しています。

STAutoLayoutVerticalViewController.xibをみてみましょう。

f:id:eimei23:20130104115632p:plain

ヘッダを選択。

f:id:eimei23:20130104115641p:plain

何のConstraintがあるのか、ちょっとわかりづらいです。Size Inspectorから確認してみましょう。

f:id:eimei23:20130104120620p:plain

  • Height Equals: 50 – 高さ50px固定
  • Leading Space to: Superview – Superview左端との間隔 0px
  • Trailing Space to: Superview – Superview右端との間隔 0px
  • Top Space to: Superview – Superview上端との間隔 0px
  • Bottom Space to: TableView – ヘッダの下端とTableView間隔 0px

もしヘッダに間隔あるとするとConstraintはこのようになります。

f:id:eimei23:20130104115654p:plain

Equals: 7とかEquals: Defaultのように表示されます。今回のように0pxの場合はEqualsが表示されません。

このConstriantで「高さ50px固定、かつSuperviewとの上端、左端、右端間隔なし、つまり幅自動調整」というAuto Layoutが実現されます。

次にフッタを選択。

f:id:eimei23:20130104115700p:plain

Size InspectorからConstraint確認。

f:id:eimei23:20130104115708p:plain

  • Height Equals: 50 – 高さ50px固定
  • Bottom Space to: Superview – Superview下端との間隔 0px
  • Leading Space to: Superview – Superview左端との間隔 0px
  • Trailing Space to: Superview – Superview右端との間隔 0px
  • Top Space to: TableView – フッタの上端とTableViewの間隔 0px

このConstriantで「高さ50px固定、かつSuperviewとの下端、左端、右端間隔なし、つまり幅自動調整」というAuto Layoutが実現されます。

TableViewを選択してみましょう。

f:id:eimei23:20130104115713p:plain

Size InspectorからConstraintを確認。

f:id:eimei23:20130104115720p:plain

  • Leading Space to: Superview – Superview左端との間隔 0px
  • Trailing Space to: Superview – Superview右端との間隔 0px
  • Align Center Y to: Superview – Superviewの垂直方向中心(これは特に意識しなくてもいい)
  • Top Space to: View – Header – 上端とヘッダとの間隔 0px
  • Bottom Space to: View – Footer – 下端とフッタとの間隔 0px

このConstraintで「Superviewとの左端・右端の間隔なし、ヘッダ・フッタとの間隔なし、つまり幅と高さ自動調整」というAuto Layoutが実現されます。

実際に自分で最初から配置してみましょう。すべてのSubviewを削除します。

f:id:eimei23:20130104115727p:plain

Viewをヘッダとして配置します。最初にベタッと画面全体を覆うように張り付くので、高さを50pxに調整しましょう。

f:id:eimei23:20130104115732p:plain

BackgroundをBlueにします。

f:id:eimei23:20130104115738p:plain

f:id:eimei23:20130104115745p:plain

とりあえずこの状態でSimulatorで動かしてみましょう。まずはiPhone (Retina 4-inch)での動作。

f:id:eimei23:20130104115750p:plain

f:id:eimei23:20130104115759p:plain

次はiPhone (Retina 3.5-inch)。

f:id:eimei23:20130104115804p:plain

f:id:eimei23:20130104115812p:plain

4-inch(iPhone 5)では縦画面はかろうじて表示されていますが、横画面は何も表示されません。3.5-inch(iPhone4、3GS)では何も表示されません。これはSuperview下端からの間隔を固定するConstraintが働いているからです。

f:id:eimei23:20130104115818p:plain

f:id:eimei23:20130104115825p:plain

これではいけませんね・・・

ヘッダViewを選択して右下のメニューからPin > Heightを選択してください。

f:id:eimei23:20130104120749p:plain

このようにHeight Constraintが追加されました。

f:id:eimei23:20130104120906p:plain

Height Constraintが選択状態になっているので、ヘッダViewを選択しなおしてからSize Inspectorを見てみましょう。

f:id:eimei23:20130104115839p:plain

追加されたHeight Constraintがありますが、まだBottom Space to: Superviewが残っています。これを削除しましょう。右にある歯車アイコンからDeleteを選択して削除できます。

f:id:eimei23:20130104115848p:plain

※ 画面イメージ上のヘッダViewの下に伸びる青いバーを選択してDeleteを押しても削除できます。

削除後、ヘッダViewを選択すると下に伸びていたバーがなくなっていますね。

f:id:eimei23:20130104115853p:plain

Simulatorを起動してみましょう。今度はうまくいくはずです。

iPhone (Retina 4-inch)

f:id:eimei23:20130104115903p:plain

f:id:eimei23:20130104115908p:plain

iPhone (Retina 3.5-inch)

f:id:eimei23:20130104115915p:plain

f:id:eimei23:20130104115926p:plain

次はフッタViewです。幅をSuperviewに合わせて高さを50px調整して下端に配置します。

f:id:eimei23:20130104115934p:plain

見ての通りSuperview上端に伸びる青いバーがあります。これは上端との間隔を固定するもので、ヘッダの時同様に悪さをします。

Height Constraintを追加しましょう。

f:id:eimei23:20130104120749p:plain

追加後、フッタViewを選択し直すと、このようになります。

f:id:eimei23:20130104115939p:plain

Superview上端に伸びるバーを選択してDeleteキーを押して削除しましょう。先ほどのようにSize Inspectorから歯車アイコンを選択してDeleteでも良いです。

削除後はこうなります。

f:id:eimei23:20130104115947p:plain

BackgroundをGreenにしてください。

f:id:eimei23:20130104115956p:plain

Simulatorを起動しましょう。

f:id:eimei23:20130104120006p:plain

f:id:eimei23:20130104120023p:plain

うまくいっていますね!

最後にTableViewを配置してみましょう。これはちょっとコツがいります(笑)手順を間違わないようにしてください。

とりあえずTableViewをこんなふうに真ん中に配置します。

f:id:eimei23:20130104120045p:plain

次に右端と左端をSuperviewに合わせます。幅をドラッグしている最中にピタっと合うのでやりやすいと思います。

f:id:eimei23:20130104120055p:plain

次にCommandキーを押しながらヘッダとTableViewを選択。

f:id:eimei23:20130104120103p:plain

Pin > Vertical Spacingを選択

f:id:eimei23:20130104120118p:plain

このようにヘッダとTableViewの間に青いバー(Constraint)が追加されます。

f:id:eimei23:20130104120126p:plain

ここで邪魔になるのはTableViewの高さを固定するConstraintです。

f:id:eimei23:20130104120135p:plain

これを選択してDeleteキーを押して削除しましょう。

f:id:eimei23:20130104120144p:plain

次にTableViewのSize InspectorからConstraintを確認。

f:id:eimei23:20130104120149p:plain

Top Space to: Viewというのがありますね。これがヘッダとの間隔固定のConstraintです。87pxになっているので、これを0pxにしましょう。右側の歯車アイコンを押してSelect and Edit…を選択。Constraintのプロパティを開きます。そしてConstantを0にしてください。

f:id:eimei23:20130104120158p:plain

※ この時点でTableViewとフッタの間隔も0pxになると思いますが、理解を深めるためにも以下の手順に従ってフッタとのConstraintも設定しましょう。

次にCommandキーを押しながらTableViewとフッタを選択してください。

f:id:eimei23:20130104120208p:plain

Pin > Vertical Spacingを選択します。

f:id:eimei23:20130104120118p:plain

f:id:eimei23:20130104120320p:plain

このようにBottom Space to: Viewが追加されます。この時点で0pxなのでEqualsの表示がありませんが、もし表示がある場合は歯車アイコンからSelect and Edit..を選択し、Constantを0に設定してください。

最後にTableViewのCellを表示するプログラムを有効にするために、IBOutlet _tableView変数とTableViewをリンクします。

f:id:eimei23:20130104120238p:plain

Simulatorを起動して確認しましょう。

f:id:eimei23:20130104120247p:plain

f:id:eimei23:20130104120256p:plain

最後までスクロールして最後のRow 50がフッタの上に表示されることも確認してください。

f:id:eimei23:20130104120304p:plain

長くなってしまいましたが、慣れればすぐに出来るようになると思います。

次回はSuperview全体にSubviewを表示する方法です。

その7へつづく