【Swift2.0】 画面幅いっぱいに（均等に）ボタンを配置する方法 その２【カスタムView】
さて前回の続きです
ryokwkm2.hatenadiary.jp
このシリーズの目次
：カスタムViewを使う
１．カスタムViewのxibとクラスを用意する
２．xibとクラスを紐付ける
３．storyBoardとカスタムView紐付けて、動作確認
：画面幅いっぱいにボタンを配置する
４．xibで、実際のレイアウトを作成
５．コードを書く（画面に応じて大きさを変更させる）
：ボタンを押した時の処理を呼び出し元クラスで上書きする
６．プロトコルでデリゲートを定義
今回はAutoLayoutを用いて実際のレイアウトをしていきます
４．xibで、実際のレイアウトを作成
さて、ボタンを画面幅いっぱいにするということは
HTMLでいうところの width=100% にするということです
さらに、各ボタンの大きさもそれぞれ width=16.6% (6分の1) を指定したいのです
この指定方法がちょっと複雑なのです
なので、このSTEP４を、さらに３つのステップにわけて説明していきます
目次
STEP４．１ Viewに width=100% を設定
STEP４．２ Viewに width=50% を設定
STEP４．３ Viewに width=16.6% を指定し、ボタンを６個並べる
適当にViewを３つ置いてください（わかりやすいように色をつけてます）
名前はそれぞれ
dummy
dummyLeft
dummyRight
とし、元から置いてあったViewの名前を
parentView
に変更しました
これらにそれぞれ以下の設定をします
parentView width:100%
dummy width:100%
dummyLeft width:50% （左から）
dummyRight width:50% （右から）
それでは具体的な方法を説明していきます
STEP４．１ Viewに width=100% を設定
以下の２つを設定します
parentView width:100%, height:100%
dummy width:100%, height : 30px
100%表示は
Editorメニュー > Pin > で画面幅いっぱいに表示させるようにすればOKです
parentViewに対して以下のように設定します
paretView には width=100% height=100% を指定しました
dummy もwidth=100% を指定しますが、高さは固定値にします。 ここでは適当に 30くらいにしておきます
右、左、下辺は parentView に合わせてください
Update Frames をすると以下のようになります
STEP４．２ Viewに width=50% を設定
さて 50% 表示のやり方です
こちらは先ほど設定した
width=100% のView(dummy) の 50% の大きさ
という指定を行います
まずはdummyLeft を parentView の左下に添わせます
widthは設定せず、 heightは適当に10くらいに設定してみましょう
するとエラーが表示されます
widthが未定ですよというエラーです
続いてwidthを設定します
widthは、まず dummy と同じ大きさにします
dummyとdummyLeft を両方選択して、 pin から EqualWidths を設定
するとdummyと同じく width:100% が設定されます
エラーも消えました
さて、50%の秘訣はこの EqualWidthsです
今は dummyと同じ比率（Equal）になっていますが、この比率を 50% に変更します
設定した constaints から、今設定したEqualWidthsの設定に変更を加えます
ユーティリティエリアのFirst Item を見ると、 dummy.width になっています
設定するのは dummyLeft.width に対してですので、これを入れ替えましょう
その後、 Multiplier を変更します
現在 1 (100%) になっていますが、 これを0.5 に変更します
すると 50% で表示させることができました
STEP４．３ Viewに width=16.6% を指定し、ボタンを６個並べる
さて、 4.1, 4.2 を理解したあなたは、以下の設定ができるはずです。
やってみましょう
parentView width:100%, height:100%
dummy width:100%
dummyLeft width:50% （左から）
dummyRight width:50% （右から）
できたらUIButtonを６個並べて、Titleを空にし、画像を指定しましょう
画像に関しては ImageとBackGroundがありますが、
どちらに指定しても完成後の見た目は同じです。
AutoLayout上ではBackgroundにした場合、以下のように伸びて表示されます
その後以下のPinを指定すれば見た目は完成です
◆width
各UIButtonの大きさは dummy の 1/6 (0.1666)になるように EqualWidthsを設定
◆Height
上と下に関しては、どちらも parentView の上下に添わせて設定してください (height:100%)
◆位置
中央の２つは dummyLeft, dummyRight に沿わせるようにPinを設定
端の２つは、 parentViewの端に沿わせるように設定
端から２番めの２つは、端のボタン、もしくは中央のボタンのどちらかに沿わせるように設定します
この時、どのViewに添わせているかを確認しながら設定してください。
というのも、parentViewに添わせているつもりが別のViewに添わせていた ということがよくあります。
お疲れ様でした。
ただこれだと正常に動きません。
画面ごとにViewの大きさを変えるコードを少し書く必要があります
それはまた次回書きます
