Upgrade "App Design and Layout"

Author: WillieWangWei

App-Design-and-Layout/AppDelegate.swift

@@ -10,8 +10,6 @@ import UIKit
 @UIApplicationMain
 class AppDelegate: UIResponder, UIApplicationDelegate {
 
-
-
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
         // Override point for customization after application launch.
         return true
@@ -22,7 +20,6 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     }
 
     // MARK: UISceneSession Lifecycle
-
     func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
         // Called when a new scene session is being created.
         // Use this method to select a configuration to create the new scene with.
@@ -35,6 +32,4 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
         // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
     }
 
-
 }
-

App-Design-and-Layout/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -36,13 +36,15 @@
       "scale" : "3x"
     },
     {
-      "idiom" : "iphone",
       "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "landmark_app_icon_120x120-1.png",
       "scale" : "2x"
     },
     {
-      "idiom" : "iphone",
       "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "landmark_app_icon_180x180.png",
       "scale" : "3x"
     },
     {

App-Design-and-Layout/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_120x120-1.png

@@ -18,10 +18,10 @@ struct CategoryRow: View {
                 .padding(.leading, 15)
                 .padding(.top, 5)
 
-            ScrollView(showsHorizontalIndicator: false) {
+            ScrollView(.horizontal, showsIndicators: false) {
                 HStack(alignment: .top, spacing: 0) {
                     ForEach(self.items) { landmark in
-                        NavigationButton(
+                        NavigationLink(
                             destination: LandmarkDetail(
                                 landmark: landmark
                             )
@@ -30,8 +30,8 @@ struct CategoryRow: View {
                         }
                     }
                 }
-                }
-                .frame(height: 185)
+            }
+            .frame(height: 185)
         }
     }
 }
@@ -40,25 +40,25 @@ struct CategoryItem: View {
     var landmark: Landmark
     var body: some View {
         VStack(alignment: .leading) {
-            landmark
-                .image(forSize: 155)
+            landmark.image
                 .renderingMode(.original)
+                .resizable()
+                .frame(width: 155, height: 155)
                 .cornerRadius(5)
             Text(landmark.name)
-                .color(.primary)
+                .foregroundColor(.primary)
                 .font(.caption)
-            }
-            .padding(.leading, 15)
+        }
+        .padding(.leading, 15)
     }
 }
 
-#if DEBUG
 struct CategoryRow_Previews: PreviewProvider {
     static var previews: some View {
         CategoryRow(
             categoryName: landmarkData[0].category.rawValue,
             items: Array(landmarkData.prefix(4))
         )
+        .environmentObject(UserData())
     }
 }
-#endif

App-Design-and-Layout/Assets.xcassets/AppIcon.appiconset/landmark_app_icon_180x180.png

@@ -22,10 +22,8 @@ struct HikeBadge: View {
     }
 }
 
