SwiftUI/日本語チュートリアル3

Tag: SwiftUI/日本語チュートリアル3

目次†

関連ページ†

参考情報†

• 【第3回】日本語版SwiftUIチュートリアル【ユーザ入力を扱う】 | HIRO LAB BLOG

第3回：ユーザ入力を扱う†

Step 1. お気に入り機能を実装する†

• LandmarkにisFavoriteを追加。

   var isFavorite: Bool

• LandmarkRow.swiftにUIを追加。

  struct LandmarkRow: View {
      var landmark: Landmark
      
      var body: some View {
          HStack{
              landmark.image
                  .resizable()
                  .frame(width: 50, height: 50)
              Text(landmark.name)
              Spacer()
              
              if landmark.isFavorite {
                             Image(systemName: "star.fill")
                              .imageScale(.medium)
                              .foregroundColor(.yellow)
              }
          }
      }
  

Step 2. リストのフィルタリング†

• お気に入りだけを静的に表示する。

  struct LandmarkList: View {
      var showFavoritesOnly: Bool = true
      
      var body: some View {
          NavigationView{
              List(landmarkData) { landmark in
                  if !self.showFavoritesOnly || landmark.isFavorite{
                      NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                          LandmarkRow(landmark: landmark)
                      }
                  }
              }
              .navigationBarTitle(Text("Landmarks"))
          }
      }
  }
  

• ForEachを入れるときれいになるらしい。

  struct LandmarkList: View {
      var showFavoritesOnly: Bool = true
      
      var body: some View {
          NavigationView{
              List {
                  ForEach(landmarkData) { landmark in
                      if !self.showFavoritesOnly || landmark.isFavorite {
                          NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                              LandmarkRow(landmark: landmark)
                          }
                      }
                  }
              }
              .navigationBarTitle(Text("Landmarks"))
          }
      }
  }
  

Step 3. フィルタリングの切替†

• showFavoritesOnlyに@Stateを付与。さらにトグルを追加。$showFavoritesOnlyに注意。

  struct LandmarkList: View {
      @State var showFavoritesOnly: Bool = true
      
      var body: some View {
          NavigationView{
              List {
                  Toggle(isOn: $showFavoritesOnly) {
                      Text("Favorites only")
                  }
                  
                  ForEach(landmarkData) { landmark in
                      if !self.showFavoritesOnly || landmark.isFavorite {
                          NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                              LandmarkRow(landmark: landmark)
                          }
                      }
                  }
              }
              .navigationBarTitle(Text("Landmarks"))
          }
      }
  }
  

Step 4. 監視可能オブジェクトの定義†

• 監視可能オブジェクトを導入する。
• ModelsディレクトリにUserData.swiftを作成する。

  import SwiftUI
  import Combine
   
  final class UserData: ObservableObject  {
      @Published var showFavoritesOnly = false
      @Published var landmarks = landmarkData
  }
  

Step 5. 監視可能オブジェクトをビューに適応させる†

• 環境オブジェクトを追加していく。
• LandmarkList.swift

  struct LandmarkList: View {
  //    @State var showFavoritesOnly: Bool = true
      @EnvironmentObject var userData: UserData
      
      var body: some View {
          NavigationView{
              List {
                  Toggle(isOn: $userData.showFavoritesOnly) {
                      Text("Favorites only")
                  }
                  
                  ForEach(userData.landmarks) { landmark in
                      if !self.userData.showFavoritesOnly || landmark.isFavorite {
                          NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                              LandmarkRow(landmark: landmark)
                          }
                      }
                  }
              }
              .navigationBarTitle(Text("Landmarks"))
          }
      }
  }
  
  
  struct LandmarkList_Previews: PreviewProvider {
      static var previews: some View {
          ForEach(["iPhone X"], id: \.self) { deviceName in
              LandmarkList()
                  .previewDevice(PreviewDevice(rawValue: deviceName))
                  .previewDisplayName(deviceName)
                  .environmentObject(UserData())
          }
      }
  }
  

• LandmarksApp.swiftの修正。

  @main
  struct LandmarksApp: App {
      var body: some Scene {
          WindowGroup {
              LandmarkList().environmentObject(UserData())
          }
      }
  }
  

• LandmarkDetail.swiftの修正。

  struct LandmarkDetail: View {
      @EnvironmentObject var userData: UserData
      var landmark: Landmark
      
      var body: some View {
          VStack {
              MapView(coordinate: landmark.locationCoordinate)
                  .edgesIgnoringSafeArea(.top)
                  .frame(height: 300)
              
              CircleImage(image: landmark.image)
                  .offset(y: -130)
                  .padding(.bottom, -130)
              
              VStack(alignment: .leading) {
                  Text(landmark.name)
                      .font(.title)
                  HStack {
                      Text(landmark.park)
                          .font(.subheadline)
                      
                      Spacer()
                      
                      Text(landmark.state)
                          .font(.subheadline)
                  }
              }
              .padding()
              
              Spacer()
          }
      }
  }
   
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
          LandmarkDetail(landmark: landmarkData[0]).environmentObject(UserData())
      }
  }
  
  

Step 6. お気に入りボタンの追加・削除†

• 詳細ビューからもお気に入りの追加と削除ができるようにする。
• LandMarkDetailにインデックスを計算できるメソッドを追加。

      var landmarkIndex: Int {
          userData.landmarks.firstIndex(where: { $0.id == landmark.id })!
      }
  

      var body: some View {
          VStack {
              MapView(coordinate: landmark.locationCoordinate)
                  .edgesIgnoringSafeArea(.top)
                  .frame(height: 300)
              
              CircleImage(image: landmark.image)
                  .offset(y: -130)
                  .padding(.bottom, -130)
              
              VStack(alignment: .leading) {
                  HStack {
                      Text(landmark.name)
                          .font(.title)
                      
                      Button(action: {
                          // isFavoriteを切り替える
                          self.userData.landmarks[self.landmarkIndex].isFavorite.toggle()
                      }) {
                          // もしお気に入りならば
                          if self.userData.landmarks[self.landmarkIndex].isFavorite {
                              // 塗り潰しされたスター
                              Image(systemName: "star.fill")
                                  .foregroundColor(Color.yellow)
                          } else {
                              // そうでなければ白抜きスター
                              Image(systemName: "star")
                                  .foregroundColor(Color.gray)
                          }
                      }
                  }
                  HStack {
                      Text(landmark.park)
                          .font(.subheadline)
                      
                      Spacer()
                      
                      Text(landmark.state)
                          .font(.subheadline)
                  }
              }
              .padding()
              
              Spacer()
              
          }
      }
  

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件