Day05
SwiftUIの基本ビューと修飾子 – Text / Image / Button
最小構成で「見やすく・触って楽しい」画面を作る回。基本ビューとレイアウト、よく使う修飾子の型を身につけます。
Text / Image / Button
VStack / HStack / ZStack
padding / frame / font
VStack / HStack / ZStack
padding / frame / font
目次
今日のゴール
- Text / Image / Button を使って1画面を組み立てられる
- VStack / HStack / ZStack を状況で使い分けられる
padding/frame/fontなど基本の修飾子で見栄えを整えられる
基本ビュー：Text / Image / Button
Text の例
var body: some View {
Text("こんにちは SwiftUI")
.font(.title2.bold())
.foregroundColor(.indigo)
.lineSpacing(6)
.multilineTextAlignment(.leading)
}文字の大きさは .font、色は .foregroundColor。段落間隔なら .lineSpacing。
Image の例
Image("profile")
.resizable()
.scaledToFill()
.frame(width: 96, height: 96)
.clipShape(Circle())
.shadow(radius: 8)はみ出しを防ぐには .resizable() と .scaledToFill() をセットで。丸抜きは .clipShape(Circle())。
Button の例
Button {
print("tapped")
} label: {
Label("押してね", systemImage: "hand.tap")
}
.buttonStyle(.borderedProminent)
.tint(.blue)アイコン付きラベルは Label が便利。目立たせたい時は .borderedProminent と .tint。
レイアウト：VStack / HStack / ZStack
VStack（縦積み）
VStack(alignment: .leading, spacing: 12) {
Text("タイトル").font(.title2.bold())
Text("説明文").foregroundColor(.secondary)
Button("続ける") { }
}HStack（横並び）
HStack(spacing: 16) {
Image(systemName: "heart.fill")
Text("いいね！")
Spacer()
Button("押す") { }
}ZStack（重ねる）
ZStack {
Image("header").resizable().scaledToFill()
Text("タイトル")
.font(.largeTitle.bold())
.foregroundColor(.white)
.shadow(radius: 10)
}
修飾子でスタイルを整える
SwiftUIでは、各ビューに連鎖的に 修飾子（modifier） を付与して、見た目やレイアウトを調整します。代表的な修飾子を2つの観点で確認しましょう。
padding & frame
Text("余白とサイズ")
.padding(20)
.frame(width: 200, height: 60)
.background(Color.gray.opacity(0.2))
.cornerRadius(8)padding は余白、frame は幅や高さを指定。背景色と角丸でカード風に。
font & color
Text("カスタムフォント")
.font(.system(size: 24, weight: .bold, design: .rounded))
.foregroundColor(.purple)フォントサイズ・スタイル・デザインを細かく指定できます。foregroundColor で文字色も変更。
サンプル：プロフィール名刺
完成イメージ（SwiftUI）
struct ProfileCard: View {
var body: some View {
HStack(alignment: .center, spacing: 16) {
Image("profile")
.resizable().scaledToFill()
.frame(width: 72, height: 72)
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.shadow(radius: 6)
VStack(alignment: .leading, spacing: 6) {
Text("山田 太郎").font(.title3.bold())
Text("iOS Developer").foregroundColor(.secondary)
HStack(spacing: 12) {
Label("github.com/username", systemImage: "link")
.font(.footnote).foregroundColor(.blue)
}
}
Spacer()
Button { } label: {
Text("Follow")
}
.buttonStyle(.borderedProminent)
}
.padding(16)
.background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20, style: .continuous))
.padding(.horizontal)
}
}ポイント
- 画像は
.scaledToFill()＋角丸でカードに馴染ませる - テキスト階層（名前＝太字、肩書き＝セカンダリ）で情報の優先度を表現
- 右側に
Spacer()を入れてボタンを端に寄せる - 背景は
.thinMaterialで軽いガラス風に
今日の練習課題 & 解答
課題①：テキストの装飾
お題：「SwiftUIが楽しい！」というテキストを、タイトル風（大きく太字・青色）に表示してください。
解答例
Text("SwiftUIが楽しい！")
.font(.title.bold())
.foregroundColor(.blue)課題②：画像のアバター化
お題： 画像を直径 80 の円形アバターにし、淡い影を付けてください。
解答例
Image("icon")
.resizable()
.scaledToFill()
.frame(width: 80, height: 80)
.clipShape(Circle())
.shadow(radius: 4)課題③：横並びの情報行
お題： 左にアイコン、中央にテキスト、右端に「詳細」ボタンが並ぶ行を作ってください。
解答例
HStack(spacing: 12) {
Image(systemName: "bell.fill")
Text("お知らせがあります")
Spacer()
Button("詳細") { }
}課題④：修飾子の組み合わせ
お題： 灰色の角丸バッジ（テキスト中央揃え、左右余白 16）を作成してください。
解答例
Text("NEW")
.font(.footnote.bold())
.padding(.horizontal, 16)
.padding(.vertical, 6)
.background(Color.gray.opacity(0.2), in: Capsule())
チェックリスト
- Text / Image / Button を1画面に配置できた
- VStack / HStack / ZStack の違いを説明できる
padding/frame/fontの使いどころが分かった
© Day05 – SwiftUI Basics & Modifiers
コメント