XCode 12.4 日本語化計画：Swift Tutorials

セクション 1

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




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














ステップ 1

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
























ステップ 2

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




---




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











ステップ 3

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




---




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

























ステップ 4

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










ステップ 5

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




---




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




注意




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














ステップ 6

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


















































ステップ 7

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




---




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


































ステップ 8

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




---




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










































ステップ 9

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











ステップ 10

ライブプレビューに切り替え、プロファイルボタンをタップしてプロファイルの概要を確認してみてください。

    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. }

    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

    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

    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

    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

    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

    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

    CategoryHome.swift

1. import SwiftUI
3. struct CategoryHome: View {
4. @EnvironmentObject var modelData: ModelData
@State private var showingProfile = false
6. var body: some View {
7. NavigationView {
8. List {
9. modelData.features[0].image
10. .resizable()
11. .scaledToFill()
12. .frame(height: 200)
13. .clipped()
14. .listRowInsets(EdgeInsets())
16. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
17. CategoryRow(categoryName: key, items: modelData.categories[key]!)
18. }
19. .listRowInsets(EdgeInsets())
20. }
21. .navigationTitle("Featured")
.toolbar {
Button(action: { showingProfile.toggle() }) {
Image(systemName: "person.crop.circle")
.accessibilityLabel("User Profile")
}
}
.sheet(isPresented: $showingProfile) {
ProfileHost()
.environmentObject(modelData)
}
22. }
23. }
24. }
26. struct CategoryHome_Previews: PreviewProvider {
27. static var previews: some View {
28. CategoryHome()
29. .environmentObject(ModelData())
30. }
31. }

プレビュー その 7

    CategoryHome.swift

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

プレビュー その 8