実装

• iOS アプリケーションを作成する

  Xcode を起動し、スプラッシュ画面で [Create a new Xcode project (新しい Xcode プロジェクトを作成する)] を選択します。

  

  [iOS] の [Application (アプリケーション)] で [Single View App (単一ビューアプリ)] を選択し、[Next (次へ)] をクリックします。

  

  プロジェクトの名前を入力します (例: iOS Getting Started)。[Language (言語)] が [Swift] に、[User Interface (ユーザーインターフェイス)] が [SwiftUI] に設定されていることを確認してから、[Next (次へ)] をクリックします。

  

  最後に、ディレクトリを選択し、[Create (作成)] をクリックしてプロジェクトを作成します。

• メインビューを更新する

  Xcode の左側にあるファイル一覧から ContentView.swift を開き、コードを次のコンテンツに置き換えます。

  import SwiftUI
  
  // singleton object to store user data
  class UserData : ObservableObject {
      private init() {}
      static let shared = UserData()
  
      @Published var notes : [Note] = []
      @Published var isSignedIn : Bool = false
  }
  
  // the data class to represents Notes
  class Note : Identifiable, ObservableObject {
      var id : String
      var name : String
      var description : String?
      var imageName : String?
      @Published var image : Image?
  
      init(id: String, name: String, description: String? = nil, image: String? = nil ) {
          self.id = id
          self.name = name
          self.description = description
          self.imageName = image
      }
  }
  
  // a view to represent a single list item
  struct ListRow: View {
      @ObservedObject var note : Note
      var body: some View {
  
          return HStack(alignment: .center, spacing: 5.0) {
  
              // if there is an image, display it on the left
              if (note.image != nil) {
                  note.image!
                  .resizable()
                  .frame(width: 50, height: 50)
              }
  
              // the right part is a vertical stack with the title and description
              VStack(alignment: .leading, spacing: 5.0) {
                  Text(note.name)
                  .bold()
  
                  if ((note.description) != nil) {
                      Text(note.description!)
                  }
              }
          }
      }
  }
  
  // this is the main view of our app, 
  // it is made of a Table with one line per Note
  struct ContentView: View {
      @ObservedObject private var userData: UserData = .shared
  
      var body: some View {
          List {
              ForEach(userData.notes) { note in
                  ListRow(note: note)
              }
          }
      }
  }
  
  // this is use to preview the UI in Xcode
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
  
          let _ = prepareTestData()
  
          return ContentView()
      }
  }
  
  // this is a test data set to preview the UI in Xcode
  func prepareTestData() -> UserData {
      let userData = UserData.shared
      userData.isSignedIn = true
      let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two."
  
      let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic")
      let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone")
  
      n1.image = Image(systemName: n1.imageName!)
      n2.image = Image(systemName: n2.imageName!)
  
      userData.notes = [ n1, n2 ]
  
      return userData
  }

  ここで追加したもの

  • メモのデータを保存する Note クラスを作成しました。ImageName と Image に 2 つの異なるプロパティを使用しました。Image については、後の「ストレージを追加する」セクションで取り上げます。
  • 特定のユーザーのデータを保持する UserData クラスを作成しました。この段階では、Note オブジェクトの一覧のみを作成しています。
  • メインビューの ContentView には、ListRow の一覧が含まれています。
  • 各行は、画像とテキストが水平にスタックされる ListRow によってレンダリングされます。テキストは、太字のメモ名と、メモの説明とが垂直にスタックされます。
  • 最後に、ContentView_Previews を調整し、prepareTestData() を追加して、キャンバスでプレビューをレンダリングできるようにしました。
• 構築およびテストする

  キャンバスをチェックして、想定どおりのレイアウトになっていることを確認します。キャンバスが表示されない場合は、[Editor (エディタ)] メニューで有効にしてから、[Canvas (キャンバス)] をクリックします。レイアウトのプレビューを生成するには、キャンバスの [resume (再開)] ボタンのクリックが必要な場合もあります。

  

  プレビューのデータはコードで生成され (70 行目から開始)、実行時には表示されないことに注意してください。すべてが問題ないようであれば、シミュレーターでアプリを構築して起動します。[Product (製品)] メニューをクリックして [Run (実行)] を選択するか、または を押します。他に、ツールバーの [Play (再生)] ▶️ ボタンをクリックする方法もあります。

  

  しばらくすると、iOS Simulator でアプリが起動します。最初の画面は空白です。 プレビューデータは実行時にレンダリングされません。Xcode 内のプレビューのみを目的としています。