XCode 12.4 日本語化計画：Swift Tutorials

アプリのデザインとレイアウト

UI コントロールを扱う

ランドマークアプリでは、ユーザは自分の個性を表現するためのプロファイルを作成できます。ユーザがプロフィールを変更できるようにするには、編集モードを追加して設定スクリーンをデザインします。

データ入力用のさまざまな一般的なユーザーインターフェースコントロールを使用して、ユーザが変更を保存するたびにランドマークモデルの型を更新します。

手順に従ってこのプロジェクトをビルドするか、完成したプロジェクトをダウンロードして自分で探索してください。

25min 予想される時間

プロジェクト ファイル

Xcode 12

セクション 101

ユーザープロファイルの表示




ランドマークアプリは、いくつかの構成の詳細と設定をローカルに保存します。ユーザが詳細を編集する前に、それらは編集コントロールのない概要ビューに表示されます。











ステップ 1

プロジェクトの Model グループに追加する Profile.swift という名前の新しい Swift ファイルでユーザプロファイルを定義することから始めます。





    Profile.swift



1. import Foundation
3. struct Profile {
4. var username: String
5. var prefersNotifications = true
6. var seasonalPhoto = Season.winter
7. var goalDate = Date()
9. static let `default` = Profile(username: "g_kumar")
11. enum Season: String, CaseIterable, Identifiable {
12. case spring = "🌷"
13. case summer = "🌞"
14. case autumn = "🍂"
15. case winter = "☃️"
17. var id: String { self.rawValue }
18. }
19. }





ステップ 2

次に、Views グループの下に Profiles という名前の新しいグループを作成し、保存されているプロファイルのユーザ名を表示するテキストビューを使用して、ProfileHost という名前のビューをそのグループに追加します。




---




ProfileHost ビューは、プロファイル情報の静的な、要約ビューと編集モードの両方をホストします。





    ProfileHost.swift



1. import SwiftUI
3. struct ProfileHost: View {
4. @State private var draftProfile = Profile.default
6. var body: some View {
7. Text("Profile for: \(draftProfile.username)")
8. }
9. }
11. struct ProfileHost_Previews: PreviewProvider {
12. static var previews: some View {
13. ProfileHost()
14. }
15. }




プレビュー その 1





ステップ 3

ProfileSummary という名前の Profiles グループに、Profile インスタンスを取得し、いくつかの基本的なユーザ情報を表示する別のビューを作成します。




---




親ビューである ProfileHost がこのビューの状態を管理するため、プロファイルの概要は、プロファイルへの結束ではなく、Profile 値を取ります。





    ProfileSummary.swift



1. import SwiftUI
3. struct ProfileSummary: View {
4. var profile: Profile
6. var body: some View {
7. ScrollView {
8. VStack(alignment: .leading, spacing: 10) {
9. Text(profile.username)
10. .bold()
11. .font(.title)
13. Text("Notifications: \(profile.prefersNotifications ? "On": "Off" )")
14. Text("Seasonal Photos:
    \(profile.seasonalPhoto.rawValue)")
15. Text("Goal Date: ") + Text(profile.goalDate, style: .date)
16. }
17. }
18. }
19. }
21. struct ProfileSummary_Previews: PreviewProvider {
22. static var previews: some View {
23. ProfileSummary(profile: Profile.default)
24. }
25. }




プレビュー その 2





ステップ 4

ProfileHost を更新して、新しい要約ビューを表示します。





    ProfileHost.swift



4. @State private var draftProfile = Profile.default
6. var body: some View {
VStack(alignment: .leading, spacing: 20) {
ProfileSummary(profile: draftProfile)
}
.padding()
7. }
8. }




プレビュー その 3





ステップ 5

Hikes フォルダに HikeBadge という名前の新しいビューを作成します。このビューは、ハイキングに関する説明テキストとともに、パスとシェイプの描画 からバッジを構成します。




---




バッジは単なるグラフィックであるため、HikeBadge 内のテキストと共に accessibilityLabel(_:) 修飾子を使用すると、他のユーザにとってバッジの意味が明確になります。




