BETA

SwiftUI Tutorial 2: Building Lists and Navigation

投稿日:2019-09-02
最終更新:2019-09-02

・ルートビューの指定方法

willConnectTo 内の、ここをいじる

window.roowViewController: UIHostingController(rootView: LandmarkDetail()

Image => ビュー...すなわち UIKit の UIImageView である(VStackの中に書けたりする)と同時に、
データソース... UIKit の Image 、両方の性質を持っているな...。

・プレビューは、Group で囲むと、複数出力できる (3-3)

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

・List => UITableView に近い、Form => GroupedなUITableView に近い...? (見た目の話)

・List の書き方

  1. static に
List {  
    LandmarkRow(landmark: landmarkData[0])  
}  
  1. Collection をデータソースとして利用することで

identifiable な性質を帯びたデータソースを使用することで利用可能になる。
identifiable な性質を持たせるには 2つの方法がある。

A. ユニークなキーパスを渡す

List(landmarkData, id: \.id) { landmark in  
    LandmarkRow(landmark: landmark)  
}  

B. モデルクラスを プロトコル Identifiable に準拠させる (ほぼこのB. の方法でFAだな)

List(landmarkData) { landmark in  
    LandmarkRow(landmark: landmark)  
}  

Identifiable は、1つのプロパティへの定義を要求する

/// A class of types whose instances hold the value of an entity with stable identity.  
@available(OSX 10.15, iOS 13, tvOS 13, watchOS 6, *)  
public protocol Identifiable {  

    /// A type representing the stable identity of the entity associated with `self`.  
    associatedtype ID : Hashable  

    /// The stable identity of the entity associated with `self`.  
    var id: Self.ID { get }  
}  

すなわち、 id は、「hashable な具象型」である、といえるだろう
(associatedtype は具象型において解決されるため)

A. と B. は同時に書ける(= Identifiable に適合しながら A. のAPIを使う)。意味ないけど。

☆ navigation

ナビゲーションを付加する手順

  1. List・VStack... を NavigationView でラップ
  2. List ・VStack... に、 navigationBarTitle(_:) modifier をつける
  3. LandmarkRow を NavigationLink でラップ

こうゆうこと

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

遷移の様子は、ライブモードのプレビューで確認可能。

・『CircleImage.swift に、stored property(Image) を定義しましょう。
これは、SwiftUI でビューを作るときの 【コモンパターン】です。』

へぇ。いちおう堂々とやっていいんだ。
ViewModel とかが出てくる段には、そっちに退避させたりするようになるのかな?

navigationTitle(Text("hoge"), displayMode: xxx について

・inline => ナビゲーションバー上に表示される。慣れてるやつ

・large => アグレッシブだな

・automatic => large を指定したのとおなじになった。コンテキストは不明

・プレビュー

previewDevice(PreviewDevice(rawValue: "iPhone SE")) // プレビュー用の端末を決める

previewDisplayName // ラベル

・プレビューは、リアル端末でも、 「Device Preview Buton」とやらを押せば、見れる、らしい...。

感想

親ビューから小ビューにモデルを渡す形がきれい。(7のstep-7)
UIKitとて、これくらい綺麗に書けるのかな?
...なんて、既存認知に新しい見方を与えてくれるという意味で SwiftUI 素晴らしい。
「考え方を学べるフレームワーク」ってプレゼンで言ってた。よい。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

備忘録ほどの価値もない走り書き

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!