AppCode で SwiftUI アプリケーションを作成する

1. キャレットを ContentView に置き、Shift+F6 を押し、ハイライトされた領域に ConferenceList と入力して、Enter を押します。

2. をクリックし、コメントと文字列チェックボックスを選択します。

3. 開いた検索ツールウィンドウで、リファクタリング実行をクリックします。AppCode は、ファイル名やコメントを含め、あらゆる場所でこのシンボルの使用箇所を変更します。

   

4. 同様に、ContentView_Previews の名前を ConferenceList_Previews に変更します。

1. Text コントロールを List でラップします。

   struct ConferenceList: View { var body: some View { List { Text("Hello, world!") .padding() Text("Hello, world!") .padding() } } }

   プレビューには次の変更が表示されます。

   

2. エディターで List コントロールを選択し、Ctrl+Shift+A を押して、「ライブテンプレートとして保存…」アクションを見つけます。

   

3. 開いたダイアログで、テンプレートテキストを変更します。

   $ELEMENT$ {$SELECTION$}

4. テンプレートを Swift 宣言およびステートメントに適用できるようにします（ダイアログの左下隅にある変更リンクをクリックします）。

5. テンプレートの略語（たとえば、sut）を追加し、カスタムテンプレートグループの名前を SwiftUI に変更して、OK をクリックします。

   

6. これで、このテンプレートを使用して、コードを SwiftUI 要素で囲むことができます。囲む必要のあるコード行を選択し、Ctrl+Alt+T を押して、リストから新しいテンプレートを選択します。

   

1. リストにタイトルを追加します。これを行うにはリストを NavigationView でラップし、navigationBarTitle(_:) メソッドを呼び出します。

   struct ConferenceList: View { var body: some View { NavigationView { List { Text("Hello, world!") .padding() Text("Hello, world!") .padding() }.navigationBarTitle("Conferences") } } }

2. 2 つのリスト項目の代わりに、タイトルとサブタイトルで構成される 1 つを作成します。タイトルに会議名を表示し、サブタイトルに場所を表示します。これを行うには、2 つの Text コントロールを VStack コンテナーにラップし、それらの値を変更して、対応するフォントスタイルを適用します。

   struct ConferenceList: View { var body: some View { NavigationView { List { VStack { Text("Conference").font(.headline) Text("Location").font(.subheadline) } }.navigationBarTitle("Conferences") } } }

