前回のつづき

サンプルコード: https://github.com/stack3/iOSAutoLayoutSamples

サンプルを起動して、Resize Verticalを選択すると以下の画面になります。

01

青の部分は上端に固定されるView、緑の部分は下端に固定されるView、中央はその間で伸縮するTableViewです。

 

横画面にすると以下のようになります。

02

青と緑のViewは高さ固定のまま幅だけ伸び、TableViewは幅が伸びて、高さは縮んでいます。

Constraintの確認

STResizeVerticalViewController.xibを開きます。

上端の青いViewを選択しましょう。

01

 

レイアウト上はConstraintが確認しづらいので、Size Inspectorから確認します。

02

 

それぞれ以下を意味します。

Height Equals: 50 高さ50pxで固定
Top Space to: Top Layout Guide 上端をNavigationBarと隣接(間隔ゼロ)
Trailing Space to: Superview 右端をSuperviewと隣接(間隔ゼロ)
Leading Space to: Superview 左端をSuperviewと隣接(間隔ゼロ)
Bottom Space to: Table View 下端をTableViewと隣接(間隔ゼロ)

 

下端の緑のViewを選択して、Size InspectorからConstraintを確認します。

Height Equals: 50 高さ50pxで固定
Top Space to: Table View 上端をTableViewと隣接(間隔ゼロ)
Bottom Space to: Bottom Layout Guide 下端をSuperviewと隣接(間隔ゼロ)

Toolbarがある場合は、その上端と隣接

Leading Space to: Superview 左端をSuperviewと隣接(間隔ゼロ)
Trailing Space to: Superview 右端をSuperviewと隣接(間隔ゼロ)

 

TableViewを選択して、Size InspectorからConstraintを確認します。

Top Space to: View 上端を青色のViewと隣接(間隔ゼロ)
Trailing Space to: Superview 右端をSuperviewと隣接(間隔ゼロ)
Leading Space to: Superview 左端をSuperviewと隣接(間隔ゼロ)
Bottom Space to: View 下端を緑色のViewと隣接(間隔ゼロ)

青と緑のViewと違って高さのConstraintがありません。よって高さが可変します。

自分でConstraintを設定する

Subviewをすべて削除して、Viewをまっさらな状態にします。

03

 

まず上端のViewを配置しましょう。高さはとりあえず適当にします。ここでは80pxにしています。

04

 

Backgroundを青色にしましょう。

07

 

05

 

Pinボタンを押して以下のように上と左右のConstraintを選択し、Heightにチェックを入れて50にします。

11

 

高さのConstraintがオレンジ色になっています。また+30という表示があります。

06

 

これは設定されたConstraintは50pxだが、レイアウト上は+30、つまり80pxであるという意味です。レイアウト上の高さも50pxにすると、Constraintが正常な青色に変わります。ただし、ドラッグして1px単位で調整するのは手間です。こういう時は以下の方法が便利です。

青色のViewを選択した状態で、Resolve Auto Layout Issuesボタンを押します。そして、Update Framesを選択します。

13

 

するとこのようにレイアウト上も高さが50pxになります。Constraintも青くなりました。

14

 

Size InspectorからConstraintを確認してみてください。うまくいっているはずです。

07

 

次に下端の緑のViewを配置しましょう。先ほどと同じく高さは適当です。

16

 

Backgroundを緑にします。

17

 

Pinボタンを押して、Constriantを以下のように設定しましょう。

18

 

先ほどと同じように高さのConstraintがオレンジになります。

19

 

Resolve Auto Layout Issuesボタンを押して、Update Framesを選択します。

13

 

高さのConstraintが青くなりました。

20

 

Size InspectorでConstraintを確認すると、うまくいっているはずです。

08

 

最後にTableViewを配置しましょう。このように適当に配置します。

09

 

Pinボタンを押して、以下のように上下左右のConstraintを選択して、それぞれ0pxにします。

23

 

するとこのようになります。上下左右の間隔を0pxに設定したが、レイアウト上はそうはなっていないのでConstraintはオレンジ色になっています。

10

 

Resolve Layout Issuesボタンを押して、Update Framesを選択すると以下のようになります。

11

 

Size InspectorからConstraintを確認すると、うまくいっているはずです。

26

 

最後にTableViewをSTResizeVerticalViewControllerのIBOutlet変数とひもづけましょう。

左サイドバーからResize Vertical View Controllerを選択して、Connections Inspector開き、tableViewからレイアウト上のTableViewへ線を伸ばします。

12

これでSTResizeVerticalViewControllerのプログラムからTableViewにRow1〜30が表示されます。

 

起動して縦横画面、両方試してみましょう。うまくいっているはずです。

01

02

その7へつづく