ボタンやラベルや画像を均等に並べたい時はUIStackViewを使用すると良いみたいなので、今回はUIStackViewをStoryboardを使わずにコードのみで実装する方法をまとめます。
イメージとしては、UIStackViewが親となりその中に均等に並べたい部品を子として配置するといった感じです。
(CSSのFlexBoxに近いかも)
\\ Swiftで必読の書籍はコレ! //

UIStackView作成
まずは親となるUIStackViewを作成し、最低限必要なプロパティを設定します。
.axis
部品を並べる方向を指定します。
.horizontal | 水平方向に並べる |
.vertical | 垂直方向に並べる |
.alignment
.axisで指定していない方向の部品の位置(余白の使い方)を指定します。
この値は、.axisで指定した値によって取りうる値が以下の通り変わります。
.horizontalを指定した場合
fill | 縦幅いっぱいに広げる |
top | 上に寄せる |
center | 中央に寄せる |
bottom | 下に寄せる |
.verticalを指定した場合
leading | 左に寄せる |
center | 中央に寄せる |
trailing | 右に寄せる |
fill | 横幅いっぱいに広げる |
.distribution
StackViewの余白部分をどのように部品のサイズ調節を行なって埋めるかを指定します。
Fill | StackViewいっぱいに広げる。 |
FillEqually | StackViewいっぱいに広げる。(各部品の幅を均等に) |
FillProportionally | StackViewいっぱいに広げる。(各部品の比率を保つ) |
EqualSpacing | 等間隔に余白を空けて配置。 |
EqualCentering | 等間隔に余白を空けて配置。(各部品の中心と中心の位置の間隔) |
実際に設定しシミュレータで確認するとすぐに分かると思います。
.spacing
各部品の間の間隔を指定します。
部品を作成
UIStackViewに入れる部品を作成します。
今回はボタンを例にしますが、基本どんな部品(UIView)でも問題ないです。
UIStackViewを表示したいViewに追加
最後に作成したUIStackViewを表示したいViewに追加したら完了です!
こちらは、通常の『addSubview』なのでご注意を!!
これで完成です!!
UIStackViewはかなり使い勝手が良いのでぜひ使ってみてください。
\\ Swiftで必読の書籍はコレ! //

-
【入門】SwiftでIOSアプリ開発を始めたい時におすすめのサイトまとめ!【iPhoneアプリ】
実は先日からIOSアプリ開発をしたいなと思い、Swiftの勉強をはじめました。 そこで初めに思ったことが、 超基本の文法や入門知識について他の言語よりも、 自分で調べてネット上の優良な情 ...
続きを見る