Swift プログラミング

【Swift】部品を均等に並べるUIStackViewをコードで実装する

更新日:

ボタンやラベルや画像を均等に並べたい時はUIStackViewを使用すると良いみたいなので、今回はUIStackViewをStoryboardを使わずにコードのみで実装する方法をまとめます。

 

イメージとしては、UIStackViewが親となりその中に均等に並べたい部品を子として配置するといった感じです。

(CSSのFlexBoxに近いかも)

 

\\  Swiftで必読の書籍はコレ! //

絶対に挫折しない iPhoneアプリ開発「超」入門 第6版 【Swift 4 & iOS 11】完全対応【電子書籍】[ 高橋 京介 ]
created by Rinker

 

 

 

 

UIStackView作成

まずは親となるUIStackViewを作成し、最低限必要なプロパティを設定します。

 

 

.axis

部品を並べる方向を指定します。

 

.horizontal水平方向に並べる
.vertical垂直方向に並べる

 

.alignment

.axisで指定していない方向の部品の位置(余白の使い方)を指定します。

この値は、.axisで指定した値によって取りうる値が以下の通り変わります。

 

.horizontalを指定した場合

fill縦幅いっぱいに広げる
top上に寄せる
center中央に寄せる
bottom下に寄せる

 

.verticalを指定した場合

leading左に寄せる
center中央に寄せる
trailing右に寄せる
fill横幅いっぱいに広げる

 

.distribution

StackViewの余白部分をどのように部品のサイズ調節を行なって埋めるかを指定します。

 

FillStackViewいっぱいに広げる。
FillEquallyStackViewいっぱいに広げる。(各部品の幅を均等に)
FillProportionallyStackViewいっぱいに広げる。(各部品の比率を保つ)
EqualSpacing等間隔に余白を空けて配置。
EqualCentering等間隔に余白を空けて配置。(各部品の中心と中心の位置の間隔)

 

実際に設定しシミュレータで確認するとすぐに分かると思います。

 

.spacing

各部品の間の間隔を指定します。

 

部品を作成

UIStackViewに入れる部品を作成します。

今回はボタンを例にしますが、基本どんな部品(UIView)でも問題ないです。

 

 

UIStackViewを表示したいViewに追加

最後に作成したUIStackViewを表示したいViewに追加したら完了です!

 

 

こちらは、通常の『addSubview』なのでご注意を!!

 

これで完成です!!

UIStackViewはかなり使い勝手が良いのでぜひ使ってみてください。

 

\\  Swiftで必読の書籍はコレ! //

絶対に挫折しない iPhoneアプリ開発「超」入門 第6版 【Swift 4 & iOS 11】完全対応【電子書籍】[ 高橋 京介 ]
created by Rinker

 

【入門】SwiftでIOSアプリ開発を始めたい時におすすめのサイトまとめ!【iPhoneアプリ】

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

続きを見る

 

よく読まれている記事

1

  現在5年目のエンジニアで26歳です。 今回は20代の現役エンジニアとして、自分も含め転職について考えている方に向けて20代エンジニア転職に完全特化したおすすめのサービスを3つ紹介していき ...

2

これからエンジニアになりたい、プログラミングを使えるようになりたいという方に向けて 山のようにあるプログラミングスクールの中から、特におすすめなスクールをタイプ別に逆引きで3つ紹介します。 &nbsp ...

3

みなさんはを使っていますでしょうか。   本記事を見ていただいているということは、   プログラミングの勉強でを使うことに興味がある、 もしくはこれから動画を購入したいけどどれを買 ...

-Swift, プログラミング
-, , , , ,

Copyright© クラインの備忘壺 , 2019 All Rights Reserved.