初めてのiPhoneアプリ開発で、大変だったこと ３storyboardでautolayoutを使う

　
　
　
Xcodeでは、storyboard?InterfaceBuilder?（以下、storyboardで統一）という、視覚的にレイアウトを配置できるツールが用意されています。
さらに、storyboardのautolayoutを用いれば、どのiPhoneやiPadのサイズにも自動で対応してくれます。

欠点としては、storyboardのlayoutがなかなか使いづらいという点です。
そのため、視覚的なstoryboardでなく、あえてコードのみでレイアウトをする玄人の方もいるみたいです。

せっかくXcodeを使うので、その特徴であるstoryboardを使いこなせるようになりたい！と思い、習得しました！

storyboardを使いこなすには、そこそこ学習コストがかかる、みたいな話を聞いたことがあるので、びびっていましたが、つかってみれば案外大丈夫です！
　
　
実際に、iPhone版宅建アプリの、「年度四択」モードのレイアウトを、storyboardのautolayoutを使って配置してみます。

以下、画像をたくさん使った結果、かなりの長文となりましたので、ご注意ください。
　

完成図

　

このようなゴールに向けて、レイアウトしていきます。
　
　
レイアウトの構造としては、ヘッダー上段にlabelを４つ横並びにし（縦サイズは20固定、横サイズは18:15、18:1、18:1、18:1）、ヘッダー下段にlabelを２つ横並びにします（縦サイズは20固定、横サイズは、9:8、9:1）。

そして、フッターにbuttonを７つ横並びにします（縦サイズは40固定、横サイズは７等分、下に広告のための50の空白を用意）。

あとは、ヘッダ〜とフッターの間にscrollviewを配置し、そのscrollviewの中にlabellを３つ縦に配置します（labelは、縦は上のviewから50の間隔、横はセンターに配置）。

label label label label
label label

scrollview
(label
label
label)

button button button button button button button
　
　
具体的にレイアウトしていきます。
　

比率による配置とscrollviewの配置

　
　
scrollviewを配置するにあたり、ヘッダーとフッターの間に配置したいので、先に、ヘッダーとフッターを配置します。
　

ヘッダーの配置

　
ヘッダー上部のlabelで一番左の配置の仕方を、少し詳しく説明します。

まずは、ヘッダーに使う計６個のlabelを適当に配置します。

左上から順番に、heddaue1、heddaue2、heddaue3、heddaue4、heddasita1、heddasita2と名付けました。
　
　
そのうち、一番左のlabel（heddaue1）について、横幅を画面いっぱいの18:15の比率にしたいと思います。
　
　
まずは、横幅を画面いっぱいのサイズに合わせるため、親viewの横サイズに合わせます。
InterfaceBuilderのドキュメントアウトラインの中で、親となるViewとheddaue1をcommandキーを押して複数選択します。

　
そうしたら、キャンバスの右下にあるツールバーのうち、|-□-|、こういうボタンを選択して、「EqualWidths」を選びます。
さらに、下の方にある「UpdateFrames」を、「Items of New Constraints」にします（これですぐにキャンバス上で変更が反映されます）。

これをやると、さきほど適当に並べていたlabelのうち、一番左上にあったlabelが姿を消します。

突然なくなってびっくりしますが、大丈夫です。

サイズの変更等があると、勝手に配置が動くためです（たいていは、座標0,0すなわち左上）。

ここから、さらにサイズを変更するので、引き続きlabelの姿がみえなくなった状態のままでいきます。
現時点では、heddaue1というlabelのサイズが、親ビューの横サイズと同じ、画面いっぱいになっているので、18:15の比率にサイズ変更します。

変更の仕方は、ドキュメントアウトラインの中で、「Constraints」を選ぶと、さきほど設定した「EqualWidths」があるので、それをクリックして選びます。

その「EqualWidths」を選んだ状態で、右のユーティリティエリアのうち、右から２番目のものさしみたいなアイコンを選びます。

すると、場合によっては、画像のように、「First Item」が親ビューであるSuperviewでなく、子ビューであるheddaue1がきている場合があります。
これでは、基準が親ビューでなく、子ビューとなってしまうので、「First Item」と「Second Item」を入れ替えます。
「Second Item」をクリックし、「Reverse First And Second Item」を選びます。

これで、「First Item」が親ビューであるSuperviewになります。
そうしたら、18:15の比率にします（18:15はあくまで今回の私のアプリ用の比率です）。

18:15と打ち込んだら、enterキーを押してください。

