UI Collection Viewにおけるリスト

UI Collection Viewにおけるリスト

UICollectionViewを用いてApp内でリストやサイドバーを構築する方法を学びましょう。Compositional layoutの柔軟性をフルに活用しながら、テーブルビューの外観を置き換えましょう。Modular Layoutのオプションを確認し、Appのデザインオプションとしてこれまで以上に活用する方法を学びましょう。一つのUICollectionView内でテーブルビューのようなリストにカスタムのCompositional Layoutを組み込む方法もご紹介します。リストの扱い方、より手の込んだセルの作り方、またレイアウトをカスタマイズして、App内の情報をより良いデザインで見せる方法も学びます。このセッションを有効活用するには、Compositional Layoutの基礎を理解していることが求められます。更なる情報は、WWDC19の"Advances in Collection View Layout" をご参照ください。

リソース
- Implementing Modern Collection Views
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC20
WWDC19
- コレクションビューレイアウトの最新情報
ダウンロード

WWDCへようこそ “UI Collection Viewにあるリスト”
皆さんこんにちはフレームワークエンジニアをしています UIKitチームのミシェル･オクスですこのビデオでは UICollectionViewのリストについてお話をします
“MODERN COLLECTION VIEWS” ここでご覧になっているのは最新のCollection View Setupの一部であると考えているアーキテクチャですこのダイアグラムについては“Advances in Collection View”で詳しくお話したいと思いますダイアグラムの様々な部分それぞれのビデオがありこのビデオはリストコンフィギュレーションとリストセルについてご説明しています
ではまず最初にコレクションビューのリストが実際は何であるかをお話しします iOS 14のリストでは見た目がUITableViewに似たコレクションビューを使用できます iOS 13で導入したCompositional Layoutの上に構築したからですこれはとてもフレキシブルでありまた高度なカスタム化が可能なのです
また自動調整サポートを特にリスト用に強化しました UICollectionViewでリストを使用するときには自動調整をデフォルトの挙動にしていますつまり皆さんはもうセルの高さをマニュアルで計算する必要がなくなりその代わりに自動レイアウトを使ってセルを簡単に構築するだけそしてコレクションビューがあとはすべてやってくれますもしマニュアルでサイズ調整をする必要があればそうすることもできますそのやり方は皆さんのセルサブクラスで preferredLayoutAttributesFittingAtributesを上書きして行うことができます
カスタム化の観点に戻って見ていきましょう先ほど申し上げた“高度なカスタム化”の意味をお見せしたいと思います
ここではアプリケーションを例としてお見せしていますがここには最近使用したすべての絵文字が最上部に直交方向でスクロール表示されていますその下にはグループでソートされた絵文字のアウトラインが表示されておりそれにはヒエラルキーが埋め込まれていますそして最下部を見ると UITableViewにとても外観の似たものが表示されておりそれに加えて各々のセルをスワイプしてお好みの絵文字をマーキングすることもできますこれはリスト組み合わせとCompositional Layoutを用いたコレクションビューの一例ですこれがどう作用するかを深掘りする前にリストのコンポーネントを見てみましょう
iOS 14では UICollectionLayoutListConfiguration というまったく新しいタイプをご提供していますレイアウト側でコレクションビュー内にリストを構築する時に必要となる唯一の新しいタイプです UICollectionLayoutListConfigurationは NSCollectionLayoutSectionと UICollectionViewompositionalLayoutの上に構築されておりこの２つは iOS 13で導入した既存の Compositional Layoutシステムの構成パーツです
今回 Compositional Layoutの詳細は説明はしませんがぜひ WWDC2019の“Advances in Collection View Layout”ご参照ください
“LIST CONFIGURATION” それではリストコンフィギュレーションを見てみましょう
リストコンフィギュレーションはスタイルとしてお馴染みのTableViewと同じ外観となっていますプレーンとグループそしてインセットグループですしかしここで UICollectionViewのリストだけの新しいスタイルを２つご紹介しますこれは “サイドバー”と “サイドバープレーン”と呼ばれていますこの新しいスタイルを使って iPadOS 14で驚くほど素晴らしいマルチカラムのアプリケーションを構築することもできます更に全体の見た目とは別にリストコンフィギュレーションによりセパレータを見せる隠すといったオプションやリストのヘッダーやフッターを構築するといったオプションも可能になりましたリストコンフィギュレーションの技術用語は UITableViewをお使いならご存じですよねでも今回いくつかの新しい用語を付け加えましたのでこの後お話いたしますではまず最初にリストの作り方をお見せしましょう
最も簡単な方法は UICollectionLayoutListConfigurationを作成しここに外観を設定しこのコンフィギュレーションを使い UICollection ViewCompositionalLayoutを作成することです
この例では insetGroupedスタイルを使っていますこれにより見た目は insetGrouped UITableViewと全く同じになりますしこのレイアウト内のすべてのセクションもまったく同じ外観になります
ですから UITableViewととても似ているのです皆さんにはこのアプローチを可能な限り使っていただきたいと思いますしかしリスト作成にはもっとパワフルなやり方がありそれを私たちは persection設定と呼んでいます
persection設定ではまったく同じコンフィギュレーションを使いますがこれで構成レイアウトを作成する代わりにコンフィギュレーションを使い NSCollectionLayoutSectionを作ります
このコードは Compositional Layout上の既存のセクションプロバイダ― イニシャライザーの中で使うことができますこのコードはコレクションビューの各々のセクションで呼び出され該当するセクションに特化した個別のレイアウト定義を返すことができるようになります
その結果ここで表示されているものは先ほどお見せしたシンプルセットアップと全く同様のデザインとなりますでもこのセットアップが手元にあるので私たちの好みのレイアウトにセクションごとにカスタム化できるようになりました
例えば最初のセクションにはカスタムグリッドレイアウトを返していますがこのグリッドは既存の構成レイアウトAPIを使って構築しましたこれはとてもパワフルでレイアウトにも使うことができ　先ほどのお見せした最近使った絵文字を直交方向にスクロール表示していたあのスクリーンなどがそうですここまで UICollectionViewでのリストの作り方をご覧いただきましたが次にリストセクションでヘッダーとフッターをどう構成設定するのかお話しましょう “HEADERS AND FOOTERS” コレクションビュー内のリストにあるヘッダーとフッターは UITableViewで慣れているものとは使い方が少し異なるかもしれません UICollectionView内のリストのヘッダーとフッターは明示で有効化されていなければならずそのやり方は２つあります
一つは皆さんのヘッダーとフッターを追加ビューとして登録する方法ですこの例ではヘッダーを構成しますが同じコードはフッターでも使えますシンプルにここでコンフィギュレーションのヘッダーモードかフッターモードを “supplementary”に設定します
次にコンフィギュレーションをこのように設定するとコレクションビューはヘッダーやフッターを画面上に描画するタイミングで追加ビューを提供するように聞いてきます
このビューを提供するもっとも簡単なやり方は差分最適データソースにある追加ビュープロバイダを使う方法がありますがまたUICollectionViewのデリゲートに同様の方法を実装することでも可能です
このコールバックの内部で要素の種類を elementKindSectionHeaderかまたは elementKindSectionFooterかをチェックし構成をしそして適切なビューを返します
大切なのはこのアプローチをするときはコレクションビューからの要請があれば― 追加ビューを提供しなくてはならないことを忘れないことですもし追加ビューコールバックで nilを返したらコレクションビューがアサートしますレイアウト内でヘッダーをリクエストしてくるセクションとしてこないセクションがある場合は先ほどお見せした persectionコンフィギュレーションを使い対象のセクションがヘッダーを表示すべきかそうでないかによりモード設定を “supplementary” または“none”にしてくださいここにはオプションが２つあると先ほど申し上げました２つ目のオプションはヘッダーだけに当てはまりますこれはヘッダーモードを firstItemInSectionへ設定することで有効化されますこれはコレクションビューにこの対象セクションで最初のセルだけを構成しヘッダーのような外観にするように指令しているのです
ヒエラルキーデータ構成と新規のセクションスナップショットAPIを使っているときにはおすすめのモードですさらにご興味がおありでしたら“Advances in Diffable Data Source”をご参照くださいしかしこのモードを使っているときはデータソースはそれを認識している必要がありますその理由はそのデータソースの最初のアイテムはもはやセクションの実際のコンテンツを表現しておらずそのセクションのヘッダーもしくはタイトルを表しているに過ぎないからですコレクションビューのリストのレイアウトについてお話しましたので表現の話をしましょう iOS 14では新しいUICollectionView セルサブクラスを導入していますこれは UICollectionViewListCellといいます
これはぜひとも申し上げたいのですがコレクションビューの構成の性質上リストセルは通常のコレクションビューセルが表示できる場所ではどこでも使用できますまたリストセクションと一緒にどの UICollectionViewセルを使うことも可能です皆さんの必要なAPIの断片的に拾い集め目的通りの設計を達成することもできますリストセルが役に立つそのピースを見てみましょう
セパレーターのインセットやセルのコンテンツのインデントを構成するたにリストセルにはきめ細かいサポート機能が実装されています UITableViewとは対照的ですがスワイプアクションも今はセルの機能の一部となっています
更に素晴らしく改善強化したアクセサリAPIもご用意していますそしていろいろと全容を学習できるデフォルトシステムコンテンツとバックグラウンドコンフィギュレーションへのアクセスが “Modern Cell Configuration”にて可能です
“SEPARATORS” それではここでセパレータについてお話をしましょう
ここでセルの例をご覧いただけますが画像とラベルそしてその下にあるセパレータをセルが描画していますこれはよくあるレイアウトですしかしここで皆さんお気づきのようにここでご覧になれるレイアウトは実際には正確なものではありませんセパレータはセルの主要なコンテンツとラインアップするようにできておりこの例は画像ビューではなくどちらかというとセルのラベルになりますリーディングサイドではセパレータはインセットされこのラベルの端と一致するようにできています “SEPARATOR INSET” このようにです “PRIMARY CONTENT” UITableViewではセパレータインセットと呼ばれるポイントベース値を提供することで行いますこのAPIを導入した時にはこれはとても簡単でしたというのもラベルのXオフセットをマニュアルで計算するという方法がすでにあったので同じ方法を使って同じ値でセパレータインセットの構成もできたからですしかしながらこの最新の自動レイアウトの時代では皆さんには安全なエリアインセットやレイアウトマージンダイナミックフォントサイズやSFシンボルがありますのでそう簡単にはいきません今日の環境は高度にダイナミックなのでこれら値はどの瞬間にも変わりえるのですダイナミックフォントやSFシンボルユーザーのフォントサイズの好みにより画像のサイズも変わりますしラベルの位置も変えることができます予めラベルがどのように表示されるかをすべて予想することは非常に難しいのですリストセルでセパレータレイアウトガイドと呼んでいる新しいコンセプトを導入していてますこのレイアウトガイドは UIKitにある既存のレイアウトガイドとは挙動が違いますコンテンツをこのレイアウトガイドに嵌めるのではなくこのレイアウトガイドをコンテンツに嵌めるので今までのレイアウトガイドを操作するときに慣れている操作とは逆になりますこのセパレータガイドを設定する最も簡単な方法はセルのレイアウトを最初に構成し意図通りの外観のセルができたなら追加の制限を一つ加えますセパレータレイアウトガイドのリーディングアンカーをラベルリーディングアンカーへ繋ぐかまたはセル内の主要コンテンツへと繋げますリストセルとリストセクションはセルの主要コンテンツに対しセパレータが自動で一致するようにします
ここで肝心なのはシステム提供のコンテンツコンフィギュレーションを使っている場合これは自動で行われますのでここは何もしなくて結構ですでもカスタムセルレイアウトを使用している場合はセパレータが正確な位置にあることを担保する簡単な方法なのです
“SWIPE ACTIONS” ではスワイプアクションについてお話しましょう
UITableViewとは対照的にスワイプアクションは今ではリストセルのフィーチャーですセルのコンテンツと構成しますセルの画像ビューまたはラベルをどこで構成しようとリーディングスワイプアクションまたはトレーリングスワイプアクションを設定できます
これにはセルとレイアウト間の通信が必要なのでスワイプアクションはセルがリスト構成を使用して構成されたセクション内にレンダリングされる場合にのみサポートされます
UITableViewにあったようなスワイプアクション APIのダイナミックな特徴が必要な場合はスワイプが開始される直前にスワイプコンフィギュレーションだけを作成したりリーディングまたはトレーリングスワイプアクションコンフィギュレーションゲッターをオーバーライドしてからコンフィギュレーションをそこに作成しますユーザーが実際このセルをスワイプしようとしたときにゲッターだけを呼び出すようにしなくてはなりません
ここで一つ警告ですスワイプアクションのアクションハンドラで構成しているセルのインデックスパスは絶対にキャプチャーしないようにしてくださいこのインデックスパスは安定した識別子ではありませんその上のコンテンツを挿入や削除するときに必ずこのセルのインデックスパスは変化しますそしてこのセルは必ずしも再読み込みされないのですスワイプアクションのトリガーをかけたとき皆さんが格納されたインデックスパスを使いセルのデータモデルを呼び出そうとする場合は実際はそれ以外のセルのデータを操作しているのかもしれませんこれは削除アクションをする時とても危険ですというのも間違ったデータを削除しているかもしれないからですその代わり直接にデータモデルをキャプチャするかこのセルのコンテンツを特定するのに使う安定した識別子をキャプチャすることです差分最適データソースとその安定したアイテム識別子それとiOS 14の新規のセル登録タイプがこれには適しているでしょう
次はアクセサリについてお話します “ACCESSORIES” UITableViewでは APIのアクセサリはかなり限られていましたアクセサリタイプとアクセサリビューへアクセスはできましたがこれらは相互排他的で該当セルのトレーリングサイドだけに関連していました
リストセルは多岐にわたる新しいアクセサリタイプを提供しておりセルのトレーリングとリーディングの両サイドにアクセサリの構成もできますし同じサイドに複数のアクセサリを構成することも可能です
更に UITableViewセルのアクセサリがどちらかというとデコレーションビューのような場合でもリストセルの中では機能を有効化できます
例えば再オーダーアクセサリを入れたセルを構成する場合は再オーダーモードに自動でコレクションビューを入れますこれはユーザーがこのアクセサリをタップした時には必要な再オーダーコールバックを実装するだろうと想定して作りました “REORDER” “DELETE” もう一つの例は削除アクセサリーですが以前は削除編集コントロールとして知られていましたユーザーがこのアクセサリをタップするとリストセルは自動でセルで構成されているトレーリングスワイプアクションを表示します
そしてここに全く新規のアクセサリがありますこれはアウトライン開示アクセサリですこのアクセサリをユーザーがタップするとセルは自動でデータソースと通信しこのセルの下層を拡張または畳み込みますこれは新しいセクションスナップショット APIの使用が必要ですがこれについては“Advances in Diffable Data Source.”をご参照ください
ではここで APIの動きを見てみましょう皆さんのセルのアクセサリを構成するためにリストセルにあるたった一つのアクセサリプロパティを UIセルアクセサリのエリアへ設定するだけでできますこの例として開示インジケータと削除アクセサリのあるセルを構成してみましょうシステムは開示インジケータは常にセルのトレーリングサイドにあるべきだと認識しており反対に削除アクセサリはリーディングサイドにあると認識していますそして UIKitは自動でアクセサリを正しい順序に整理し適切な側に表示します
更にシステムは開示インジケータが常に可視状態であるべきであることも認識しておりまた削除アクセサリはコレクションビューがモードを編集時に以外で可視化してはいけないということを認識しています従って UIKitは編集モードに入るまたはそこから出るとき自動で削除アクセサリのインまたはアウトをアニメ化します
私たちはこれらシステムデフォルトを多く提供していますがもちろんそのほとんどをカスタム化することができます例えば編集モードではないときだけ開示インジケータを可視化したいとき簡単です表示パラメータを whenNotEditingに設定してくださいこれは超宣言型APIですので UIKitが皆さんの代わりにすべての状態を管理しますご覧になったようにリストは高度にカスタム化されたレイアウトですのでモジュール化されておりフレキシブルです適用は非常に簡単ですさてサンプルコードを見てみていろいろとやってみましょうここでは多くの発見がありますそしてこの新しいAPIに慣れたらご自身のアプリケーションのレイアウトどこが強化できるか考えてみてください既存のテーブルビューのどこを置き換えカスタム構成レイアウトと組み合わせるリストの柔軟性の利用を考えてみてくださいもちろん UICollectionViewについて他のビデオもたくさんあるのでチェックしてみてください iOS 14のコレクションビューには驚くような素敵なフィーチャーが盛りだくさんです
ご覧いただきありがとうございました

