モダンなセルの構成

モダンなセルの構成

Appで迅速に動的なインターフェイスを構築する、コレクションビューやテーブルビューセルの構成に関する新しいテクノロジーについて説明します。コンテンツを持つセルを簡単に作成し、共通のスタイルを適用するために使用できるコンフィグレーションタイプについて学習します。パワフルなAPIを活用して、異なるステートに対して、セルのアピアランスをカスタマイズしましょう。コードを簡略化し、バグを取り除き、パフォーマンスを向上させるパターンやベストプラクティスを学びましょう。

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

WWDC22
- UIKitでSwiftUIを使用する
WWDC21
- iPadキーボードナビゲーション
- tvOSにおける優れた再生体験の提供
WWDC20
ダウンロード

“こんにちは　WWDC2020” こんにちは　WWDCへようこそ “最新のセル構成” “最新のセル構成”について話します UIKitエンジニアのタイラーです iOS 14ではUICollectionViewに新しい機能を導入していますこれらは基盤技術の上に構築され― 大きく３つのカテゴリに分類できますデータを入力する方法レイアウトを定義する方法コンテンツを表示する方法です “Advances in Collection View” セッションで― これらの新機能を紹介していますこのセッションではビュー構成に焦点を当てますセルのコンテンツとstylingを構成するための新しいAPIですまずは基本をカバーし― 新しい構成を使ってセルを設定するのがいかに簡単かお伝えします
次に“configuration state”と呼ばれる新しい概念を説明しますこれは構成と共に機能し stateごとに異なる外観を得ることを容易にします
最後に２つの構成タイプを詳しく見ていきますバックグラウンド構成とコンテンツ構成ですそれらを使用し詳細を説明します最新のセル構成APIの話に入る前に― 例を簡単に見てみましょう iOS 13でtable view cellを構成する方法です
UITableViewを使ったことがある方は見覚えがあるはずですここではビルトインのimageViewプロパティと textLabelプロパティを使用し― UITableViewCellで画像とテキストを表示しますこれはセル構成の意味を示すための単純な例ですそれを念頭に置いて― 同じことを新しい構成APIを使ってどのように行うか見てみましょう
これがコンテンツ構成を使ってセルを設定する方法です以前と同じように見えますが２行のコードが追加されています細かく説明しますまずdefaultContentConfiguration()をセルに要求しますこれで常に何も設定されていないフレッシュな構成に戻りますしかしこの構成には― セルとtable view styleに基づいた default stylingがあります stylingとその他のコンテンツ構成の機能についてはまた話します今はコンテンツ構成に画像とテキストを設定するだけですここは非常に親しみやすいはずですコンテンツを設定したら残るステップは１つ contentConfigurationプロパティに設定し構成をセルに適用しますするとセルが更新され指定した画像とテキストが表示されますこのコード行の前だと画像とテキストの設定は― この“コンテンツ”変数に格納された構成のローカルコピーのみを変更しましたコンテンツ構成を使っているため― UIImageViewやUILabelに直に触れることはありませんすべてのプロパティは構成自体に設定されますコンテンツ構成を使ってセルを設定することに何の得が？１つはtable view cellを構成するためにここに表示されるコードですこれはcollection view cellなどあらゆるセルの構成に使うものと同じで― 実際コンテンツ構成をサポートするすべてのビューで同じコードが使えますセルではないtable viewのヘッダやフッタなども含まれますなぜこんなことが可能なのか？構成がコンポーザブルだからです以前のUITableViewCellのように全機能がセルクラス自体に組み込まれる代わりにこれらの標準のセルレイアウトと外観は独立した部分として利用可能になりましたそれらをサポートする任意のセルやビューに直接接続できます
では実際にコードを実行し― 構成によって得られる他の利点を説明しましょう
collection view listの中にセルがありますマルチカラムのiPadアプリケーションの新しいサイドバーの外観を使っていますセルに構成した星の画像とテキストが含まれているのが分かりますこのセルをいじってみるとさらに面白くなりますセルをタッチダウンするとハイライト表示されますそして持ち上げるとセルが選択されますこれらはセルのstateのほんの一例にすぎませんセルを追加してみましょうそれらを手動で様々なstateにして外観がどう変化するか見てみますこれは同じコンテンツ構成ですが― 異なるstateの異なるセルすべてに適用されますこれらのセルのテキストを入れ替え各セルのstateを示しましょうご覧のとおりsidebar list cellの default stylingは― stateによって大きく異なります構成を使ってセルを設定すると― これだけ様々な外観をすべて自動的に取得しますこの仕組みについてはまた話します新しい構成を試してみましたが― 正確には何なのでしょう？
構成はビューの外観を特定のstateによって示しますコンテンツ styling メトリクス挙動などです構成自体は単なるプロパティの集まりですビューまたはセルに適用してレンダリングするまで何もしませんまた先ほど説明したように構成はコンポーザブルですそれらをサポートするあらゆるタイプのセルやビューで使用できます構成には２つのタイプがありますバックグラウンドとコンテンツの構成ですこれら２つのシステム構成が提供する機能のいくつかを見てみましょうバックグラウンド構成には複数のプロパティがあり― 一般的な背景の外観を素早く指定できます数行のコードで背景の塗りつぶしの色をカスタマイズでき― 視覚効果を設定して絶妙なぼかしやストロークや丸みを帯びた角を加えられますもっとカスタムしたいなら独自のビューを提供することで行えますリストコンテンツ構成は標準のレイアウトをセルやヘッダやフッタに与えますおなじみのUITableViewCellスタイルに似ていますしかしリストコンテンツ構成はさらに強力です画像テキストとオプションの二次テキストをサポートし― それぞれのカスタマイズのために多くのプロパティを公開しますより高レベルの挙動も提供します大量のテキストを表示する柔軟なレイアウトや― アクセシビリティ･テキストサイズ用の特別なレイアウトモードですこれら２つの構成タイプは密接に関係しており― いくつか共通の設計原則があります
最も重要な原則の１つは構成が軽量で非常に安価に作成できることです Swiftでこれらは値型ですつまり構成がある時それは常にあなただけのものですあなたが構成に加える変更は― その構成をセルに設定するまで他のものには影響しません
構成は軽量なので常にフレッシュな設定から始める必要がありますこの例のようにセルに defaultContentConfiguration()を要求しますこれはセルを初めて構成する時だけでなく― すでに構成されているセルを更新したい場合にも当てはまります毎回フレッシュな構成から始めて新しいstateに設定します構成を使用する時古いstateについて考える必要はありません古い構成が適用されているか気にしないでください既存の構成を取得して変更を加えようとしないでください毎回フレッシュな構成から始め好きなように設定しセルに適用します UIKitを長く使っている方は違和感を抱くかもしれませんしかしこの考え方が分かるととても楽になりますセルに構成を適用すると UIKitが面倒な作業を全部やってくれます変更点を把握し必要に応じてビューを効率的に更新します先ほどコードを実行した時のように― 構成により様々なstateのデフォルトの外観が得られますしかし構成も堅牢なインフラストラクチャの上に構築されており― これらのstateの外観をカスタマイズするために使用できますこれについての詳細はまた話します
構成はほんの数行のコードで高度な挙動にアクセスさせてくれます背景の外観の変化をアニメ化したい場合― アニメーションの中に新しい背景構成を設定するだけでいい
使いやすいだけではありません構成のデザインは全クラスのバグを排除します複雑なstateとトランジションを扱う時は特にです今適用されている構成が真実であることは常に分かります新しい構成を設定するとその新しい構成は一度に適用されます
最後に構成はパフォーマンスのためにゼロから構築されますこれはスムーズなスクロールを保証するために重要です UIKitはビューとレンダリングの管理を担当するため― 多くの内部パフォーマンス最適化を実装できました無料で得られる標準装備としてです構成の基本が分かったところで新しい概念について話しましょう configuration stateです configuration stateはセルやビューの配置に使う様々な入力のことですどんな入力か？ビューを構成する最も一般的な入力は UITraitCollectionのtraitです例えばsize classやuser interface style content size categoryなどですこれらのtraitに加えて― セルとビューは様々なstateで存在しますセルが選択されたりドラッグ＆ドロップの対象となったり一時的に無効にされたり UIKitで一般的なstateの一部ですこれらに加えアプリケーションにはそれぞれのcustom stateがあります皆さんのアプリケーションとそのドメイン固有の様々なstateのことです例えばセルを構成する際― メッセージングAppでメッセージを保管するかフラグを立てるか知る必要がある決済Appでどの取引を処理すべきか view modelを使ってセルのコンテンツを追加するなら― view modelを custom stateと見ることもできますこれらすべてが configuration stateを形成します様々なtraitやcustom stateすべてのコレクションが― １ヵ所にまとめられたものです configuration stateはどこにあるか？コレクションやtable viewの各セルやヘッダやフッタには― 独自のconfiguration stateがありますここにはセルが３つそれぞれconfiguration stateの中身は違うかもしれません
では一体どんなものなのか？ご覧のとおり２種類ありますこのヘッダのようなビュー用のタイプとセル用のタイプがあります
こちらがview configuration stateです trait collectionから始まり４つのstateがあります highlighted selected disabled そしてfocused これらは単純なブーリアンです最後に任意のcustom statesがありますビューの構成に使いたいstateやデータを追加できる― key value storageです
これがview configuration stateですではcell configuration stateは？ cell configuration stateは view configuration stateからすべてを受け取りセル固有のstateを追加するものですセルがeditingやswipedや― expandedやdrag and dropのstateでもです configuration stateでできる重要なことの１つは― 新しいstateのために構成をアップデートすることですバックグラウンドやコンテンツ構成に― アップデートされたものを返すよう要求できますこれにより新しいstateを反映したプロパティで― 新しい構成のコピーが返されます例えばバックグラウンド構成でその色が変わった時あるいはコンテンツ構成で画像のtint colorとtext colorが変わった時アップデートされた構成を要求しても元の構成は変わりませんカスタマイズしたプロパティも― アップデートされた構成で維持されます構成のプロパティは― 一度設定するとロックされると思ってください冒頭でお見せしたデモでは― コンテンツ構成が外観をアップデートしていました
これは自動構成アップデートのおかげですセルのバックグラウンドかコンテンツ構成を設定した時セルのconfiguration stateが変わると自動で構成にアップデートを返すように要求し― 新しい構成をセルに再適用しますこれらのプロパティでこの挙動を制御できます
自動アップデートは各stateのdefault stylingを得るのに便利ですでも外観をstateに合わせてカスタマイズしたいなら― 自動アップデートを無効化し自分で構成をアップデートできますでは構成をアップデートするコードをどこに置くか？コレクションとtable view cellに関する新しいメソッド― updateConfiguration(using state:)を使いますセルサブクラスでオーバーライドするためのメソッドです渡されたstateに基づいてセルを構成するコードをここに置けますこのメソッドは常にセルが表示する前に呼び出され― configuration stateが変わるたびに呼び出されますそして新しいstateに合わせて構成できます構成を使う時は― 過去のstateを気にする必要はありません毎回新しい構成にして― プロパティを設定してセルに適用すればいい構成はその設定とセルへの適用を扱う場所が― コードに１ヵ所だけあるほうがいいでしょうカスタムセルサブクラスを使っているなら― この新しいメソッド updateConfiguration(using state:)が最適です他の設定やアップデートを集中させるには最適の場所です例えば新しいcollection view list cellを使うなら― このメソッドでセルアクセサリのtint colorを別のstateに合わせてアップデートできますセルを再構成したい時は― setNeedsUpdateConfiguration()を呼び出しアップデートを要求します
このメソッドでどうセルを設定し― 手動で構成をアップデートするのか例を見ましょう
まずフレッシュな構成を得るため― セルにdefaultContentConfiguration()を要求しますこれで新しいstateに合わせてアップデートされますこれによりstateに合わせた system default stylingと構成が得られます次に表示するitem用の画像とテキストの構成を設定します次にカスタマイズを適用しますここではstateがハイライトか選択されているか確認しますもしそうなら画像とテキストの色を白にします他の場合は色を指定しません構成のデフォルト色を使います
最後に新しい構成をセルに設定します以上です stateが変わるたびにこのメソッドが呼び出され― 新しいstateの新しい構成が適用されますこれがコンテンツ構成の外観を stateに合わせてカスタマイズする方法です同じようにバックグラウンド構成もカスタマイズできます
この例ではstateごとに異なる画像とテキストを設定していますただ色を変える方法はもう１つあります color transformerと呼ばれる新しいタイプを使います color transformerはある色を受け取り― その色を何らかの形で修正して別の色を返します例えば元の色のグレー･スケールを返すなどです color transformerは単純な機能ですがとてもパワフルです同じ色の入力で異なるcolor transformerから様々な変異を作成できるからですこのようにstateごとに異なる外観を作ることができます特定のスタイルやstateにはデフォルトでプリセットのcolor transformerがあり― そのstate固有の外観が与えられます color transformerと入力した色とで― 実際に目にするresolved colorが作られます以上が構成がstateに合わせて外観をアップデートする方法でした次はバックグラウンドとコンテンツ構成を使う際の― 詳しい話を見てみましょう
collection view list cellやtable view cellや table view headers and footersは― どれもデフォルトバックグラウンド構成を― リストやtable viewに基づいて自動で設定します何もしなくても求めるバックグラウンドの外観になりますコンテンツ構成は少し違いますセルにデフォルトで自動で適用させず― defaultContentConfiguration()メソッドでセルのスタイルに基づき― 前出の例のようにフレッシュな構成を得られます
でもバックグラウンドとコンテンツ構成には― デフォルト構成を好きなスタイルに合わせて簡単に要求できます UIBackgroundConfigurationと― UIListContentConfiguration typeに直接行きますここにsidebar style list cellの例がいくつかあります同じようなメソッドが他のセルやヘッダやフッタのスタイル用にありますでは実際にスタイルを見てみましょう
これはステッカーカテゴリのリストですこのリストはサイドバーの外観で構成されていますどのセルも― スタイルに合わせたバックグラウンドとコンテンツ構成があります操作すると stateに合わせセルの外観がアップデートされるのが見えます
でもサイドバースタイルはcollection view listに使える外観の１つに過ぎません別の外観に構成するとどうなるか見てみましょうこれは同じリストをgroupedに構成したものこれはinset groupedのものそしてこれがplainの外観です UITableViewで見覚えがあるでしょう collection view listは新しいスタイルであるsidebar plain styleと元のサイドバーの外観をサポートします異なるリスト外観のvisual stylingは― デフォルトのバックグラウンドとコンテンツ構成から来ていますではgroup styleに切り替えましょう個々のセルを見やすくしますそしてテキストサイズ設定を変えるとタイプサイズが― どうなるか見てみましょうデフォルトだとすべてが変更に対して同時に対応しますテキストサイズを大きくすると全体のレイアウトもそれに対応しますそしてサイズを最大にすると― セルレイアウトが特別なモードになりますテキストが画像を包みコンテンツに与えられたスペースを最大限に使いますコンテンツ構成はこうしたレイアウトをサポートするため作られていますどういう仕組みか見てみましょう
コンテンツ構成はself-sizing cellで使えるよう設計されていますその高さは柔軟で― 構成と環境に依存しますアプリケーションの外観をよりよくします異なるデバイスサイズやdynamic typeサイズコンテンツの量やタイプに対応しますコンテンツ構成でレイアウトマージンの制御もできます青で示しましたオレンジで示したpaddingプロパティもですコンテンツと共に― これらのものが内部の高さを決定しセルがどうself-sizeするかに影響します固定の高さを強制せずコンテンツ構成でこれらのプロパティを使いレイアウトに影響させ高さをダイナミックに適応させましょうもう１つ大事なレイアウトの概念があります例を見てみましょうここに３つのセルがありますそれぞれ画像とテキストがありコンテンツ構成を使っています今は何も問題ありませんではここで違う画像を使うとします画像が同じサイズではありません幅が少し違います画像とテキストが一直線になっていませんその理由は画像がレディングで整列されておりテキストが各画像の端から同じだけのpaddingで置かれているからです一直線にするには― 各画像にreserved layout sizeというものを指定しなければなりません各コンテンツ構成で画像に同じreserved layout widthを設定すると確保されたスペース内で画像が水平方向に中心に置かれますこの絵では赤い点線の間の距離が各画像における― reserved layout widthです reserved layout sizeは実際の画像のサイズに影響しません画像のほうが大きい場合― 範囲からはみ出て表示されます画像にreserved layout sizeを使うとテキストも直ります各セルの画像のreserved layout areaに対して位置を取るからです symbol imageを使うと― UIKitが標準のreserved layout sizeを自動で適用します必要であれば non-symbol imageにも手動で要求できます以上がlist content configuration layoutで知っておくべきことです次は構成を導入する際念頭に置くべきディテールを確認しましょうアップデートし移行させる既存のコードがあるなら構成は時に既存プロパティにおいて相互排他的であることをお忘れなくバックグラウンドを設定すると― バックグラウンドの色と viewプロパティがゼロにリセットされます逆も同じことが言えますだからバックグラウンド構成を― 同じセルで他のバックグラウンドプロパティを設定している他のコードと混ぜてはいけません
そしてUITableViewを使っている場合― コンテンツ構成はセルやヘッダやフッタのサブビューに対して優先されます imageViewやtextLabelや detailTextLabelなどですこれらのレガシーコンテンツプロパティは将来廃止予定ですぜひコンテンツ構成を導入し― そのパワフルな機能や強化されたカスタマイズ性を活用してくださいバックグラウンド構成や list content configuration typeは― とてもパワフルですしかしよりカスタムなことをする必要が今後も時にはあります構成では今まで以上に選択肢がたくさんあります
list content configurationに加え― 関連するlist content viewにもアクセスできますこれがレンダリングを実行します構成を使ってこのビューを作成かアップデートするだけでカスタムビューと一緒にサブビューとして追加することができますこれによりコンテンツ構成機能を活用し― list content viewをカスタムビューの隣に組み合わせられます追加の画像ビューやラベルなどです list content viewはただのUIViewなので― どこでもそれだけで使うことができますコレクションやtable viewの外でもです例えばUIStackViewなどではリストをまったく作っていない場合は？または完全にカスタムなことをする時は？構成なら問題ありませんセル内に完全にカスタムなビューヒエラルキーを構築する時でも system configurationを役立てられます構成はとても軽量なので― デフォルト値のソースとして使えます例えばカスタムビューにコピーするフォントや色やマージンなどに使えます構成を直接適用しなくても構いません
さらに高度な事例として完全にカスタムな content configuration typeと― それをレンダーする content viewクラスを作成できます list content configurationと同じように― どのセルでも custom configurationを使えます custom configurationで今回話したあらゆる機能を活用できます custom configurationに― 自動で新しいstateに合わせてアップデートさせることもできますどれだけセルが複雑でカスタムでも― 構成のパワーを活用できます今回は最新のセル構成の要点を紹介しましたバックグラウンドとコンテンツ構成の使い方の簡単さ同じコードを使い― collection view cellや table view cellを構成できることも見せました構成はビューのアップデートを心配せずに― 表示したいものに注力させてくれます毎回フレッシュな構成から始めて好きなように設定しセルに適用すればあとはUIKitがやってくれます configuration stateを使って― 構成をアップデートし幅広い外観を作れることも見せましたセルの設定にも configuration stateを使えます今日話したことはすべて― ニーズに応じてコンポーザブルで拡張可能にするためのものですぜひサンプルをダウンロードしてこれらの新しいAPIを試してみてくださいバックグラウンドとコンテンツ構成を使って― あなたのアプリケーションのコレクションや table view cellを設定してくださいリストの構築などその他にもいろいろな情報があるので WWDC20のcollection viewセッションをお見逃しなく

cell.imageView?.image = UIImage(systemName: "star")
cell.textLabel?.text = "Hello WWDC!"

1:59 - Configuring a UITableViewCell Using a Content Configuration

var content = cell.defaultContentConfiguration()

content.image = UIImage(systemName: "star")
content.text = "Hello WWDC!"

cell.contentConfiguration = content

13:10 - Updating Configurations

let updatedConfiguration = configuration.updated(for: state)

16:33 - Customizing Appearance for Different States

override func updateConfiguration(using state: UICellConfigurationState) {
    var content = self.defaultContentConfiguration().updated(for: state)
    
    content.image = self.item.icon
    content.text = self.item.title
 
    if state.isHighlighted || state.isSelected {
        content.imageProperties.tintColor = .white
        content.textProperties.color = .white
    }
 
    self.contentConfiguration = content
}

19:45 - Default Configurations

var background = UIBackgroundConfiguration.listSidebarCell()

var content = UIListContentConfiguration.sidebarCell()

26:23 - Creating a List Content View

var content = UIListContentConfiguration.cell()

// Set up the content configuration as desired...

let contentView = UIListContentView(configuration: content)

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

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

リソース

関連ビデオ

WWDC22

WWDC21

WWDC20