これを押しても、おそらくlabelの見た目のサイズは変わらないです。
そこで、変更を反映させます。
変更の反映をするには、ドキュメントアウトラインが、「Constraints」の「EqualWidths」が選択された状態になっていると思うので、それではなく、変更を反映させたいheddaue1というlabelをクリックして選びます。

その状態で、キャンバスの右下にあるツールバーのうち、|-△-|、こういうボタンを選択して、selected viewの「UpdateFrames」を選びます。

これで、labelのキャンバス上の見た目のサイズも18:15のサイズに変更されました。

画像では一番上のオレンジと赤の線が横幅いっぱいでなく18:15になっているのがわかります。

これで、横幅を親ビューのサイズに合わせて、さらにそれを任意の比率に合わせることができました。

このままでは、labelが上の方に配置されており、クリックしてそのlableを選択することができないので、右のユーティリティエリアのうち、右から２番目のものさしみたいなアイコンをまた選びます（このものさしはホントよく使う）。

とりあえず、labelを選択できる位置まで下げたいので、縦方向の座標であるY軸に100を入力しenterキーを押します。

これで、labelが下がって選択することができるようになりました。

あとは、このlabelを左上にぴったりと配置します。
ここからがポイントですが、あらかじめ自分が置きたい場所にぴったりと配置します。
その状態で、キャンバスの右下にあるツールバーのうち、|-□-|ボタンを選択して、上と左の|ー|を選んで赤くします。
左上にピッタリくっつけたいので、上の間隔は0にして、左の間隔は-16にします。左右にかんしては、-16が端を意味しているみたいです。
さらに、縦の幅を20に固定したいので、「Height」を20にします。

先ほど、ポイントとして、あらかじめ自分が置きたい場所にぴったりと配置する、と書いた理由を説明します。
上と左の一番端にピッタリあうように、0と-16を入力すれば自動でその位置に配置されるように思えます。
しかし、その他のviewの影響を受けて、ありえない位置にいくことがあるので、あらかじめ自分が希望する位置に置きます。
これにより、予想外の位置に配置されることを防げるからです。
なので、0と-16を入力するだけで満足せず、あらかじめ自分が置きたい位置に配置した状態で行ってください。

ここまでで、labelのheddaue1を左上にピッタリくっつけることができました。

　
　
ヘッダーのレイアウトに関しては、これまでの説明の通りに繰り返せば、残りの５つも配置できます。
その際に、labelの背景色を変えた方が、あらかじめ自分が置きたい位置に配置する際に、やりやすくなります。

このようにヘッダーの配置ができました。
　

フッターの配置

　
フッターには７つのボタンを配置します。

これも、基本的には、先ほどのヘッダーのやり方でできます。

フッターの場合は、下に広告のために50の余白を用意します。

これで、レイアウトできました。

　

scrollviewの配置

　
ヘッダーとフッターを配置したことで、あとはその間にscrollviewを配置します。
scrollviewの縦のサイズは、ヘッダーとフッターの間なので、先にヘッダーとフッターを配置する必要があったのです。

scrollviewの横の幅は、画面いっぱいにしたいので、親ビューのサイズと同じにします。

そうしたら、scrollviewをヘッダーとフッターの間に配置します。
その際、ポイントとしては、余白がないように、上下左右00-16-16にします。

これで、scrollviewがヘッダーとフッターの間いっぱいに広がりました。

あとは、labelを３つ縦に配置します。
今回のlabelは、横に関しては中央に配置したいので、キャンバスの右下にあるツールバーのうち、一番左のアイコンを選択します。
そして、「Horizontal Center in Container」にチェックを入れます。

これで、横に関しては中央に配置できたので、左右の制約をこれ以上つける必要はなくなりました。

あとは、上中下のlabelのうち、上labelは、キャンバスの右下にあるツールバーのうち、|-□-|ボタンを選択して、上の部分だけ制約をつけます。ここで、上labelの下の部分にも制約をつけてしまうと、scrollviewが上labelだけに設定されてしまい、中下のlabelが広がらなくなってしまうので注意してください！
scrollviewがスクロールしない原因は、たいてい制約をつけすぎてしまうことにより起こります。

中labelも、上のみに制約をつけます。この場合の制約は、上labelからの距離を意味します。

そして、下labelは、上下に制約をつけ、上の制約は中labelからの距離で、下の制約はscrolviewに対する距離になります。
下の制約の距離は0でもいいと思いますが、テキトーに私は227にしました。

これで、レイアウトが完成です。

ヘッダーとフッターの間の空間が水色なのは、scrollviewを表しています。
　
　
実際に、実機で表示するとこうなります。
　

　
スクロールしてみると
　

　
ちゃんとスクロールできました！
　
　
　
これで、storyboardでautolayoutが使えるようになったと思います。