注意




バッジの描画ロジックは、バッジがレンダリングされるフレームのサイズに応じた結果を生成します。目的の外観を確保するには、300 x 300 ポイントのフレーム内にレンダリングします。最終的なグラフィックに必要なサイズを取得するには、レンダリングされた結果を拡大縮小して、比較的小さいフレームに配置します。





    HikeBadge.swift



1. import SwiftUI
3. struct HikeBadge: View {
4. var name: String
6. var body: some View {
7. VStack(alignment: .center) {
8. Badge()
9. .frame(width: 300, height: 300)
10. .scaleEffect(1.0 / 3.0)
11. .frame(width: 100, height: 100)
12. Text(name)
13. .font(.caption)
14. .accessibilityLabel("Badge for \(name).")
15. }
16. }
17. }
19. struct HikeBadge_Previews: PreviewProvider {
20. static var previews: some View {
21. HikeBadge(name: "Preview Testing")
22. }
23. }




プレビュー その 4





ステップ 6

ProfileSummary を更新し、さまざまな色合いと理由を追加してバッジを獲得します。





    ProfileSummary.swift



1. import SwiftUI
3. struct ProfileSummary: View {
4. var profile: Profile
6. var body: some View {
7. ScrollView {
8. VStack(alignment: .leading, spacing: 10) {
9. Text(profile.username)
10. .bold()
11. .font(.title)
13. Text("Notifications: \(profile.prefersNotifications ? "On": "Off" )")
14. Text("Seasonal Photos:
    \(profile.seasonalPhoto.rawValue)")
15. Text("Goal Date: ") + Text(profile.goalDate, style: .date)
Divider()
VStack(alignment: .leading) {
Text("Completed Badges")
.font(.headline)
ScrollView(.horizontal) {
HStack {
HikeBadge(name: "First Hike")
HikeBadge(name: "Earth Day")
.hueRotation(Angle(degrees: 90))
HikeBadge(name: "Tenth Hike")
.grayscale(0.5)
.hueRotation(Angle(degrees: 45))
}
.padding(.bottom)
}
}
16. }
17. }
18. }
19. }
21. struct ProfileSummary_Previews: PreviewProvider {
22. static var previews: some View {
23. ProfileSummary(profile: Profile.default)
24. }
25. }




プレビュー その 5





ステップ 7

ビューと移行のアニメーション の HikeView を含めて、プロファイルの概要を完成させます。




---




hike データを使用するには、モデルデータ環境オブジェクトも追加する必要があります。





    ProfileSummary.swift



1. import SwiftUI
3. struct ProfileSummary: View {
@EnvironmentObject var modelData: ModelData
4. var profile: Profile



---



34. }
35. }
Divider()
VStack(alignment: .leading) {
Text("Recent Hikes")
.font(.headline)
HikeView(hike: modelData.hikes[0])
}
36. }
37. }



---



51. static var previews: some View {
52. ProfileSummary(profile: Profile.default)
.environmentObject(ModelData())
53. }
54. }




プログラム全体 その 1




プレビュー その 6





ステップ 8

CategoryHome.swift で、toolbar 修飾子を使用してナビゲーションバーにユーザプロファイルボタンを追加し、ユーザがそれをタップしたときに ProfileHost ビューを表示します。




---




ナビゲーションバーにボタンを追加すると、インセットが戻るようになります。次のステップではこれを修正します。





    CategoryHome.swift



1. import SwiftUI
3. struct CategoryHome: View {
4. @EnvironmentObject var modelData: ModelData
@State private var showingProfile = false
6. var body: some View {




プログラム全体 その 2




プレビュー その 7





ステップ 9

listStyle 修飾子を追加して、 insets を削除するため InsetListStyle を適用します。





    CategoryHome.swift



20. .listRowInsets(EdgeInsets())
21. }
.listStyle(InsetListStyle())
22. .navigationTitle("Featured")
23. .toolbar {




プレビュー その 8








セクション 1	セクション 2
セクション 3	セクション 4
セクション 101	セクション 102
セクション 103	セクション 104