StoryboardのAutoLayoutを使用してラベルやボタン等を均等に配置するには、どうすればいいのか悩んだ事ありませんか？
実は、コツさえわかってしまえば応用が利いて簡単に配置ができるようになります。
今回は、ボタンを横方向に均等に配置する方法の紹介です。
動作環境
Xcode 7.3.1
iOS 9.3.2
ボタンを横方向に均等に配置する方法
４個のボタンを横方向に均等に配置する方法です。
まずは、基準(親)となるボタンを決めなくてはなりません。今回の基準となるボタンは左下に決めました。
1.基準ボタン配置する
左下にボタンを配置
pinを押して左0と下20のスペース値を設定します。
これで、基準ボタンの配置が完了しました。
2.２個目のボタンを配置する
２個目のボタンは適当に配置します。
pinを押して左8のスペース値を設定します。
２個目のボタン配置完了です。
3.３個目のボタンを配置する
３個目のボタンも適当に配置します。
pinを押して左8のスペース値を設定します。
３個目のボタン配置完了です。
4.４個目のボタンを配置する
４個目は一番右になりますのでとりあえず右端に配置します。
pinを押して左8と右0のスペース値を設定します
４個目のボタン配置完了です。
5.ボタンの高さ横幅を基準ボタンに合わせる
ボタン２とボタン３とボタン４の高さと横幅が基準ボタンと同じになるように設定します。
ボタン４→ボタン３→ボタン２→基準ボタンの順番で選択
エラーが出ていますが無視してください。
“Equal Widths”と”Equal Heights”にチェックしてAdd
これで、ボタン２、３、４の高さと横幅が基準ボタンと同じになるように設定が完了しました。
6.４個のボタンを水平方向に並べる
ボタン２、３、４が基準ボタンと水平方向に並ぶように設定します。
ボタン４→ボタン３→ボタン２→基準ボタンの順番で選択
エラーが出ていますが無視してください。
“Vertical Centers”にチェックを入れてAdd
これで、ボタン２、３、４が基準ボタンと水平に並ぶように設定完了です。
表示もエラーが消えてワーニングだけになりました。
Resolveを押してUpdate Framesを選ぶと再描写されて均等に配置されます。
はい、これで完成です。
わかりづらいので、ボタンの色を変えてみました。
みなさんうまくいきましたか？
うまくいかない場合は、面倒ですがもう一度最初からやってみてください。
慣れるまで頑張ってみましょう！
動作確認
では、シミュレーターで動作確認してみましょう！
縦方向表示
横方向表示
まとめ
均等に配置簡単だったでしょう！
iPadでも表示してみてください問題なく均等に表示されます。
今回は、これでおしまい。
コメント