$30 off During Our Annual Pro Sale. View Details »

これからUICollectionViewを実践活用する人のためのガイド / Guide to UICollectionView

これからUICollectionViewを実践活用する人のためのガイド / Guide to UICollectionView

YUMEMI.grow Mobile #5 - connpass
https://yumemi.connpass.com/event/288628/

YUMEMI.grow Mobile #5 - YouTube
https://www.youtube.com/watch?v=wB6mYHLSxLw

USAMI Kosuke

July 12, 2023
Tweet

More Decks by USAMI Kosuke

Other Decks in Programming

Transcript

  1. これからUICollectionViewを
    実践活用する人のためのガイド
    宇佐見公輔 / 株式会社ゆめみ
    2023-07-12
    これからUICollectionViewを実践活用する人のためのガイド 1

    View Slide

  2. 自己紹介
    宇佐見公輔(うさみこうすけ)
    株式会社ゆめみ / iOSテックリード
    大阪在住
    iOSDC Japan 2023
    パンフレット記事採択 → 入稿済
    9月に現地参加予定
    これからUICollectionViewを実践活用する人のためのガイド 2

    View Slide

  3. 今日の内容
    UICollectionViewの学びかたを整理し
    て話します
    (ポスターセッションで応募しました
    が、残念ながら不採択でした)
    これからUICollectionViewを実践活用する人のためのガイド 3

    View Slide

  4. UICollectionViewとは
    iOS 6で登場
    グリッド表示のUIコンポーネント
    コンテンツの配置が柔軟に行える
    その柔軟性ゆえに実装の難易度は高め
    iOS 13〜14で、モダンなAPI群が追加
    された
    これからUICollectionViewを実践活用する人のためのガイド 4

    View Slide

  5. 構成要素:UITableViewの場合
    Data Source
    Cell
    画面に表示されるぶんだけのデータを取得してセルを生成する仕組み
    これからUICollectionViewを実践活用する人のためのガイド 5

    View Slide

  6. 構成要素:UICollectionView
    Layout
    Data Source
    Cell
    UITableViewに加えて、グリッド表示などのレイアウトが追加
    これからUICollectionViewを実践活用する人のためのガイド 6

    View Slide

  7. 実装のための基本
    Layout
    UICollectionViewLayout
    クラスのサブクラス
    Data Source
    UICollectionViewDataSource
    プロトコルの実装クラス
    Cell
    UICollectionViewCell
    クラスのサブクラス
    これからUICollectionViewを実践活用する人のためのガイド 7

    View Slide

  8. レイアウト
    UICollectionViewLayout
    クラスのサブクラス
    ただし、自前で実装するのは大変
    標準で
    UICollectionViewCompositionalLayout
    が用意されている
    これでほとんどのレイアウトは実現できる(iOS 13以降)
    参考:以前は
    UICollectionViewFlowLayout
    が標準だった
    現在も使えるがオススメしない
    これからUICollectionViewを実践活用する人のためのガイド 8

    View Slide

  9. データソース
    UICollectionViewDataSource
    プロトコルの実装クラス
    自前で実装するのも難しくない
    標準で
    UICollectionViewDiffableDataSource
    が用意されている
    差分更新の仕組みがあって高機能(iOS 13以降)
    ただし、使うために学ぶことが少し多い
    これからUICollectionViewを実践活用する人のためのガイド 9

    View Slide

  10. セル
    UICollectionViewCell
    クラスのサブクラス
    自前で実装するのも難しくはない
    セルの登録・再利用の仕組みも知る必要がある
    UIContentView

    UIContentConfiguration
    が用意されている
    セルの実装を安全にする(iOS 14以降)
    CellRegistration
    が用意されている
    セルの登録・再利用の仕組みを安全にする(iOS 14以降)
    これからUICollectionViewを実践活用する人のためのガイド 10

    View Slide

  11. 学ぶ順番:最初のステップ
    まずは最小限の実装でUICollectionViewを動かす
    動かすために必要な要素を少ない労力で揃える
    これからUICollectionViewを実践活用する人のためのガイド 11

    View Slide

  12. 学ぶ順番:最初のステップ
    Layout
    UICollectionViewCompositionalLayout
    の最小限の利用
    Data Source
    最初は
    UICollectionViewDataSource
    プロトコルを自前実装する
    のがわかりやすい
    Cell
    最初は
    UICollectionViewCell
    のサブクラスを自前実装するのが
    わかりやすい
    これからUICollectionViewを実践活用する人のためのガイド 12

    View Slide

  13. 学ぶ順番:次のステップ (1)
    Data Source
    UICollectionViewDataSource
    プロトコルの自前実装をやめて、
    UICollectionViewDiffableDataSource
    を使う
    Diffable Data Sourceに必要な概念を学ぶ
    Identifiable
    /
    Hashable
    /
    Equatable
    スナップショット
    これからUICollectionViewを実践活用する人のためのガイド 13

    View Slide

  14. 学ぶ順番:次のステップ (2)
    Cell
    セルの登録・再利用に
    CellRegistration
    を使う
    セルの実装に
    UIContentView

    UIContentConfiguration
    を使う
    これからUICollectionViewを実践活用する人のためのガイド 14

    View Slide

  15. 学ぶ順番:次のステップ (3)
    Layout
    UICollectionViewCompositionalLayout
    をより詳しく学ぶ
    グループのネスト
    セクション、アイテムの装飾
    これからUICollectionViewを実践活用する人のためのガイド 15

    View Slide

  16. 宣伝
    UICollectionViewの本を書きました
    BOOTH、Zennなどで販売中
    書ききれなかった内容もあるので、
    続編を検討中・・・
    これからUICollectionViewを実践活用する人のためのガイド 16

    View Slide