ふくしまこんにちは！株式会社メモリアインクのふくしまです！
この記事では、複雑なレイアウトを簡単かつ効率的に実装することができるUIStackViewの基本的な使い方から応用テクニックまで、詳細なサンプルコードとともに解説します。
この記事を読んで分かること…
・UIStackViewについての基礎知識
・UIStackViewがもつプロパティについて
・UIStackViewの使い方
UIStackViewとは
UIStackView（ユーザーインターフェース スタックビュー）は、複数のビューを線形（水平または垂直）に並べることができるコンテナビューです。自動的にレイアウトを管理し、複雑なUIを簡単に実現できます。
UIStackViewがもつプロパティについて
概要
UIStackViewのプロパティを使用すると、子ビューの配置、サイズ調整、スペーシングなどを簡単に制御できます。ここでは、主要なプロパティとそれが提供する機能について詳しく説明します。
axis
機能：スタックビューの子ビューを水平(.horizontal)方向に並べるか、垂直(.vertical)方向に並べるかを指定します。
用途：レイアウトの基本方向を決定します。
distribution
機能：スタックビュー内のビューがどのように分布されるかを定義します。オプションには.fill、.fillEqually、.fillProportionally、.equalSpacing、.equalCenteringがあります。
用途：子ビューのサイズや間隔の調整に使用します。
alignment
機能：スタックビューの軸に対して、子ビューがどのように整列されるかを指定します。オプションには.fill、.leading、.top、.firstBaseline、.center、.trailing、.bottom、.lastBaselineがあります。
用途：子ビューの垂直方向または水平方向の位置を制御します。
spacing
機能：スタックビュー内の子ビュー間のスペーシング（間隔）をピクセルで指定します。
用途：子ビュー間の距離を調整します。
isBaselineRelativeArrangement
機能：ベースラインに基づいてビューを配置するかどうかを指定します。
用途：テキストコンテンツを含むビューを適切に整列させるために使用します。
isLayoutMarginsRelativeArrangement
機能：スタックビューがそのレイアウトマージンをレイアウト計算に含めるかどうかを指定します。
用途：スタックビューの周りにマージンを追加するときに使用します。
arrangedSubviews
機能: スタックビューに追加されたビューの配列を取得します。
用途: スタックビュー内のビューを管理するために使用します。
UIStackViewの使い方
概要
UIStackViewの使い方をユ、ーザーのプロフィール画面を想定し、プロフィール写真といくつかの情報（名前、職業、自己紹介文）を表示するUIを構築する方法をサンプルコードを示しつつ解説します。
サンプルコード
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
setupProfileUI()
}
func setupProfileUI() {
// プロフィール画像の設定
let profileImageView = UIImageView(image: UIImage(systemName: "person.crop.circle"))
profileImageView.contentMode = .scaleAspectFit
profileImageView.layer.cornerRadius = 50
profileImageView.clipsToBounds = true
// ユーザー名ラベルの設定
let nameLabel = UILabel()
nameLabel.text = "山田 太郎"
nameLabel.font = UIFont.boldSystemFont(ofSize: 20)
// 職業ラベルの設定
let occupationLabel = UILabel()
occupationLabel.text = "iOS開発者"
// 自己紹介ラベルの設定
let bioLabel = UILabel()
bioLabel.text = "SwiftとUIStackViewが大好きです。"
bioLabel.numberOfLines = 0
// テキストの配置の設定
let textStackView = UIStackView(arrangedSubviews: [nameLabel, occupationLabel, bioLabel])
textStackView.axis = .vertical
textStackView.spacing = 8
textStackView.backgroundColor = .systemMint
// 画像とテキストの配置の設定
let mainStackView = UIStackView(arrangedSubviews: [profileImageView, textStackView])
mainStackView.axis = .horizontal
mainStackView.spacing = 20
mainStackView.alignment = .center
mainStackView.backgroundColor = .systemOrange
view.addSubview(mainStackView)
mainStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
mainStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
mainStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
profileImageView.heightAnchor.constraint(equalToConstant: 100),
profileImageView.widthAnchor.constraint(equalToConstant: 100)
])
}
}サンプルコードの説明
🔸10行目：プロフィール画面のUIの設定をするためのメソッドsetupProfileUI を定義
🔸11-29行目：プロフィール画像の設定、ユーザー名ラベル、職業ラベル、自己紹介ラベルの設定をします
🔸32-35行目：名前、職業、自己紹介文のラベルを含む垂直スタックビューtextStackViewを作成
・32行目：UIStackView(arrangedSubviews: [nameLabel, occupationLabel, bioLabel]) でUIStackView のコンテナに名前、職業、自己紹介文のラベルを配置しています
・33行目：textStackView.axis = .verticalコンテナ内のラベルが垂直方向に配置されるように設定
・34行目：textStackView.spacing = 8 コンテナ内のラベルの間隔を8ピクセルに設定
🔸38-42行目：画像と名前、職業、自己紹介文のラベルを含む水平スタックビューmainStackView を作成
・38行目：先ほど作成したtextStackView をネスト(入れ子)にしたmainStackView を作成表示確認
ふくしま今回、各々のスタックビューに色をつけています。
ネスト関係に注目しつつ、表示確認してみましょう〜
まとめ
いかがでしたか？
今回は、UIStackViewの機能と使い方について学びました。UIStackViewを活用することで、複雑なレイアウトも簡単かつ効率的に実装することができますのでどんどん使っていきましょう。
それではまた次回の記事でお会いしましょう。この記事が皆様の開発ライフの一助になれると幸いです！
ふくしまこの記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします！
コメント