ハイライト
iOS 14 では、背景/コンテンツ構成と、コレクション ビューとテーブル ビューのセルの構成状態が導入されています。開発者は軽量の値型構成を使用して、コンテンツ、背景、状態の外観を記述します。 UIKit は、新しい構成をビューにワンショットで適用します。
主要内容
iOS 13 では、最も一般的なテーブル セル パターンは、組み込みの imageView そして textLabel の上 UITableViewCell。モデルは単純ですが、コンテンツ、スタイル、およびビュー階層をセル クラスに結び付けます。コレクション ビューのセル、ヘッダー、またはフッターに移動すると、コードをそのまま再利用することはできません。
iOS 14 では、これを構成オブジェクトに分割します。コンテンツ構成では、画像、テキスト、およびテキスト スタイルについて説明します。背景設定では、背景の塗りつぶし、ぼかし、ストローク、コーナーの半径について説明します。構成は、作成コストが低い軽量の Swift 値タイプであり、セルに設定し直すとレンダリングが行われます。
これにより、重要な変更が可能になります。同じ構成コードが、テーブル ビューのセル、コレクション ビューのセル、およびコンテンツ構成をサポートするヘッダー/フッターに対して機能します。開発者は新しい構成を取得し、コンテンツを入力し、割り当てます contentConfiguration、UIKit は内部ビューを更新します。
The harder part is state.リスト セルはハイライト、選択、無効化、フォーカスを行い、編集、スワイプ、展開、またはドラッグ アンド ドロップ状態に入ることができます。 iOS 14 では、構成状態を使用して特性、システム状態、カスタム状態を組み合わせ、構成が状態から新しい外観を生成できるようにします。
The API goal is not another wrapper layer.設定を集中管理するため、セルは状態が変化するたびに現在の状態から外観を再生成します。講演の実践は直接的です。古い構成やパッチを読まないでください。常に新しい構成から開始し、必要なプロパティを設定して、一度適用します。
詳細
サブビューの直接セットアップからコンテンツ構成まで
(01:31) 古いパターンは、組み込みのサブビューに触れます。 UITableViewCell。
cell.imageView?.image = UIImage(systemName: "star")
cell.textLabel?.text = "Hello WWDC!"キーポイント:
cell.imageViewセル画像を設定します。cell.textLabelセルの主テキストを設定します。- このコードは以下に依存します
UITableViewCell組み込みのビュー。
(01:59) 新しいパターンは、セルにデフォルトのコンテンツ構成を要求し、コンテンツを設定してから、それを割り当て直します。
var content = cell.defaultContentConfiguration()
content.image = UIImage(systemName: "star")
content.text = "Hello WWDC!"
cell.contentConfiguration = contentキーポイント:
defaultContentConfiguration()現在のセルとテーブル ビュー スタイルのデフォルト スタイルを含む新しい構成を返します。content.imageそしてcontent.textローカル構成値を変更します。セルはまだ更新されていません。cell.contentConfiguration = contentセルに画像とテキストをレンダリングさせます。- この構成コードは、コンテンツ構成をサポートするコレクション ビュー セルおよびヘッダー/フッターでも機能します。
構成状態で外観を更新
(13:10) バックグラウンドとコンテンツの設定は、状態に基づいて更新されたコピーを返すことができます。
let updatedConfiguration = configuration.updated(for: state)キーポイント:
updated(for:)現在の構成状態を受け取ります。- 新しい構成を返します。オリジナルは変更されていません。
- すでに設定したプロパティは、更新された構成に保持されます。
- デフォルトでは、セルの構成状態が変化すると、システムは自動的に更新された構成を要求し、それを再適用します。
(16:33) カスタム状態の外観については、ロジックを集中管理します。 updateConfiguration(using:)。
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
}キーポイント:
updateConfiguration(using:)セルが最初に表示される前、および構成状態が変更される可能性があるときに呼び出されます。defaultContentConfiguration().updated(for: state)最初に現在の状態のシステムのデフォルト スタイルを取得します。content.imageそしてcontent.text現在のアイテムの内容を入力します。state.isHighlighted || state.isSelectedハイライト状態と選択状態のみを処理します。self.contentConfiguration = contentこのステート ラウンドの設定を適用します。- 電話
setNeedsUpdateConfiguration積極的に再構成を要求します。
デフォルトの背景とコンテンツのスタイルを選択する
(19:45) コレクション ビューのリスト セル、テーブル ビューのセル、およびテーブル ビューのヘッダー/フッターは、コンテナー スタイルからデフォルトの背景設定を自動的に取得します。コンテンツ構成はセルから取得することも、型から直接取得することもできます。
var background = UIBackgroundConfiguration.listSidebarCell()
var content = UIListContentConfiguration.sidebarCell()キーポイント:
UIBackgroundConfiguration.listSidebarCell()サイドバーセルのデフォルトの背景設定を作成します。UIListContentConfiguration.sidebarCell()サイドバーセルのデフォルトのコンテンツ構成を作成します。- グループ化、差し込みグループ化、プレーン、サイドバー プレーン、およびサイドバー リストの外観間の視覚的な違いは、デフォルトの背景とコンテンツの構成に起因します。
- コンテンツ構成はダイナミックタイプをサポートします。アクセシビリティ テキスト サイズを最大にすると、テキストが画像の周りを回り込み、コンテンツにさらに多くのスペースが与えられます。
(22:32) リスト コンテンツの設定は自己サイズ設定セルで機能します。レイアウトの余白とパディングを通じて固有の高さに影響を与えるため、セルはデバイス サイズ、ダイナミック タイプ、コンテンツのボリュームに合わせて高さを自動調整します。
(23:44) 複数行のセルに異なる幅の画像がある場合、テキストの位置合わせが失われます。この講演のアプローチでは、画像に対して同じ予約されたレイアウト幅を指定し、画像を固定領域の中央に配置し、同じ領域を基準にしてテキストをレイアウトします。 SF シンボルは、標準の予約済みレイアウト サイズを自動的に取得します。非シンボル画像には、必要に応じて開発者のリクエストが必要です。
移行時に古いプロパティを混合しないでください
(24:52) 古いセルを移行するときは、同じ外観に対して 2 つのスタイル設定アプローチを使用しないでください。バックグラウンド構成リセットの設定 backgroundColor そして backgroundView に nil;これらの古いプロパティを逆に設定すると、バックグラウンド構成にも影響します。
コンテンツ構成は、次のような組み込みコンテンツ サブビューも置き換えます。 imageView、 textLabel、 そして detailTextLabel。これらの古いコンテンツ プロパティは将来のリリースでは非推奨になるため、講演ではコンテンツ構成を明示的に推奨しています。
カスタム ビューでのシステム コンテンツのレンダリングを再利用する
(26:23) より複雑なセルの場合は、 UIListContentView 直接、カスタム ビューの横に配置します。
var content = UIListContentConfiguration.cell()
// Set up the content configuration as desired...
let contentView = UIListContentView(configuration: content)キーポイント:
UIListContentConfiguration.cell()標準のセルコンテンツ構成を作成します。- コメントの場所は、画像、テキスト、スタイル、レイアウトのプロパティを設定する場所です。
UIListContentView(configuration:)この設定からレンダリング ビューを作成します。- このビューはカスタムセルに入れることも、プレーンに単独で入れることもできます
UIStackView。
セルが完全にカスタムの場合でも、システム構成が役に立ちます。デフォルトのフォント、色、余白のソースとして使用します。高度なシナリオでは、一致するコンテンツ ビューを使用してカスタム コンテンツ構成を作成できるため、セルはそれをリスト コンテンツ構成のように使用できます。
重要ポイント
1. 自動状態適応機能を備えた iPad サイドバー
手順: 選択および強調表示された項目のテキストとアイコンの色が自動的に切り替わる、プロジェクト、タグ、またはフォルダーのサイドバーを作成します。
実行する価値がある理由: この講演では、サイドバーのリスト セルが強調表示、選択、その他の状態でデフォルトの外観が異なることを示し、色のオーバーライドを示します。 updateConfiguration(using:)。
開始方法: コレクション ビュー リストを使用してサイドバーの外観を作成します。セル内から始まります defaultContentConfiguration().updated(for: state)、アイテムのアイコンとタイトルを設定し、選択/強調表示された場合にのみ色合いとテキストの色を上書きします。
2. Dynamic Type に適した設定ページ
対処方法: 各行に大きなサイズで自動的に拡大されるアイコン、タイトル、説明テキストが含まれる設定ページまたは環境設定ページを作成します。
実行する価値がある理由: コンテンツ構成では、セルの自動サイズ調整、レイアウト余白、パディング、およびアクセシビリティ テキスト サイズでの特別なレイアウト モードがサポートされています。
開始方法: を使用します defaultContentConfiguration() 画像、テキスト、およびオプションのセカンダリ テキストを設定します。セルの高さを固定しません。高さがコンテンツに従うように、構成上のマージンとパディングによってレイアウトを制御します。
3. ビジネス状態を含むメッセージ リスト
何をすべきか: アーカイブ済み、フラグ付き、処理済みなどのビジネス状態がセルの外観に直接影響するメッセージまたはトランザクション リストを作成します。
実行する価値がある理由: 構成状態はカスタム状態をサポートします。この講演では、セル構成に参加する状態の例として、アーカイブ/フラグが設定されたメッセージング アプリと処理された支払いアプリを使用します。
開始方法: ビジネス状態を構成入力として渡します。で updateConfiguration(using:) 状態を読み取り、最初にシステム状態の外観を取得します updated(for:)をクリックし、ビジネスのアイコン、タイトル、色を設定します。
4. 標準コンテンツとカスタムバッジセル
手順: 左側にシステム イメージ/テキスト/セカンダリ テキスト レイアウト、右側に独自の進行状況、バッジ、またはステータス ラベルを含むリスト セルを作成します。
実行する価値がある理由: UIListContentView カスタム ビューと並行して、システム コンテンツ構成のダイナミック タイプ、デフォルト スタイル、および状態の更新を維持できます。
開始方法: 作成する UIListContentConfiguration.cell()、コンテンツの設定、生成 UIListContentView(configuration:)、カスタム バッジ ビューとともにセル ビュー階層に配置します。
関連セッション
- UICollectionView の進歩 — ここから始めて、iOS 14 のコレクション ビュー機能がデータ、レイアウト、コンテンツのプレゼンテーションをどのようにカバーしているかを確認してください。
- UICollectionView のリスト — 構成レイアウトを使用してリストとサイドバーがテーブルの外観を置き換える方法を続けます。
- 差分可能なデータ ソースの進歩 — データ側の機能を追加します。セクション スナップショットと、リストとアウトラインの変更に対する並べ替えです。
コメント
GitHub Issues · utterances