// Simple setup
     
let configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
let layout = UICollectionViewCompositionalLayout.list(using: configuration)

4:25 - Per-Section Setup

// Per section setup
     
let configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
let section = NSCollectionLayoutSection.list(using: configuration, layoutEnvironment: layoutEnvironment)

4:40 - Per-Section Setup full

// Per section setup

let layout = UICollectionViewCompositionalLayout() {
    [weak self] sectionIndex, layoutEnvironment in
    guard let self = self else { return nil }

    // @todo: add custom layout sections for various sections
  
    let configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    let section = NSCollectionLayoutSection.list(using: configuration, layoutEnvironment: layoutEnvironment)
    return section
}

5:49 - Header Mode Supplementary

var configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
configuration.headerMode = .supplementary
let layout = UICollectionViewCompositionalLayout.list(using: configuration)

dataSource.supplementaryViewProvider = { (collectionView, elementKind, indexPath) in
    if elementKind == UICollectionView.elementKindSectionHeader {
        return collectionView.dequeueConfiguredReusableSupplementary(using: header, for: indexPath)
    }
    else {
        return nil
    }
}

6:51 - Header Mode Supplementary Optional Header

let layout = UICollectionViewCompositionalLayout() {
    [weak self] sectionIndex, layoutEnvironment in
    guard let self = self else { return nil }

    // check if this section should show a header, e.g. by implementing a shouldShowHeader(for:) method.
    let sectionHasHeader = self.shouldShowHeader(for: sectionIndex)
  
    let configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    configuration.headerMode = sectionHasHeader ? .supplementary : .none
    let section = NSCollectionLayoutSection.list(using: configuration, layoutEnvironment: layoutEnvironment)
    return section
}

7:07 - Header Mode First Item In Section

var configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
configuration.headerMode = .firstItemInSection
let layout = UICollectionViewCompositionalLayout.list(using: configuration)

11:40 - Swipe Actions

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Model> { (cell, indexPath, item) in
    // @todo configure the cell's content
    
    let markFavorite = UIContextualAction(style: .normal, title: "Mark as Favorite") {
        [weak self] (_, _, completion) in
        guard let self = self else { return }
        // trigger the action with a reference to the model
        self.markItemAsFavorite(with: item.identifier)
        completion(true)
    }
    cell.leadingSwipeActionsConfiguration = UISwipeActionsConfiguration(actions: [markFavorite])
}

14:55 - Accessories

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String> { (cell, indexPath, item) in
    // @todo configure the cell's content
                                                                                            
    cell.accessories = [
        .disclosureIndicator(),
        .delete()
    ]
}

15:51 - Accessories w/ Parameters

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String> { (cell, indexPath, item) in
    // @todo configure the cell's content
                                                                                            
    cell.accessories = [
        .disclosureIndicator(displayed: .whenNotEditing),
        .delete()
    ]
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC20

WWDC19