チュートリアル勉強メモ

UIKit 概要

最初にUIKitの背景を知るようにとのことで、要約まとめ。

• 幅広いAPI ･･･ iOSアプリ構築に必要な core objects, views, controlls などのライブラリが揃ってる。
• 構成レイアウト･･･ 再利用可能な小さなコンポーネントからCollectionViewを作成。ステートドリブン型でセルを更新。柔軟にビジュアルレイアウトを作成し。

• 正確なUI表示••• Auto Layout, Interface BuilderいずれでView構築しても、あらゆるAppleデバイス・向きにも対応。
• iOS13以前の構築基盤･･･ iOS13以前のレガシーアプリの保守または拡張には、UIKitが必要
• 手厚いサポート･･･ Appleドキュメントだけでなく、UIKitコミュニティから幅広いコンテンツと手厚いサポートが受けられる
• SwiftUIと相互運用･･･ 両方のフレームワークの長所を生かした運用ができる。

リマインダーアプリ「Today」の作成

目標

• 毎日のリマインダーを表示
• ユーザーがその日のタスクに集中できるようにする
• ビジュアルデザインとアニメーションを使用し、静かで落ち着いたインターフェースの提供

Todayの概要

• メイン画面：ユーザーのリマインダー表示

• ナビゲーションバー：カテゴリー(Today, Future, All) をセグメント型のピッカーを用いてフィルター表示

• ナビゲーションバー：+ 追加ボタンで、リマインダーを新規作成

• 完了ボタンを押すことでリマインダーが完了 → 進行状況の円が塗りつぶされていく

• 詳細画面：タイトル/日・時の締切期限/追加メモなどのリマインダーに関する情報

• 編集ボタンをタップして編集

• 編集画面：編集のためのフィールドとピッカーが表示

• リマインダー追加画面は、この編集画面を再利用。 モーダルで表示
   
  リストの作成へ

「Today」の作成

Section1. プロジェクトを作成する

まずは、Todayプロジェクトを作成。Interfaceは、Storyboard。

Section2. CollectionViewControllerの追加

ViewControllerをStoryboardに追加していく。

 
Interface Builder を使用して、CollectionViewControllerを作成していくとのこと。

＊Step1
Main.storyboardにあるView Controller Scene をドキュメントアウトラインから消去
→後々リスト表示できるViewControllerに置き換えるため。

＊Step2
ライブラリーから、CollectionViewControllerを検索

＊Step3
CollectionViewControllerをライブラリーからキャンバスにドラッグ

＊Step4

CollectionViewからセルテンプレートを削除
→CollectionViewのセルは、Storyboardではなくコードで定義して作成するため。

＊Step5

属性インスペクタで、「Is Initial View Controller」にチェック
→シーンを、Storyboardのエントリーポイントとする。

＊Step6
Destinationのポップアップメニューから、「iPhone14Pro」を選択
 
次は、リマインダー用のデータモデルを作成していく

Section3. リマインダーモデルを作成

UIKitアプリの一般的なデザインパターン：MVC (Model-View-Controller)

正直、MVVMのVMとMVCのCとの役割の違いが分かっていないので、アーキテクチャに関してはもっと勉強が必要

Viewオブジェクト･･･データを視覚的に表現
Modelオブジェクト･･･アプリのデータとビジネスロジックの管理
ViewController･･･ViewとModelが直接的に影響を及ぼさないことを保証
 
ここからデータモデルを作成していく

＊Step1

「Models」グループの作成

＊Step2
Modelsグループに、Reminder.swiftファイルの作成

＊Step3〜Step5
Reminder.swiftに、下記プロパティ宣言

デフォルト値がなくても、初期化子 (init) の作成は不要
Swiftコンパイラは、構造体にデフォルト値がないプロパティが格納されていても、
各構造体にメンバーごとの初期化子を自動で提供

⇧メンバーワイズイニシャライザ。構造体限定。
クラスの場合は、指定イニシャライザorコンビニエンスイニシャライザが必要 (クラスには、継承関係があるため)

＊Step6
ファイルの最後に、サンプルリマインダーデータを保存するextensionを追加
#if DEBUG ブロック内に、extensionを置く

 

