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

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

目次†

関連ページ†

参考情報†

• 【第2回】日本語版SwiftUIチュートリアル【リストとナビゲーション】 | HIRO LAB BLOG

第2回：リストとナビゲーション ~動的なビュー生成~†

Step 1. モデルを作る†

• Modelsディレクトリを作成。
• そのなかにLandmark.swiftを作る。

  import SwiftUI
  
  struct Landmark: Hashable, Codable{
      var id: Int
      var name: String
      fileprivate var imageName: String
      fileprivate var coordinates: Coordinates
      var state: String
      var park: String
      var category: Category
      
      var locationCoordinate: CLLocationCoordinate2D {
           CLLocationCoordinate2D(
               latitude: coordinates.latitude,
               longitude: coordinates.longitude)
       }
      
      enum Category: String, CaseIterable, Hashable, Codable{{
          case featured = "Featured"
          case lakes = "Lakes"
          case rivers = "Rivers"
          case mountains= "Mountains"
      }
  }
   
  extension Landmark {
      var image: Image {
          ImageStore.shared.image(name: imageName)
      }
  }
  
  struct Coordinates: Hashable, Codable {
      var latitude: Double
      var longitude: Double
  }
  
  

Step 2. データ処理部†

• ModelsディレクトリにData.swiftを作成。内容は以下。

  import UIKit
  import SwiftUI
  import CoreLocation
   
  let landmarkData: [Landmark] = load("landmarkData.json")
   
  func load<T: Decodable>(_ filename: String) -> T {
      let data: Data
      
      guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
          else {
              fatalError("Couldn't find \(filename) in main bundle.")
      }
      
      do {
          data = try Data(contentsOf: file)
      } catch {
          fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
      }
      
      do {
          let decoder = JSONDecoder()
          return try decoder.decode(T.self, from: data)
      } catch {
          fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
      }
  }
   
  final class ImageStore {
      typealias _ImageDictionary = [String: CGImage]
      fileprivate var images: _ImageDictionary = [:]
   
      fileprivate static var scale = 2
      
      static var shared = ImageStore()
      
      func image(name: String) -> Image {
          let index = _guaranteeImage(name: name)
          
          return Image(images.values[index], scale: CGFloat(ImageStore.scale), label: Text(name))
      }
   
      static func loadImage(name: String) -> CGImage {
          guard
              let url = Bundle.main.url(forResource: name, withExtension: "jpg"),
              let imageSource = CGImageSourceCreateWithURL(url as NSURL, nil),
              let image = CGImageSourceCreateImageAtIndex(imageSource, 0, nil)
          else {
              fatalError("Couldn't load image \(name).jpg from main bundle.")
          }
          return image
      }
      
      fileprivate func _guaranteeImage(name: String) -> _ImageDictionary.Index {
          if let index = images.index(forKey: name) { return index }
          
          images[name] = ImageStore.loadImage(name: name)
          return images.index(forKey: name)!
      }
  }
  

• 要はjsonからLandmarkオブジェクトを作成するたに使われている。

Step 3. リストビューを作る前に構成要素を作る†

• ContentView.swiftをLandmarkDetail.swiftに変更。リファクタリング機能を使う。
• LandmarkRowを作成。

  import SwiftUI
   
  struct LandmarkRow: View {
      var landmark: Landmark
      
      var body: some View {
          Text(landmark.name)
      }
  }
   
  struct LandmarkRow_Previews: PreviewProvider {
      static var previews: some View {
          LandmarkRow(landmark: landmarkData[0])
      }
  }
  

• デザインを整える。これでリストに表示可能な見た目となる。

  struct LandmarkRow: View {
      var landmark: Landmark
      
      var body: some View {
          HStack{
              landmark.image
                  .resizable()
                  .frame(width: 50, height: 50)
              Text(landmark.name)
              Spacer()
          }
      }
  }
  

Step 4. 複数のデータを使ったプレビュー表示†

• プレビューの改善。

  struct LandmarkRow_Previews: PreviewProvider {
      static var previews: some View {
          Group {
              LandmarkRow(landmark: landmarkData[0])
              LandmarkRow(landmark: landmarkData[1])
              LandmarkRow(landmark: landmarkData[2])
          }
          .previewLayout(.fixed(width: 300, height: 70))
      }
  }
  

Step 5. 観光地データをリストとして積み上げる†

• LandmarkList.swiftを作成。
• 以下で2個のデータが表示される。

  import SwiftUI
   
  struct LandmarkList: View {
      var body: some View {
          List {
              LandmarkRow(landmark: landmarkData[0])
              LandmarkRow(landmark: landmarkData[1])
          }
      }
  }
   
  struct LandmarkList_Previews: PreviewProvider {
      static var previews: some View {
          LandmarkList()
      }
  }
  
  

• 動的データを表示する。

  struct LandmarkList: View {
      var body: some View {
          List(landmarkData) { landmark in
              LandmarkRow(landmark: landmark)
          }
      }
  }
  

• これを可能とするためLandmarkにIdentifiableを付与。

  struct Landmark: Hashable, Codable, Identifiable{

• これでリストが表示される。
• 初期化のところで使われているのはクロージャ構文。

Step 6. リスト<=>詳細ビューのナビゲーション†

• LandmarkList.swiftとLandmarkDetail.swiftをつなげる
• LandmarkListナビゲーションビューとしタイトルをつける。

  struct LandmarkList: View {
      var body: some View {
          NavigationView{
              List(landmarkData) { landmark in
                  LandmarkRow(landmark: landmark)
              }.navigationBarTitle(Text("Landmarks"))
          }
      }
  }
  

• 詳細ビューが表示できるようにする。

  struct LandmarkList: View {
      var body: some View {
          NavigationView{
              List(landmarkData) { landmark in
                  NavigationLink(destination: LandmarkDetail()) {
                      LandmarkRow(landmark: landmark)
                  }
              }.navigationBarTitle(Text("Landmarks"))
          }
      }
  }
  

• ただしまだ詳細ビューはTurtle Rockのまま。

Step 7. 各要素を動的なビューにしていく†

• CircleImage.swiftを動的にする。

  struct CircleImage: View {
      var image: Image
      
      var body: some View {
          image
              .clipShape(Circle())
              .overlay(
                  Circle().stroke(Color.white, lineWidth: 4))
              .shadow(radius: 10)
      }
  }
  
  struct CircleImage_Previews: PreviewProvider {
      static var previews: some View {
          CircleImage(image: Image("turtlerock"))
      }
  }
  

• MapView.swiftを修正。

  struct MapView: UIViewRepresentable {
      var coordinate: CLLocationCoordinate2D
      
      func makeUIView(context: Context) -> MKMapView {
          MKMapView(frame: .zero)
      }
      
      func updateUIView(_ uiView: MKMapView, context: Context) {
          let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
          let region = MKCoordinateRegion(center: coordinate, span: span)
          uiView.setRegion(region, animated: true)
      }
  }
   
  struct MapView_Previews: PreviewProvider {
      static var previews: some View {
          MapView(coordinate: landmarkData[0].locationCoordinate)
      }
  }
  

• LandmarkDetail.swiftを修正。

  struct LandmarkDetail: View {
      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])
      }
  }
  
  

• LandmarksAppを修正(SceneDelegate.swiftは存在しなかった)。

  import SwiftUI
  
  @main
  struct LandmarksApp: App {
      var body: some Scene {
          WindowGroup {
              LandmarkList()
          }
      }
  }
  
  

• LandmarkList.swiftを修正。

  struct LandmarkList: View {
      var body: some View {
          NavigationView{
              List(landmarkData) { landmark in
                  NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                      LandmarkRow(landmark: landmark)
                  }
              }.navigationBarTitle(Text("Landmarks"))
          }
      }
  }
  

Step 8. プレビュー端末を変える。†

• 以下のように変更できる。

  struct LandmarkList_Previews: PreviewProvider {
      static var previews: some View {
          LandmarkList()
              .previewDevice(PreviewDevice(rawValue: "iPhone X"))
      }
  }
  

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

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

ゲーム

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

ショートカット

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

今日の20件

最新の20件