3. VStack コンテナーの alignment パラメーターを使用して、両方の Text コントロールを左揃えにします。

   VStack(alignment: .leading) { // … }

最終的に、リストは次のようになります。

1. リポジトリから conferencesData.json(英語) ファイルをダウンロードします。

2. プロジェクトツールウィンドウで iOSConferences グループを選択し、Alt+Insert を押して、グループを選択します。

3. 開いたダイアログで、Resources と入力し、フォルダーの作成チェックボックスが選択されていることを確認して、OK をクリックします。

   

4. Resources グループを右クリックし、追加 | ファイルを選択して、ダウンロードした JSON を Finder で見つけます。

JSON データを Decodable オブジェクトの配列に解析する関数を追加し、これらのオブジェクトのデータモデルを作成してみましょう。

1. iOSConferences グループで、Model というグループを作成します。

2. そこで新しい Swift ファイル（新規 | Swift ファイル）を作成し、それを Data と呼びます。

   

3. 新しく作成したファイルに、JSON ファイルのデコードに使用する loadFile() 関数を追加します。

   func loadFile<T: Decodable>(_ filename: String) -> T { let data: Data guard let file = Bundle.main.url(forResource: filename, withExtension: nil) else { fatalError("Cannot find \(filename)") } do { data = try Data(contentsOf: file) } catch { fatalError("Cannot load \(filename):\n\(error)") } do { let decoder = JSONDecoder() let format = DateFormatter() format.dateFormat = "yyyy-mm-dd" decoder.dateDecodingStrategy = .formatted(format) return try decoder.decode(T.self, from: data) } catch { fatalError("Cannot parse \(filename): \(T.self):\n\(error)") } }

4. Model グループで、Conference Swift クラス（新規 | Swift 型）を作成します。

   

5. Conference クラスは、Codable および Identifiable プロトコルに準拠し、解析された JSON データに対応するセットフィールドを含む必要があります。

   class Conference: Codable,Identifiable { var name: String var location: String var start: Date var end: Date? var link: String }

6. Data.swift で、JSON ファイルから解析された Conference オブジェクトの配列を格納する conferencesData 変数を導入します。

   let conferencesData: [Conference] = loadFile("conferencesData.json")

これで、会議の配列が conferencesData 変数に保存されたら、それを ConferenceList に渡すことができます。

1. ConferenceList.swift ファイルに移動し、conferencesData を List 初期化子に渡します。

   List(conferencesData) {conference in … }.navigationBarTitle("Conferences")

   これで、conferencesData 配列に含まれるアイテムと同じ数のアイテムがリストに表示されます。

   

2. 最後に、Conference および Location 文字列を実際のデータに置き換えます。

   List(conferencesData) {conference in VStack(alignment: .leading) { Text(conference.name).font(.headline) Text(conference.location).font(.subheadline) } }.navigationBarTitle("Conferences")

更新されたリストは次のようになります。

1. プロジェクトツールウィンドウで、iOSConferences グループを選択し、Alt+Insert を押して、Xcode テンプレートからファイル…を選択します。

2. 開いたダイアログで、iOS | ユーザーインターフェース | SwiftUI ビューを選択し、次へをクリックします。

   

3. 次のページで、ファイル名 ConferenceDetails を入力し、iOSConferences グループと場所が選択されていることを確認して、完了をクリックします。

4. ConferenceList_Previews の場合と同じ方法で、ConferenceDetails_Previews の新しいビューのインタラクティブプレビューを有効にします。

   class ConferenceDetails_Previews: PreviewProvider { static var previews: some View { ConferenceDetails() } #if DEBUG @objc class func injected() { let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene windowScene?.windows.first?.rootViewController = UIHostingController(rootView: ConferenceDetails()) } #endif }

ビュー間の接続を設定するには、NavigationLink(英語) 機能を使用します。

1. ConferenceList.swift ファイルで、VStack コンテナーを NavigationLink でラップします。

   NavigationLink { VStack(alignment: .leading) { Text(conference.name).font(.headline) Text(conference.location).font(.subheadline) } }

2. ConferenceDetails ビューを NavigationLink の destination パラメーターに渡します。

   NavigationLink(destination: ConferenceDetails()) { VStack(alignment: .leading) { Text(conference.name).font(.headline) Text(conference.location).font(.subheadline) } }

   リスト項目がクリック可能になり、それぞれをタップすると詳細ビューが開きます。

   

ConferenceDetails ビューには、リストで選択された会議の詳細情報が表示されます。

1. ConferenceDetails ビューに移動し、デフォルトの Hello, World! テキストを会議の場所に置き換えます。

   struct ConferenceDetails: View { var body: some View { Text(conference.location) } }

2. conference フィールドはまだ追加されていないため、その使用箇所は赤でハイライトされています。プロパティ '会議' を作成します インテンションアクション (Alt+Enter) を適用してフィールドを作成します。

   

   結果として、次のコードが必要になります。

   struct ConferenceDetails: View { var conference: Conference var body: some View { Text(conference.location) } }

3. 新しいフィールドを追加した後、それをすべての ConferenceDetails() 初期化子呼び出しにパラメーターとして渡す必要があります。F2 を押してエラーの原因となるコードに移動し、キャレットを ConferenceDetails() に配置し、Alt+F7 を押してこの初期化子のすべての使用箇所を検索します。

   検索ツールウィンドウに、修正が必要なすべての呼び出しが表示されます。ハイライトされたコードにキャレットを置き、Alt+Enter を押して、Fix-it を適用するを選択します。

   

   ConferenceDetails.swift ファイルで、両方の使用箇所で Conference() を conference パラメーターとして渡します。

   class ConferenceDetails_Previews: PreviewProvider { static var previews: some View { ConferenceDetails(conference: Conference()) } #if DEBUG @objc class func injected() { let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene windowScene?.windows.first?.rootViewController = UIHostingController(rootView: ConferenceDetails(conference: Conference())) } #endif }

   ConferenceList.swift で、イニシャライザー呼び出しを次のように変更します。

   NavigationLink(destination: ConferenceDetails(conference: conference)) { … }

4. Conference クラスには初期化子がないため、Conference() は引き続きハイライトされます。1 つ追加するには、キャレットを Conference() に配置し、Alt+Enter を押して、初期化子を作成するを選択します。

   

   空の init() メソッドが Conference クラスに追加されます。そこにあるすべてのプロパティの初期値を設定します。例:

   init() { name = "Conference Name" location = "Location" start = Date() end = Date() link = "https://www.google.com" }

次に、プレビューを参照してください。ConferenceDetails ビューには、ConferenceList ビューから選択された会議の場所が表示されます。

1. Ctrl+D Text(conference.location) 行を 2 回複製します。

   struct ConferenceDetails: View { var conference: Conference var body: some View { Text(conference.location) Text(conference.location) Text(conference.location) } }

2. 会議の開始日と終了日は、MMMM dd, yyyy - MMMM dd, yyyy の形式で表示する必要があります。これを行うには、Date を String に変換する必要があります。この目的のために新しい textDates() メソッドを使用して、2 番目の Text コントロールに対してそれを呼び出しましょう。

   struct ConferenceDetails: View { var conference: Conference var body: some View { Text(conference.location) Text(conference.textDates()) Text(conference.location) } }

   ハイライトされたコードにキャレットを置き、Alt+Enter を押して、メソッド 'textDates' を作成しますを選択します。

   

   空の textDates() メソッドが Conference クラスに作成されます。そこに次のコードを追加します。

   func textDates() -> String { var result = start.dateToString() if let end = self.end { result = "\(result) - \(end.dateToString())" } return result }

   このメソッドは、Date クラスに追加する dateToString() ユーティリティ関数を使用します。Data.swift に移動し、そこに次のコードを追加します。

   extension Date { func dateToString() -> String { let format = DateFormatter() format.dateFormat = "MMM dd, yyyy" return format.string(from: self) } }

   会議の日付が詳細ビューに表示されます。

   

3. 会議の Web サイトへのクリック可能なリンクを表示する LinkButton コントロールを実装します。ConferenceDetails.swift で、次のコードを追加します。

   struct LinkButton: View { var link = "" var body: some View { Button(action: { UIApplication.shared.open(URL(string: self.link)!) }) { Text("Go to official website") } } }

   次に、3 番目の Text コントロールを LinkButton に置き換えます。

   struct ConferenceDetails: View { var conference: Conference var body: some View { Text(conference.location) Text(conference.textDates()) LinkButton(link: conference.link) } }

   新しいコントロールはすぐにプレビューに表示されます。

   

現在残っているのは、詳細ビューのレイアウトを強化することだけです。

1. ConferenceDetails ビューで、Text コントロールと LinkButton を VStack コンテナーにラップし、フレームの幅、高さ、配置を調整して画面の左上隅に移動します。

   struct ConferenceDetails: View { var conference: Conference var body: some View { VStack { Text(conference.location) Text(conference.textDates()) LinkButton(link: conference.link) }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading) } }

2. VStack コンテンツを左に揃えます。

   VStack(alignment: .leading) { // … }

3. VStack コンテナーのデフォルトのパディングを追加します。

   VStack(alignment: .leading) { // … }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading) .padding()

4. VStack コンテナー内の要素の下部パディングを追加します。

   VStack(alignment: .leading) { Text(conference.location).padding(.bottom) Text(conference.textDates()).padding(.bottom) LinkButton(link: conference.link).padding(.bottom) }

5. navigationBarTitle(_:) メソッドを使用して、ビュータイトルに会議名を表示します。

   VStack(alignment: .leading) { // … }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading) .padding() .navigationBarTitle(conference.name)

   最後に、ConferenceDetails ビューは次のようになります。