＊Step7
Step6の中に、サンプルリマインダーの静的配列を定義
ここに関しては、サンプルなのでコピペした

静的 (static) であるのは、うっかり内部を改竄してしまうのを防ぐため？
 
Collection View自体のコンポーネントから始めて、Collection Viewの外観調整へ

Section4 コレクションをリストとして構成していく

Compositional layout を使用して、Collection Viewの外観を構成していく。
Compositional layoutを使用すると、Section, Group, Itemなどの様々なコンポーネントを組み合わせてViewを構築できる。

Sectionは、ItemのGroupを囲む外側のコンテナビューを指す。

https://zenn.dev/chiii/articles/e487b32e787b59
こちらの記事によると、Compositional layoutは、iOS13〜とのこと
 
CollectionViewControllerのバッキングコードをStoryboardと関連付けさせていく

＊Step1
名前の変更
ViewController → ReminderListViewController
UIViewController → UICollectionViewController

＊Step2
Main.storyboardを開いて、Identityインスペクター上でViewControllerのクラスIDを、先ほどの「ReminderListViewController」に変更

こうすることで、ReminderListViewControllerクラスインスタンスの特殊なプロパティやメソッドにアクセスが可能になる。
 
事前に定義されている構成を足がかりに、リストの表示方法を定義していく。
＊Step3
ReminderListViewControllerで、listLayoutメソッドを作成。

private func listLayout() -> UICollectionViewCompositionalLayout {
        var listConfiguration = UICollectionLayoutListConfiguration(appearance: .grouped)
    }

このメソッドによって、グループ化された外観を持つ新しいリスト構成変数を作成する。
 

この時点では、戻り値がないのでエラーが出る。

＊Step4
listConfigurationを、区切り文字無効、背景色クリアにする。

