Xcode|StoryboardのAutoLayoutを使用してボタンやラベルを均等に配置する 応用編

20160703_112

StoryboardのAutoLayoutを使用してボタンやレベルを均等に配置する第二弾

今回は縦方向と横方向のボタン5×4を均等に配置します。前回の横方向を理解していれば簡単です。始めての方は「StoryboardのAutoLayoutを使用してラベルやボタンを均等に配置する」をどうぞ!

動作環境

Xcode 7.3.1
iOS 9.3.2

縦一列均等に配置する

前回の「StoryboardのAutoLayoutを使用してラベルやボタンを均等に配置する」を利用します。

まずは、基準ボタンから縦方向に5個ボタンを配置します。

20160703_101

何も考えずにボタンを4個置きます。

20160703_102

わかりやすい様に、ボタンのTitleをbtn x,yにしました。

btn 1,1 / btn 1,2 / btn 1,3の設定

“bin 1,1″を選んで下のスペースを8を設定します

20160703_103

“btn 1,2” “bin 1,3″も同じ様に設定します。

btn 1,4の設定

最後は、”btn 1,4″これだけ少し違います。

“but 1,4″を選んで上、下のスペースを8に設定します。

20160703_104

これで基本設定が終了しました。あとは”基本ボタン”に習う様に設定です。

基準ボタンに習う様に設定する

“btn 1,4″→”btn 1,3″→”btn 1,2″→”btn 1,1″→”基準ボタン”の順番で選択します。

20160703_105

エラーが出ていますけど無視して次いきます。

“Align”をクリックして縦中心で並ぶ様に設定します

20160703_106

縦幅、横幅を基準ボタンに習う様に設定します

20160703_107

エラーが消えてワーニングだけになりました。

20160703_108

“Update Frames”してあげると

20160703_109

縦一列が完了しました。

残りのボタン配置

もうおわかりですよね?基準ボタンを決めて同じ方法で設定すれば完了です。
基準の決め方は、横方向と縦方向の二つのやり方があります。
どちらでも好きな方で大丈夫です。

横方向

横方向なら基準を一番左にして下記の様に設定していきます。

20160703_110

縦方向

縦方向なら基準を一番下にして設定していきます。

20160703_111

まとめ

うまく設定できましたか?
もうAutoLayoutが大好きですね(笑)

レイアウト崩れるから直してとプロジェクトを見たら、すべてコードで書かれているげんなりしませんか?

ぜひ、Storyboardをどんどん使ってくださいね。

サンプル

プロジェクトファイル – github

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク