前回の記事
iOS App Dev Tutorialsを読んでみた。その4
前回の記事を読んだ後に、この記事をご覧ください。
今回の範囲
Creating a navigation hierarchy
５回目はナビゲーション階層の作成をして、動作するようにします。
内容の要約
1.ナビゲーションを設定する。
- ScrumdingerApp.swiftで、NavigationViewの中にScrumsViewを埋め込みます。
ScrumdingerApp.swift
NavigationView {
ScrumsView(scrums: DailyScrum.sampleData)
}
- ScrumsView.swiftで、ScrumsViewのプレビューをNavigationViewに埋め込みます。
ScrumsView.swift
NavigationView {
ScrumsView(scrums: DailyScrum.sampleData)
}
- イニシャライザーでText(scrum.title)を目的地にして、NavigationLinkを追加する。
ScrumsView.swift
NavigationLink(destination: Text(scrum.title)) {
CardView(scrum: scrum)
.listRowBackground(scrum.theme.mainColor)
}
- メインカラーを適用する。
- ナビゲーションタイトルに "Daily Scrums "を追加します。
ScrumsView.swift
.navigationTitle("Daily Scrums")
- プラスアイコンを表示するツールバー項目「ボタン」を追加します。ボタンは、一時的に無機能にします。
ScrumsView.swift
.toolbar {
Button(action: {}) {
Image(systemName: "plus")
}
}
- プラスボタンの内容を説明するaccessibilityLabelを追加します。
ScrumsView.swift
.accessibilityLabel("New Scrum")
DetailView.swift という名前の新しい SwiftUI View ファイルを作成します。
2.詳細ビューを作成する。
- DetailView.swift という名前の新しい SwiftUI View ファイルを作成します。
- スクラム定数を追加します。
DetailView.swift
let scrum: DailyScrum
- スクラムデータでDetailViewを初期化します。
DetailView.swift
DetailView(scrum: DailyScrum.sampleData[0])
- DetailViewをNavigationViewに埋め込み、キャンバス上でナビゲーション要素をプレビューできるようにします。
DetailView.swift
NavigationView {
DetailView(scrum: DailyScrum.sampleData[0])
}
- ScrumsView.swiftで、NavigationLinkを更新し、DetailViewを新しい対象に設定します。
ScrumsView.swift
NavigationLink(destination: DetailView(scrum: scrum)) {
3.詳細ビューにビジュアルコンポーネントを追加する。
- DetailView.swiftで、テキストビューをListに置き換えて、会議の詳細を表示します。
DetailView.swift
List {
}
- ヘッダーが「会議情報」のセクションを追加します。
DetailView.swift
Section(header: Text("Meeting Info")) {
}
- テキスト「Start Meeting」とタイマーアイコンをのラベルを追加します。
DetailView.swift
Label("Start Meeting", systemImage: "timer")
- foregroundColorとfont修飾子を追加して、ラベルの外観を変更します。
DetailView.swift
.font(.headline)
.foregroundColor(.accentColor)
- HStackを作成し、会議の長さを表す時計のアイコンを追加します。
DetailView.swift
HStack {
Label("Length", systemImage: "clock")
}
- Spacerを追加し、テキストビューに時間の値を表示します。
DetailView.swift
Spacer()
Text("\(scrum.lengthInMinutes) minutes")
- HStackに「accessibilityElement(children:)」を追加し、ユーザーのためにLabel要素とText要素を結合します。
DetailView.swift
.accessibilityElement(children: .combine)
- HStackを作成して、スクラムカードのテーマであるペインパレットのアイコンを持つラベルを追加します。
DetailView.swift
HStack {
Label("Theme", systemImage: "paintpalette")
}
- Theme.swiftで、そのままの値を大文字にするnameプロパティを追加します。
Theme.swift
var name: String {
rawValue.capitalized
}
- DetailView.swifにSpacerを追加し、テキストビューでテーマ名を表示する。HStackに「accessibilityElement(children:)」を追加し、ボイスオーバーでラベル要素とテキスト要素を結合する。
DetailView.swift
Spacer()
Text(scrum.theme.name)
DetailView.swift
.accessibilityElement(children: .combine)
- パディング、前景色、背景色、コーナー半径を追加して、テキストビュー見やすくします。
DetailView.swift
.padding(4)
.foregroundColor(scrum.theme.accentColor)
.background(scrum.theme.mainColor)
.cornerRadius(4)
4.出席者を反復処理する。
- DailyScrum.swiftで、識別可能なAttendeeという内部構造の拡張子を作成する。
DailyScrum.swift
extension DailyScrum {
struct Attendee: Identifiable {
}
}
- 必要なidプロパティと名前の変数を追加します。
DailyScrum.swift
let id: UUID
var name: String
- idプロパティにデフォルト値を割り当てるイニシャライザを追加します。
DailyScrum.swift
init(id: UUID = UUID(), name: String) {
self.id = id
self.name = name
}
- attendees型を[Attendee]に変更して。出席者名の配列とAttendee型の値を対応させます。
DailyScrum.swift
var attendees: [Attendee]
DailyScrum.swift
self.attendees = attendees.map { Attendee(name: $0) }
```DetailView.swift
Section(header: Text("Attendees")) {
}
ForEachを追加して出席者のリストを生成し、データとしてscrum.attendeesを入れます。
DetailView.swift
ForEach(scrum.attendees) { attendee in
}
- 出席者名と人物アイコンを表示するラベルを追加します。
DetailView.swift
Label(attendee.name, systemImage: "person")
- 会議開始ラベルを、MeetingViewを目標に設定したNavigationLinkに組み込む。
DetailView.swift
NavigationLink(destination: MeetingView()) {
Label("Start Meeting", systemImage: "timer")
.font(.headline)
.foregroundColor(.accentColor)
}
- リストに.navigationTitle(scrum.title)を設定し、スクラムのタイトルを表示します。
DetailView.swift
.navigationTitle(scrum.title)
まとめ
今回はナビゲーション階層を作成し、ページ間の移動をできるようにしました。次回はビュー間のデータフローを管理する事について学びます。
次回iOS App Dev Tutorialsを読んで実際にやってみた。その6