Tech / 2025.12.25
/
更新: 2025.12.25 / 3 分 / ...
完全に理解する Storyboard & UIKit (Day 6): UIStackViewを使った効率的なレイアウト設計
S7r1n9y
Engineer
完全に理解する Storyboard & UIKit
6 / 30 移動 完全に理解する Storyboard & UIKit (Day 5): Auto Layoutの複雑な制約の解決
移動 完全に理解する Storyboard & UIKit (Day 7): Size Classesによるレスポンシブデザイン
このシリーズの記事一覧
- 1. 完全に理解する Storyboard & UIKit (Day 1): 基礎概念と歴史
- 2. 完全に理解する Storyboard & UIKit (Day 2): XcodeでのStoryboardの基本操作
- 3. 完全に理解する Storyboard & UIKit (Day 3): UIViewControllerのライフサイクル
- 4. 完全に理解する Storyboard & UIKit (Day 4): Auto Layoutの基本原理
- 5. 完全に理解する Storyboard & UIKit (Day 5): Auto Layoutの複雑な制約の解決
- 6. 完全に理解する Storyboard & UIKit (Day 6): UIStackViewを使った効率的なレイアウト設計
- 7. 完全に理解する Storyboard & UIKit (Day 7): Size Classesによるレスポンシブデザイン
- 8. 完全に理解する Storyboard & UIKit (Day 8): Segueによる画面遷移とデータ渡し
- 9. 完全に理解する Storyboard & UIKit (Day 9): Navigation Controllerの活用
- 10. 完全に理解する Storyboard & UIKit (Day 10): Tab Bar Controllerの活用
- 11. 完全に理解する Storyboard & UIKit (Day 11): 基本的なUI部品（UILabel, UIButton, UITextField）
- 12. 完全に理解する Storyboard & UIKit (Day 12): UITextViewとキーボードハンドリング
- 13. 完全に理解する Storyboard & UIKit (Day 13): UIImageViewと画像リソース管理
- 14. 完全に理解する Storyboard & UIKit (Day 14): UIScrollViewとコンテンツのスクロール
- 15. 完全に理解する Storyboard & UIKit (Day 15): UITableViewの実装基礎
- 16. 完全に理解する Storyboard & UIKit (Day 16): UITableViewのカスタムセル作成
- 17. 完全に理解する Storyboard & UIKit (Day 17): UICollectionViewの実装基礎
- 18. 完全に理解する Storyboard & UIKit (Day 18): UICollectionViewのカスタムレイアウト
- 19. 完全に理解する Storyboard & UIKit (Day 19): Custom Viewの作成とStoryboardでの利用(@IBDesignable, @IBInspectable)
- 20. 完全に理解する Storyboard & UIKit (Day 20): アニメーションの実装（UIView Animation）
- 21. 完全に理解する Storyboard & UIKit (Day 21): Gesture Recognizerによるタッチ処理
- 22. 完全に理解する Storyboard & UIKit (Day 22): UIAlertControllerによるアラートとアクションシート
- 23. 完全に理解する Storyboard & UIKit (Day 23): UIDatePickerやUIPickerViewの実装
- 24. 完全に理解する Storyboard & UIKit (Day 24): Storyboard Referenceを用いたStoryboard分割
- 25. 完全に理解する Storyboard & UIKit (Day 25): XIBとStoryboardの使い分け・併用
- 26. 完全に理解する Storyboard & UIKit (Day 26): UIAppearanceによるアプリ全体の色・スタイル管理
- 27. 完全に理解する Storyboard & UIKit (Day 27): ダークモード対応とアセットカタログ
- 28. 完全に理解する Storyboard & UIKit (Day 28): Accessibility（VoiceOver対応など）のUI設計
- 29. 完全に理解する Storyboard & UIKit (Day 29): UIKitからSwiftUIへの移行 / UIKitでのSwiftUI利用
- 30. 完全に理解する Storyboard & UIKit (Day 30): 実践：1つのアプリをStoryboardとUIKitで完成させる
Sponsored
完全に理解する Storyboard & UIKit (Day 6): UIStackViewを使った効率的なレイアウト設計
Day 4と5で学んだAuto Layoutは非常に強力ですが、3つ以上のボタンを均等に並べたり、条件によって一部のViewを消して隙間を詰めたりしようとすると、制約の数が膨大になり管理が複雑になります。
それを解決するためにiOS 9で登場したのが、今回学ぶ UIStackView です。
1. UIStackViewとは？
UIStackView は、複数のViewを「水平（Horizontal）」または「垂直（Vertical）」に並べるための特別なコンテナビューです。
最大の特徴は、「中に入れた子ビュー同士のAuto Layout制約をシステムが自動で計算・付与してくれる」 ことです。 これにより、開発者は「コンテナ自体の位置・サイズ」と「中身の並び方のルール（プロパティ）」を決めるだけで済むようになります。
2. Interface Builderでの使い方
ゼロから作る方法
- ライブラリパネル（
⇧⌘L）から Horizontal Stack View または Vertical Stack View をキャンバスに配置します。 - Stack View自体に、親ビューに対する制約（例えばTop, Leading, Trailing）をつけます。
- その中にボタンやラベルなどをドラッグ＆ドロップで入れていきます。
既存の要素をまとめる方法（おすすめ）
- キャンバス上で、並べたい複数の要素（例：画像とラベル）をShiftキーを押しながら複数選択します。
- 画面右下の Embed In（下向きの矢印がついた四角形アイコン） をクリックし、
Stack Viewを選びます。 - 自動的に要素がStack Viewで包まれるので、その後Stack View自体に制約をつけます。
3. UIStackViewの4大プロパティ
Stack Viewを選択し、Attributes Inspector (⌥⌘4) を開くと、レイアウトを決定する重要な4つのプロパティがあります。
① Axis (軸)
- Horizontal: 要素を横一列に並べます。
- Vertical: 要素を縦一列に並べます。
② Alignment (垂直方向・交差軸の揃え方)
並べる方向とは「垂直に交わる軸」上での要素の配置を決めます。（縦並びなら、横方向の揃え方）
- Fill: Stack Viewの幅（高さ）いっぱいに要素を引き伸ばします。
- Leading/Top: 左寄せ（縦並びなら上寄せ）。
- Center: 中央揃え。
- Trailing/Bottom: 右寄せ（縦並びなら下寄せ）。
③ Distribution (水平方向・主軸の揃え方)
並べる方向と同じ「主軸」上での、要素のサイズ割り当てを決めます。（縦並びなら、縦方向のサイズの決め方）
- Fill: デフォルト。余ったスペースを CHCR（Day 5参照）が最も低い要素に割り当てて引き伸ばします。
- Fill Equally: すべての要素を 全く同じサイズ にします。
- Fill Proportionally: 各要素の Intrinsic Content Size の 比率 を保ったまま引き伸ばします。
- Equal Spacing: 要素のサイズはそのままに、要素間の隙間（余白）を均等 に保ちます。
- Equal Centering: 各要素の 中心間の距離を均等 に保ちます。
④ Spacing (要素間の隙間)
- 要素と要素の間に何ポイントの隙間を空けるかを指定します（例:
8や16）。
4. なぜ UIStackView が最強なのか？（動的レイアウト）
UIStackViewの真の力は、コードによる動的な表示切り替え時に発揮されます。
例えば、「会員ログイン時のみ表示するバッジ」がStack Viewの中にあるとします。
コードでバッジを非表示（badgeView.isHidden = true）にすると、Stack Viewは自動的にそのバッジの存在を無視し、残りの要素の隙間をアニメーション付きで綺麗に詰めてくれます。
もしAuto Layoutの制約だけでこれを実現しようとすると、「バッジが消えたときはAとCを繋ぐ制約を有効にし、前後の制約を無効化する…」といった非常に泥臭いコードが必要になります。
📝 今日のまとめ
- UIStackView は、要素を縦・横に並べて自動で制約を適応してくれるコンテナ。
- 基本は「Axis (軸)」「Alignment (交差軸)」「Distribution (主軸)」「Spacing (隙間)」の4つで設定する。
- 中の要素を
isHidden = trueにするだけで、隙間を自動調整してくれるのが最大のメリット。 - 迷ったらまずはStack Viewに入れられないか考える のがモダンなUIKit開発の鉄則。
Stack Viewの登場により、レイアウト構築の速度と保守性が劇的に向上しました。 明日の Day 7 では、これまで学んだAuto Layoutの総仕上げとして、iPhoneとiPadで全く違うレイアウトを作る「Size Classes」について学びます！
END OF FILE
この記事は役に立ちましたか？
SNSでシェアする
後で読む（ブックマーク）
完全に理解する Storyboard & UIKit
6 / 30 移動 完全に理解する Storyboard & UIKit (Day 5): Auto Layoutの複雑な制約の解決
移動 完全に理解する Storyboard & UIKit (Day 7): Size Classesによるレスポンシブデザイン
このシリーズの記事一覧
- 1. 完全に理解する Storyboard & UIKit (Day 1): 基礎概念と歴史
- 2. 完全に理解する Storyboard & UIKit (Day 2): XcodeでのStoryboardの基本操作
- 3. 完全に理解する Storyboard & UIKit (Day 3): UIViewControllerのライフサイクル
- 4. 完全に理解する Storyboard & UIKit (Day 4): Auto Layoutの基本原理
- 5. 完全に理解する Storyboard & UIKit (Day 5): Auto Layoutの複雑な制約の解決
- 6. 完全に理解する Storyboard & UIKit (Day 6): UIStackViewを使った効率的なレイアウト設計
- 7. 完全に理解する Storyboard & UIKit (Day 7): Size Classesによるレスポンシブデザイン
- 8. 完全に理解する Storyboard & UIKit (Day 8): Segueによる画面遷移とデータ渡し
- 9. 完全に理解する Storyboard & UIKit (Day 9): Navigation Controllerの活用
- 10. 完全に理解する Storyboard & UIKit (Day 10): Tab Bar Controllerの活用
- 11. 完全に理解する Storyboard & UIKit (Day 11): 基本的なUI部品（UILabel, UIButton, UITextField）
- 12. 完全に理解する Storyboard & UIKit (Day 12): UITextViewとキーボードハンドリング
- 13. 完全に理解する Storyboard & UIKit (Day 13): UIImageViewと画像リソース管理
- 14. 完全に理解する Storyboard & UIKit (Day 14): UIScrollViewとコンテンツのスクロール
- 15. 完全に理解する Storyboard & UIKit (Day 15): UITableViewの実装基礎
- 16. 完全に理解する Storyboard & UIKit (Day 16): UITableViewのカスタムセル作成
- 17. 完全に理解する Storyboard & UIKit (Day 17): UICollectionViewの実装基礎
- 18. 完全に理解する Storyboard & UIKit (Day 18): UICollectionViewのカスタムレイアウト
- 19. 完全に理解する Storyboard & UIKit (Day 19): Custom Viewの作成とStoryboardでの利用(@IBDesignable, @IBInspectable)
- 20. 完全に理解する Storyboard & UIKit (Day 20): アニメーションの実装（UIView Animation）
- 21. 完全に理解する Storyboard & UIKit (Day 21): Gesture Recognizerによるタッチ処理
- 22. 完全に理解する Storyboard & UIKit (Day 22): UIAlertControllerによるアラートとアクションシート
- 23. 完全に理解する Storyboard & UIKit (Day 23): UIDatePickerやUIPickerViewの実装
- 24. 完全に理解する Storyboard & UIKit (Day 24): Storyboard Referenceを用いたStoryboard分割
- 25. 完全に理解する Storyboard & UIKit (Day 25): XIBとStoryboardの使い分け・併用
- 26. 完全に理解する Storyboard & UIKit (Day 26): UIAppearanceによるアプリ全体の色・スタイル管理
- 27. 完全に理解する Storyboard & UIKit (Day 27): ダークモード対応とアセットカタログ
- 28. 完全に理解する Storyboard & UIKit (Day 28): Accessibility（VoiceOver対応など）のUI設計
- 29. 完全に理解する Storyboard & UIKit (Day 29): UIKitからSwiftUIへの移行 / UIKitでのSwiftUI利用
- 30. 完全に理解する Storyboard & UIKit (Day 30): 実践：1つのアプリをStoryboardとUIKitで完成させる
Related Articles