private func listLayout() -> UICollectionViewCompositionalLayout {
        var listConfiguration = UICollectionLayoutListConfiguration(appearance: .grouped)
        listConfiguration.showsSeparators = false
        listConfiguration.backgroundColor = .clear

他にもUICollectionLayoutListConfigurationでは、各セクションのヘッダーのパディング量などを指定できる

＊Step5
リスト構成を含む新しい構成レイアウトを返す。
引数usingに、listConfigurationを入れることで、レイアウトを指定。

 private func listLayout() -> UICollectionViewCompositionalLayout {
        var listConfiguration = UICollectionLayoutListConfiguration(appearance: .grouped)
        listConfiguration.showsSeparators = false
        listConfiguration.backgroundColor = .clear
        return UICollectionViewCompositionalLayout.list(using: listConfiguration)
    }

戻り値を返したので、エラーが消える。

＊Step6〜step7
viewDidLoad() メソッド内で、新しいリストレイアウトを作っていく。
リストレイアウトをCollectionViewレイアウトに割り当てる。

override func viewDidLoad() {
        
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let listLayout = listLayout()
        collectionView.collectionViewLayout = listLayout
    }

 
今回の場合は、画面の読み込みが終わった後に、collection viewのレイアウトを定義している

Section5 data source

現在、CollectionViewにリストセクションを作成した状態
ここから、

• Collection Viewにセルを登録
• content configurationを使用してセルの外観を定義
• セルをデータソースに接続
  データが更新されたときに、ユーザーインターフェースを更新してアニメーション化する、
  差分可能なデータソースを使用していく。

＊Step1
新しいセル登録 (cellRegistration) を作成 (viewDidLoad()内)。

 let cellRegistration = UICollectionView.CellRegistration {
            (cell: UICollectionViewListCell, indexPath: IndexPath, itemIdentifier: String) in
}

＊Step2
Itemに対応するリマインダーを取得する。

 let cellRegistration = UICollectionView.CellRegistration {
            (cell: UICollectionViewListCell, indexPath: IndexPath, itemIdentifier: String) in
            let reminder = Reminder.sampleData[indexpath.item]
}

＊Step3
セルのデフォルトのコンテンツ設定を取得

let cellRegistration = UICollectionView.CellRegistration {
            (cell: UICollectionViewListCell, indexPath: IndexPath, itemIdentifier: String) in
            let reminder = Reminder.sampleData[indexpath.item]
            var contentConfiguration = cell.defaultContentConfiguration()
}

*＊Step4〜Step5
セルのコンテンツのtextにリマインダーのtitleを設定し、
この設定をセルへと割り当てる。

let cellRegistration = UICollectionView.CellRegistration {
            (cell: UICollectionViewListCell, indexPath: IndexPath, itemIdentifier: String) in
            let reminder = Reminder.sampleData[indexpath.item]
            var contentConfiguration = cell.defaultContentConfiguration()
            contentConfiguration.text = reminder.title
            cell.contentConfiguration = contentConfiguration
}

 
次からは、セルの内容と外観を設定していく。

Section5続き

セルを差分可能なデータソースに接続していく。
＊Step6
差分可能なデータソースの型エイリアス(typealias)を追加

class ReminderListViewController: UICollectionViewController {
    typealias DataSource = UICollectionViewDiffableDataSource<Int, String>
    
    var dataSource: DataSource!

    override func viewDidLoad() {
//以下略

typealias Short = Int16

let i : Short = 20
print(i) // 20
print(i.dynamictype) // Int16

今回の場合は、UICollectionViewDiffableDataSource<Int, String> に DataSourceという別名をつけている状態。

Step7
暗黙的にDataSourceをアンラップ (!) する、dataSourceプロパティを追加。

この後、nilでないことを保証するために、dataSourceを初期化する。

Step8〜Step9
DataSourceのinitに、CollectionViewを渡すことで、差分可能なデータソースとCollectionViewを繋げていく

• 新しいデータソースの作成
  イニシャライザーで、CollectionViewのセル設定を返すクロージャーを渡す。
  クロージャーは、CollectionView内のセルの場所へのIndexPathと、ItemIdentifierを受け入れる。

• cell registration を使用して、セルをデキューして返す。

dataSource = DataSource(collectionView: collectionView) {
            (collectionView: UICollectionView, indexPath: IndexPath, itemIdentifier: String) in
            return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: itemIdentifier)
        }

 
データソースを作成して初期化して作成するとこまではできた。
次からは、データが変更されたときにデータソースへ通知するところを設定していく。

Section6 スナップショットを適用する

データの状態をスナップショットで管理している。
スナップショット：特定の時点でのデータの状態 (Gitの管理方法と同じ感じ)
ここでは、リストViewにサンプルリマインダーのリストを表示するスナップショットを作成して適用させていく。

Step1
差分可能なデータソーススナップショットの型エイリアスを追加。

class ReminderListViewController: UICollectionViewController {
    typealias DataSource = UICollectionViewDiffableDataSource<Int, String>
    typealias Snapshot = NSDiffableDataSourceSnapshot<Int, String>
    
    var dataSource: DataSource!

//以下略

＊Step2
viewDidLoad()内に、snapshot変数を追加。

＊Step3
このsnapshotにセクションを追加。

＊Step4
リマインダーのtitleのみを含んだ新しい配列を作成し、titleをスナップショットの項目として追加。

まとめると下のようになる。

        var snapshot = Snapshot()
        snapshot.appendSections([0])
        var reminderTitles = [String]()
        for reminder in Reminder.sampleData {
            reminderTitles.append(reminder.title)
        }
        snapshot.appendItems(reminderTitles)

ReminderのsampleData要素を1つずつ反復処理で、reminderTitlesに追加している。

＊Step5
先ほどのコードをmapを使って簡潔にまとめる。

+ snapshot.appendItems(Reminder.sampleData.map {$0.title})
- var reminderTitles = [String]()
- for reminder in Reminder.sampleData {
-     reminderTitles.append(reminder.title)
- }
- snapshot.appendItems(reminderTitles)

//配列の各要素に対して3をかける
配列名.map { $0 * 3} 

＊Step6~Step7
スナップショットを、データソースに適用し、
このデータソースをCollection Viewに割り当てる。

        var snapshot = Snapshot()
        snapshot.appendSections([0])
        snapshot.appendItems(Reminder.sampleData.map{$0.title})
        dataSource.apply(snapshot)
        
        collectionView.dataSource = dataSource

＊Step8
サンプルリマインダーリストを追加するため、アプリをBuild & Run する。
チュートリアルと同じ画面となるか確認するため、今回はシミュレーターをダークモードに設定した。