-#if DEBUG
-struct HikeBadge_Previews : PreviewProvider {
+struct HikeBadge_Previews: PreviewProvider {
     static var previews: some View {
         HikeBadge(name: "Preview Testing")
     }
 }
-#endif

App-Design-and-Layout/CategoryRow.swift

@@ -23,13 +23,13 @@ struct HikeDetail: View {
                 .frame(height: 200, alignment: .center)
 
             HStack(spacing: 25) {
-                ForEach(buttons.identified(by: \.0)) { value in
+                ForEach(buttons, id: \.0) { value in
                     Button(action: {
                         self.dataToShow = value.1
                     }) {
                         Text(verbatim: value.0)
                             .font(.system(size: 15))
-                            .color(value.1 == self.dataToShow
+                            .foregroundColor(value.1 == self.dataToShow
                                 ? Color.gray
                                 : Color.accentColor)
                             .animation(nil)
@@ -40,10 +40,8 @@ struct HikeDetail: View {
     }
 }
 
-#if DEBUG
 struct HikeDetail_Previews: PreviewProvider {
     static var previews: some View {
         HikeDetail(hike: hikeData[0])
     }
 }
-#endif

App-Design-and-Layout/ContentView.swift

@@ -14,7 +14,7 @@ struct HikeView: View {
     var transition: AnyTransition {
         let insertion = AnyTransition.move(edge: .trailing)
             .combined(with: .opacity)
-        let removal = AnyTransition.scale()
+        let removal = AnyTransition.scale
             .combined(with: .opacity)
         return .asymmetric(insertion: insertion, removal: removal)
     }
@@ -36,7 +36,7 @@ struct HikeView: View {
 
                 Button(action: {
                     withAnimation {
-                    	self.showDetail.toggle()
+                        self.showDetail.toggle()
                     }
                 }) {
                     Image(systemName: "chevron.right.circle")
@@ -49,13 +49,12 @@ struct HikeView: View {
 
             if showDetail {
                 HikeDetail(hike: hike)
-                	.transition(transition)
+                    .transition(transition)
             }
         }
     }
 }
 
-#if DEBUG
 struct HikeView_Previews: PreviewProvider {
     static var previews: some View {
         VStack {
@@ -65,4 +64,3 @@ struct HikeView_Previews: PreviewProvider {
         }
     }
 }
-#endif

App-Design-and-Layout/HikeBadge.swift

@@ -9,7 +9,7 @@ import SwiftUI
 
 struct CategoryHome: View {
     var categories: [String: [Landmark]] {
-        .init(
+        Dictionary(
             grouping: landmarkData,
             by: { $0.category.rawValue }
         )
@@ -19,6 +19,18 @@ struct CategoryHome: View {
         landmarkData.filter { $0.isFeatured }
     }
 
+    @State var showingProfile = false
+    @EnvironmentObject var userData: UserData
+    
+    var profileButton: some View {
+        Button(action: { self.showingProfile.toggle() }) {
+            Image(systemName: "person.crop.circle")
+                .imageScale(.large)
+                .accessibility(label: Text("User Profile"))
+                .padding()
+        }
+    }
+
     var body: some View {
         NavigationView {
             List {
@@ -28,39 +40,35 @@ struct CategoryHome: View {
                     .clipped()
                     .listRowInsets(EdgeInsets())
 
-                ForEach(categories.keys.sorted().identified(by: \.self)) { key in
+                ForEach(categories.keys.sorted(), id: \.self) { key in
                     CategoryRow(categoryName: key, items: self.categories[key]!)
-                    }
-                    .listRowInsets(EdgeInsets())
+                }
+                .listRowInsets(EdgeInsets())
 
-                NavigationButton(destination: LandmarkList()) {
+                NavigationLink(destination: LandmarkList()) {
                     Text("See All")
                 }
-                }
-                .navigationBarTitle(Text("Featured"))
-                .navigationBarItems(trailing:
-                    PresentationButton(destination: Text("User Profile")) {
-                        Image(systemName: "person.crop.circle")
-                            .imageScale(.large)
-                            .accessibility(label: Text("User Profile"))
-                            .padding()
-                    }
-            )
+            }
+            .navigationBarTitle(Text("Featured"))
+            .navigationBarItems(trailing: profileButton)
+            .sheet(isPresented: $showingProfile) {
+                ProfileHost()
+                    .environmentObject(self.userData)
+            }
         }
     }
 }
 
 struct FeaturedLandmarks: View {
     var landmarks: [Landmark]
     var body: some View {
-        landmarks[0].image(forSize: 250).resizable()
+        landmarks[0].image.resizable()
     }
 }
 
-#if DEBUG
 struct CategoryHome_Previews: PreviewProvider {
     static var previews: some View {
         CategoryHome()
+            .environmentObject(UserData())
     }
 }
-#endif

App-Design-and-Layout/HikeDetail.swift

@@ -21,7 +21,7 @@ struct LandmarkDetail: View {
                 .edgesIgnoringSafeArea(.top)
                 .frame(height: 300)
 
-            CircleImage(image: landmark.image(forSize: 250))
+            CircleImage(image: landmark.image)
                 .offset(x: 0, y: -130)
                 .padding(.bottom, -130)
 
@@ -60,12 +60,10 @@ struct LandmarkDetail: View {
     }
 }
 
-#if DEBUG
 struct LandmarkDetail_Preview: PreviewProvider {
     static var previews: some View {
         let userData = UserData()
         return LandmarkDetail(landmark: userData.landmarks[0])
             .environmentObject(userData)
     }
 }
-#endif

App-Design-and-Layout/HikeView.swift

@@ -8,33 +8,38 @@ A view showing a list of landmarks.
 import SwiftUI
 
 struct LandmarkList: View {
-    @EnvironmentObject var userData: UserData
+    @EnvironmentObject private var userData: UserData
 
     var body: some View {
-        
         List {
             Toggle(isOn: $userData.showFavoritesOnly) {
-                Text("Favorites only")
+                Text("Show Favorites Only")
             }
 
             ForEach(userData.landmarks) { landmark in
                 if !self.userData.showFavoritesOnly || landmark.isFavorite {
-                    NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
+                    NavigationLink(
+                        destination: LandmarkDetail(landmark: landmark)
+                            .environmentObject(self.userData)
+                    ) {
                         LandmarkRow(landmark: landmark)
                     }
                 }
             }
-            }
-            .navigationBarTitle(Text("Landmarks"))
-        
+        }
+        .navigationBarTitle(Text("Landmarks"))
     }
 }
 
-struct LandmarkList_Previews: PreviewProvider {
+struct LandmarksList_Previews: PreviewProvider {
     static var previews: some View {
-        NavigationView {
-            LandmarkList()
-                .environmentObject(UserData())
+        ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
+            NavigationView {
+                LandmarkList()
+            }
+            .previewDevice(PreviewDevice(rawValue: deviceName))
+            .previewDisplayName(deviceName)
         }
+        .environmentObject(UserData())
     }
 }

App-Design-and-Layout/Home.swift

@@ -1,9 +1,9 @@
-/*
-See LICENSE folder for this sample’s licensing information.
-
-Abstract:
-A single row to be displayed in a list of landmarks.
-*/
+//
+//  LandmarkRow.swift
+//  App-Design-and-Layout
+//
+//  Created by 王炜 on 2019/10/12.
+//
 
 import SwiftUI
 
@@ -12,7 +12,9 @@ struct LandmarkRow: View {
 
     var body: some View {
         HStack {
-            landmark.image(forSize: 50)
+            landmark.image
+                .resizable()
+                .frame(width: 50, height: 50)
             Text(verbatim: landmark.name)
             Spacer()
 
@@ -25,7 +27,6 @@ struct LandmarkRow: View {
     }
 }
 
-#if DEBUG
 struct LandmarkRow_Previews: PreviewProvider {
     static var previews: some View {
         Group {
@@ -35,4 +36,3 @@ struct LandmarkRow_Previews: PreviewProvider {
         .previewLayout(.fixed(width: 300, height: 70))
     }
 }
-#endif