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

20160627_019

StoryboardのAutoLayoutを使用してラベルやボタン等を均等に配置するには、どうすればいいのか悩んだ事ありませんか?

実は、コツさえわかってしまえば応用が利いて簡単に配置ができるようになります。

今回は、ボタンを横方向に均等に配置する方法の紹介です。

動作環境

Xcode 7.3.1
iOS 9.3.2

ボタンを横方向に均等に配置する方法

4個のボタンを横方向に均等に配置する方法です。

まずは、基準(親)となるボタンを決めなくてはなりません。今回の基準となるボタンは左下に決めました。

1.基準ボタン配置する

左下にボタンを配置

20160627_001

pinを押して左0と下20のスペース値を設定します。

20160627_002

これで、基準ボタンの配置が完了しました。

2.2個目のボタンを配置する

2個目のボタンは適当に配置します。

20160627_003

pinを押して左8のスペース値を設定します。

20160627_004

2個目のボタン配置完了です。

3.3個目のボタンを配置する

3個目のボタンも適当に配置します。

20160627_005

pinを押して左8のスペース値を設定します。

20160627_006

3個目のボタン配置完了です。

4.4個目のボタンを配置する

4個目は一番右になりますのでとりあえず右端に配置します。

20160627_007

pinを押して左8と右0のスペース値を設定します

20160627_008

4個目のボタン配置完了です。

5.ボタンの高さ横幅を基準ボタンに合わせる

ボタン2とボタン3とボタン4の高さと横幅が基準ボタンと同じになるように設定します。

ボタン4→ボタン3→ボタン2→基準ボタンの順番で選択

20160627_009

エラーが出ていますが無視してください。

20160627_010

“Equal Widths”と”Equal Heights”にチェックしてAdd

これで、ボタン2、3、4の高さと横幅が基準ボタンと同じになるように設定が完了しました。

6.4個のボタンを水平方向に並べる

ボタン2、3、4が基準ボタンと水平方向に並ぶように設定します。

ボタン4→ボタン3→ボタン2→基準ボタンの順番で選択

20160627_011

エラーが出ていますが無視してください。

20160627_012

“Vertical Centers”にチェックを入れてAdd

これで、ボタン2、3、4が基準ボタンと水平に並ぶように設定完了です。

20160627_013

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

20160627_014

Resolveを押してUpdate Framesを選ぶと再描写されて均等に配置されます。

20160627_015

はい、これで完成です。

わかりづらいので、ボタンの色を変えてみました。

20160627_016

みなさんうまくいきましたか?
うまくいかない場合は、面倒ですがもう一度最初からやってみてください。

慣れるまで頑張ってみましょう!

動作確認

では、シミュレーターで動作確認してみましょう!

縦方向表示

20160627_017

横方向表示

20160627_018

まとめ

均等に配置簡単だったでしょう!

iPadでも表示してみてください問題なく均等に表示されます。

今回は、これでおしまい。

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク