StoryboardのAutoLayoutを使用してボタンやレベルを均等に配置する第二弾
今回は縦方向と横方向のボタン５×４を均等に配置します。前回の横方向を理解していれば簡単です。始めての方は「StoryboardのAutoLayoutを使用してラベルやボタンを均等に配置する」をどうぞ！
動作環境
Xcode 7.3.1
iOS 9.3.2
縦一列均等に配置する
前回の「StoryboardのAutoLayoutを使用してラベルやボタンを均等に配置する」を利用します。
まずは、基準ボタンから縦方向に５個ボタンを配置します。
何も考えずにボタンを４個置きます。
わかりやすい様に、ボタンのTitleをbtn x,yにしました。
btn 1,1 / btn 1,2 / btn 1,3の設定
“bin 1,1″を選んで下のスペースを8を設定します
“btn 1,2” “bin 1,3″も同じ様に設定します。
btn 1,4の設定
最後は、”btn 1,4″これだけ少し違います。
“but 1,4″を選んで上、下のスペースを８に設定します。
これで基本設定が終了しました。あとは”基本ボタン”に習う様に設定です。
基準ボタンに習う様に設定する
“btn 1,4″→”btn 1,3″→”btn 1,2″→”btn 1,1″→”基準ボタン”の順番で選択します。
エラーが出ていますけど無視して次いきます。
“Align”をクリックして縦中心で並ぶ様に設定します
縦幅、横幅を基準ボタンに習う様に設定します
エラーが消えてワーニングだけになりました。
“Update Frames”してあげると
縦一列が完了しました。
残りのボタン配置
もうおわかりですよね？基準ボタンを決めて同じ方法で設定すれば完了です。
基準の決め方は、横方向と縦方向の二つのやり方があります。
どちらでも好きな方で大丈夫です。
横方向
横方向なら基準を一番左にして下記の様に設定していきます。
縦方向
縦方向なら基準を一番下にして設定していきます。
まとめ
うまく設定できましたか？
もうAutoLayoutが大好きですね(笑)
レイアウト崩れるから直してとプロジェクトを見たら、すべてコードで書かれているげんなりしませんか？
ぜひ、Storyboardをどんどん使ってくださいね。
サンプル
プロジェクトファイル – github
コメント