コレクションビューレイアウトの最新情報

(音楽)

(拍手)

ようこそ 私はスティーブ･ブリーン UIKitチームのエンジニアです 同僚もいます AppKitチームのトロイと― App Storeチームのダースです

Collection View Layoutの 進歩についてお話します 今日お話しするのは４つ 今の最先端はどんなものか？ どのようにレイアウトを定義するか？ 次に新しいアプローチです iOS tvOS Mac どのプラットフォームでも使えます 次にデモで このAPIを実際に動かしてみせます 最後にこのAPIを最大限に活用する 高度な機能を紹介します

盛りだくさんです 始めましょう ではまず今のUIの現状について 今はどう定義しているのでしょう？ Collection Viewは発表当時 立派なコンセプトがありました 定義に別個の抽象化がありました ２つのクラスが呼応して動いていました 一方はレンダリング もう一方は ものがどこに行くかを決めました Collection View Layoutは 抽象クラスなので活用するには― サブクラス化が必要です CollectionViewFlowLayoutを使いました FlowLayoutは 様々なデザインに対応できました iOS 6の頃は今よりシンプルでした 行配置のレイアウトシステムでした 去年もUICollectionViewの 紹介で話しました 簡単に言うと行配置システムは Layout軸の直交軸上にレイアウトし― スペースが埋まると次の行に並べます シンプルで分かりやすく 簡単に走らせることができます でも今のAppはどうでしょう？

デバイスが増えて画面サイズも変わり 複雑になりました こちらはiOS 13のApp Storeです もし設計を頼まれたらどうします？ まずどう設計しますか？ いろんな選択肢があります Collection Viewもその１つです でも本当に いいフローができるのでしょうか？ そんな疑いはすぐ消えます ここで問題はカスタムレイアウトです 複雑ですし 皆さんの気持ちも分かります 去年 Collection Viewのセッションで カスタムレイアウトの 作り方などを話しましたね レイアウトクラスで 求められるものがいくつかあるので― それについて説明しました パフォーマンスの重要さも話しました アイテムが多い場合は 動作が速くないといけません 話したのは一部です まだ他にも困る場面があるでしょう いくつか挙げると まずSupplementaryとDecoration View ビュータイプのうちの２つですが 使うのに少しコツが必要です Self-sizingも苦労するでしょう 詳細は後ほど 今年は新しい 具象レイアウトクラスを用意しました ピアとしてフローに並びます これをCompositional Layoutと呼びます そして… (拍手) まだ見てませんよ

これは何をするものでしょう？ まず少し哲学を Compositional Layoutには ３つの柱があります まず“構成可能” シンプルなものから 複雑なものを作ります 次に“柔軟” とても柔軟で どんなレイアウトでも書けます そして“速い” パフォーマンスの最適化は 皆さんが気にする必要はありません Compositional Layoutでは やりたいことを定義すればいいのです 宣言型タイプのAPIです

さて　Compositional Layoutで― どう構成するかです 小さなレイアウトを つなぎ合わせていくという形です そして大きなレイアウトを 構成するのです フローレイアウトで学んだ 行配置のレイアウトを使います 小さなレイアウトグループの中に 行配置できます

そして最後に サブクラス化しません 何かを作成し 構成したらそれで完成です それでは―

コード以外の話はこれくらいにして コードを見ましょう

これがCompositional Layoutです コードが５行 ここで私のデバイスに切り替えましょう 実演用のアプリケーションです リストを開きます 退屈なレイアウトですね テーブルみたいで何もありません では少し コードに注目しましょう こちらです 目につくものがいくつかあります まず皆さんは思うでしょう “これくらいなら フローを入れて２行で書ける” 確かに そうです おそらくできるでしょう でも今日 考えてほしいのは― レイアウトが複雑になっても それに比例してコードの量が― 増えないことです 新しいものを構成していき― シンプルな方法で とても複雑なレイアウトができます 早く紹介したいですね 次に気になるのは タイプが何列もあることです ５つもあります　何でしょう？ まず注目してほしいのは４つのタイプ 抽象化により階層を上っています まずアイテムがグループに収まり グループがセクション セクションがレイアウトに収まってます ビジュアルで見てみましょう この大きな長方形はレイアウトです レイアウトの全体ですね そしてこの白い部分がセクションです これは直接 データソースにマッピングされます この例では 伝統的なグリッドスタイルにします これらのグループが行を示しています その中にアイテムがあります 今日はこの階層が何度も出てきます アイテム グループ セクション そしてレイアウトのパターンです

ここで少しコンセプトの話を コアタイプです それが終わったらデモに進みましょう まずsizingの話を Compositional Layoutは― sizingを拡張し サイズの調整を簡単にしました そしてすべてに 明確なサイズがあります ここはユークリッド幾何学の平面です サイズは２つのプロパティ 幅と高さの次元です ここに簡略版のタイプ定義があります 幅と高さがありますが スカラー値ではありません floatでもなく タイプです NSCollectionLayoutDimensionです これは何でしょう？ 単純です 軸の大きさを示すものです 定義には ４つのバリエーションがあります ビジュアル的に説明しましょう

アイテムがありコンテナとの 相対サイズを表現したいとします Collection Viewがコンテナです ここではアイテムの幅が コンテナの幅の50％としています

同様に高さも コンテナの高さとの割合にして― 30％としています

このように 軸に依存せず指定できるため― 特定のアスペクト比にもできます この場合は１ですね アイテムの高さと幅を コンテナに対する割合で決めます 幅を25％にすると 高さもそれと同じになります これは割合で次元を作成しました Point-basedの値は？ ２つあります １つは単純に絶対値です こういうのは大抵200ポイントです デザイナーは200にこだわります 次が面白いのですが推定です アイテムの大きさが分からない場合 推定できます 200としましょう 時間がたち― アイテムがレンダリングされ コンテンツが分かると大きくなります これがLayoutDimensionとSizeです 次はアイテムについて セルかSupplementaryです 画面にレンダリングされるものです 他にもありますが タイプの定義は分かったでしょう 構築する際にサイズを与えます とてもサイズにうるさいですね

抽象化の階層を上って 次はグループです グループは主力製品です レイアウトの基本ユニットです formは３つ　水平　垂直 縦軸と横軸に フローレイアウトするイメージです でも先述のとおり柔軟です 行に沿って並ばないもののために カスタムグループがあります これは何でしょう？ アイテムの絶対的なサイズと位置を 指定するものです レイアウトを生成する 定義済みジェネレータとか― 放射状配置の計算に カスタムグループを使います 水平と垂直に並べて カスタムグループを作れるのです シンプルから複雑を作れます

以上がグループです

次はNSCollectionLayoutSection

名前のとおり セクションベースのレイアウト定義です アイテムの数を データソースに直接マッピングします イニシャライザが― LayoutGroupを取り込んでいます アイテムからグループ セクションへ

そしていよいよ最後です ２つの最上位レイアウトクラスです iOSとtvOSにはUI CollectionView CompositionalLayout MacではNSViewCompositionalLayout 面白いことに どのプラットフォームでも定義は同じで 最上位クラスが少し違うだけです

これは後で デモで少しだけお見せしますが Compositional Layoutの構築法です 方法は２つ シンプルなのは LayoutSectionの定義を指定する方法で 現在のフローと似てます フローも どのセクションも 同じようにレイアウトします その考え方を拡張できます セクションの有用な定義があります クロージャを指定して― セクションベースで セクションの定義を呼び戻すだけです これで可能性が広がります セクション間で レイアウトを変えられます この後 デモでお見せします “この後”ではなく今からですね タイプの話はもう十分です 同僚を呼んでデモを見ましょう トロイ？ (拍手) ありがとう　スティーブ コードを見ていきます シンプルな要素を使って― どんなレイアウトでも 作り上げられる仕組みを見ていきます まだの方は サンプルのダウンロードをどうぞ ゆっくり見ることができます そして何より 我々のコードを自由に使えます どんなレイアウトにしろ― どこかに似た手本があるでしょう 我々のコードを元に作れば 早くゴールにたどりつくはずです 既存のコードを改良することで 自分の理想を― 簡単に実現することができます 例を見ていけば あるパターンがあると気づきます スティーブも言ってました どのコードも 同じ４つの基本部分から成ります アイテム グループ セクションが― 全体のレイアウトに包まれています 今から見る例も 同じ４層構造になっています それ以外にも グループを入れ子にすることで シンプルなものから― より複雑で 洗練されたレイアウトを作れます コードを見ましょう

先ほど見た リストの例から始めましょう これ以上なくシンプルなレイアウトです １列のリストで アイテムはCollection Viewの幅に スマートフォンを回転させると― アイテムは 同じ高さを保ち幅だけ広がります どうやって書くのでしょう？ ListViewControllerのソースファイルを 開いています どの例でも createLayout関数を宣言して― その中にレイアウトが書かれており それをCollection Viewに 返すという形になっています まず気づくのは― アイテムと そのサイズを記述していることです その記述を使い アイテムのグループを記述します

次にグループをセクションに 最後にCompositional Layoutを 作成して返します 先述の階層構造ですね 次に進む前に もう１つ注目してほしいのは― アイテムのサイズの決め方です この場合は グループサイズが結果的に決めています 説明しましょう Compositional Layoutの中では― グループは 何かを繰り返す構造になっています アイテムの列や行です この場合は列ですが １列に１アイテムずつしかありません だから各アイテムにグループがあります グループは Compositional Layoutには必須です ここではアイテムサイズを定義します sizingはスティーブも説明しました グループサイズの記述を見ましょう この場合は行を表すグループを― コンテナの幅の100％に広がらせます これにより グループ幅はレイアウトの幅になります

一方 高さは 絶対値で44ポイントに指定しています これが要はアイテムボックスの定義です 幅はビューと同じで 高さは44ポイントです アイテムサイズの指定で― 幅と高さを それぞれコンテナの100％にします コンテナはグループですからね これでリストは完成です でも面白いのは― 少しの変更で レイアウトが劇的に変わる点です 別の例を見てみましょう

グリッドを開きましょう ５列のグリッドにアイテムが並んでます

スマートフォンを回転させると―

常に５列であることが分かります アイテムは四角で― ５列になるよう サイズが調整されています

この例を見れば グループを使う便利さが分かるでしょう 今回もcreateLayout関数を見ます やはりアイテム グループ セクション レイアウトの構造です 先ほどと似てますね 違うのは アイテムとグループサイズくらいです 違いを見てみましょう

各グループは Collection Viewの幅まで広がらせます ここは同じです でも今回はアイテムの幅が違います 列にアイテムを５つ並べたいのです そこでアイテムの幅を コンテナの幅の20％に指定します コンテナはグループなので― アイテムが ５つ並べられるようになります そして高さは絶対値でなく― 各グループの高さを コンテナの幅の20％に指定しています 幅や高さの割合で指定できる点を 生かしています これでアイテムを四角にできます アイテムの幅と グループの高さは同じになります グループの高さがアイテムの高さなので アイテムの高さを グループの高さにします

これでグリッドは完成です 根本的には リストのコードと変わりません アイテム間に スペースが欲しい場合はどうでしょう？ どうするか見てみましょう インセットを使った例です 同じ５列のグリッドですが アイテム間にスペースがあります

ビューを開きましょう InsetItemsGridViewControllerを 使います 先ほどの例と比べると コードが１行 違うだけだと分かります このレイアウトもよく見てみると― 先ほどのレイアウトと あまり変わりません 各アイテムは 先ほどと同じ場所に配置されています でも今回は サイズをその場所いっぱいにではなく 少し手を加えて幅と高さ両方に ５ポイントの余白を作ります item.contentInsetsを活用し― 最後にもうひと手間かけて仕上げます 以上がリストと― アイテムサイズを調整して作る グリッドです ただもう１つ 便利な グリッドに似たレイアウトがあるので お見せしたいと思います ２列のグリッドの例です

これは一見 ５列のグリッドとほぼ同じに見えます 回転にも対応しています 常に２列で アイテムは適切な幅に広がります ただ少し内容が違うので見てみましょう TwoColumnViewControllerで― createLayout関数を見ましょう やはりここでも― 例の４階層構造になっています ただ注目すべきは… 分かるでしょうか 水平グループが 少し違う構成になっている点です 違うイニシャライザで カウントパラメータを受け取ってます ここでは明確に― １グループ当たり ２アイテムにしたいと指定してます Compositional Layoutに― アイテムの幅を計算させるのです 指定は必ず必要なのでしています コンテナの100％とね でもオーバーライドされます グループのアイテム数を決めると― Compositional Layoutはそれを優先し 適切な幅を計算してくれます スペースの作り方も違います 柔軟なAPIなので いろんな方法でできるのです ここではitemInsetsではなく― section.contentInsetsを指定してます 左右に余白が欲しいですね セクションはレイアウトに対応するので leadingとtrailingのスペースを 10ポイントに指定します Compositional Layoutでは― この行のように 方向に依存しない構造を推奨します 左右ではなく leadingとtrailingを指定しています 右横書きの言語の場合でも― そのまま正しく適応できます

そしてもう１つ interItemSpacingのプロパティで グループのアイテム間に スペースを入れます この場合 固定で10ポイントです それ以外は先ほどと同じです グループ内のアイテム数を決める 機能を使っただけです 便利ですね もう１つ スティーブが話してましたが― セクションごとに レイアウトが変えられます ここまではセクションが１つでした 複数セクションで それぞれ別のレイアウトにするには？ 個別セクションの例を見ましょう これまでのレイアウトの混合です セクションは３つあります １つ目は 最初に見た１列のリストです 次は５列の四角いグリッド ３つ目は３列の長方形のグリッドです

どう実装するのでしょう？ DistinctSectionsViewControllerを開き createLayout関数を見ましょう 一見 大きく違いますが… レイアウトをインスタンス化する コンポーネントが最初にあります 説明しましょう このイニシャライザは― section provider closureを パラメータとして受け取っています section provider closureは― 無作為なコードです このセクションに 好きなレイアウトを返して応答できます パラメータが２つ渡されます sectionIndexは どのセクションかを示します LayoutEnvironmentは 参照できる便利なプロパティを含みます 後で見せます

でもそれ以外はあまり変わりません アイテムを指定して― グループの記述で包んでます 最後にセクションの記述を これをクロージャから返します セクションの新しい記述を 再クエリーする時― Compositional Layoutは このクロージャを呼び出します 内容は以前のものと似ています 各レイアウトは 列の数が大きな違いとなっています そこでSectionLayoutKindタイプを 宣言しました 上にあります sectionIndexを渡して初期化します ０か１か２です するとenumタイプにマッピングされます SectionLayoutKindが リストがgrid5かgird3だと示されます 便利なプロパティも追加しました columnCountです SectionLayoutKind値に 何列でレイアウトするか聞けます

createLayout関数で列の数を聞き― ２カ所で使用します

２列グリッドの例では― 水平グループに 明確に求める列の数を渡しています Compositional Layoutに アイテムの幅を計算してもらっています ここでは列の数で グループの高さを決めています 好きな方法でできます レイアウトを 適応可能にしたい時は？ 回転させると…

スペースの使い方に問題があります もっとアイテムが入りそうです AdaptiveSectionsLayoutを見ましょう パッと見は他と変わりません ただ回転させると― 最初のセクションが２列になります ２つ目は10列に そして３つ目は６列に コードはどうしましょう？ 先の例とほぼ同じです AdaptiveSectionsViewControllerを 開いてcreateLayout関数を見ましょう 先の例に似てますね SectionLayoutKindタイプが 変わっていることに気づきます これは問題ないですが columnCountがただパラメータを 受ける関数になっています そこに― layoutEnvironmentの幅を渡しています layoutEnvironmentタイプには レイアウトの幅の情報が含まれています iOSならTrait Collectionの情報が あります この情報を使い 環境に合うレイアウトを決められます 今は幅だけ使ってます 上を見ましょう SectionLayoutKindの画面です columnCount関数があり― レイアウトの 幅のパラメータを受け取っています そしてlayout breakを実装しました 800ポイント以上の幅がある場合 ワイドモードになるようにしました ワイドモードでは 各セクションの列の数が増えます

以上です　戻ると― 列の数を修正した後は― 以前と同じように使えます わずかな変更で 回転にレイアウトを適応できました

いいですね でも まだアイテムの話だけで― Supplementaryと Decoration Viewを紹介してません Compositional Layoutの魅力は… ヘッダやフッタを超えて 任意のSupplementary Viewで― 自由にデザインできることです その話を少しして― 他にもCompositional Layoutで 何ができるかを紹介しましょう またスティーブを呼びます ありがとうございました (拍手) 基本的な仕組みについての話は 済んだので― より高度な内容に移りましょう カスタムレイアウトをする方法は いろいろあります それでは―

まずSupplementary Itemの話を Collection Viewは ３つのビュークラスタイプを扱います モデルオブジェクトを表すセルなど そしてSupplementaryと Decoration Itemの２つです これらはコンテンツ情報などの visual cueを出します セルのバッジは “ツイートにコメントが来たよ”とか バッジとヘッダとフッタは― 今ではよく使われています 固定ヘッダやフッタもあり サポートされています それが さらに簡単になります 簡略化します コンテンツを アイテムや グループにアンカーすることで― 関係性をシンプルにします

ビジュアルで説明しましょう 新しいタイプ NSCollectionLayoutAnchorを使って タイプ間の関係を指定します Supplementaryは― このように ホストスペースにアンカーされます とても分かりやすいですね

NSCollectionLayoutAnchorがあります まずエッジを指定します このセルの上部の余白にピンして― 少しジオメトリの外に はみ出させるにはどうしたら？

デバイスがありバッジが見えます ４アイテムのグリッドです きれいな青色ですね アイテムには いくつか通知がついています 少しジオメトリからはみ出てます セルのジオメトリの中ではありません スライドで説明しましょう

fractionalOffsetのおかげで はみ出すことができます 割合で移動します X方向に30％ Y方向にマイナス30％ CollectionLayout SupplementaryItemを定義します badgeSizeとelementKindで それから Supplementaryタイプを参照して コンテナのアンカーを指定します Supplementaryを定義したので 何かと結び付けます アイテムと結び付けます セルです この場合は イニシャライザを拡張したもので― 初期化します 以上です

ヘッダとフッタはどうでしょう？ ヘッダとフッタは Supplementaryとは少し違います ヘッダやフッタを コンテンツに飾り付けるに当たり コンテンツを隠したくありません エリアを拡張して コンテンツを見せたいので Boundary Supplementaryを 使います ホストのジオメトリにピンしましょう Boundary Supplementary Itemは セクションでも― 全体でもできます なかなか面白いですね デバイスに切り替えましょう

どんな感じか見てみましょう 明快な例ですね ピンされたヘッダやフッタです 思ってたとおりになってますね コードを見ましょう

こちらです 先ほど見たものと似てますが― アンカーではなく alignmentプロパティがあります ヘッダはtop フッタはbottomを指定します セクションの上下に置きたいです ヘッダがfloatして コンテンツエリアに留まるように― pinToVisibleBoundsを指定します ヘッダとフッダを セクションと結び付けるために― boundarySupplementaryItemsを そのままですね

iOS 13 cardは もう皆さんも試してみたでしょう あらゆる設計に影響します スクロールのUIにも見られます cardでコンテンツを分けたりしています Decoration Viewをサポートしてるので Collection Viewと相性がいいです Compositional Layoutで かなり楽になりました CollectionLayoutDecorationItemで― elementkindで作成すれば終わりです コンテンツの裏のビューで 視覚的にグループ分けをするためです コードは１行です それをセクションに追加して アイテムを指定すれば完了です それでは ざっと見てみましょう

分かりやすいですね 複数セクションのリストと コード１行のDecoration View 単純です

次は私も思い入れがある― 推定Self-sizingです iOS 13では速さと正確さを追求しました Compositional Layoutは 推定Self-sizingを拡張しています 軸によるSelf-sizingが可能です レンダリング時に 必要なコンテンツのビュー階層は― あらゆる軸で大きくなったり 暴れ回られるのは避けたいです 幅は分かっています 例えば― 幅はCollection Viewと同じがいいとか ただ高さは違ってていいのです 例を見ましょう 前にも見たコードです 見慣れたセクションです ヘッダとフッタのものです テキストサイズを最大にします すべてちゃんと適応しています どうやるのでしょう？ 高さの次元が推定になってます 違いはそれだけです 幅は分かっていましたが― 高さは推定で44ポイントに コンテンツをレンダリングした後に 自動で修正します すべて自動です アプリケーションでDynamic Typeを サポートしやすくなります すばらしいですね

では何かをネストする場合は？ compositionの考え方をしましたが どうやるか見ましょう レイアウトで 核となるのはレイアウトグループです NSCollectionLayoutItemの サブタイプです これは関係なので― グループ内のアイテムを指定すると 別のグループができます こうしたネストに制限はありません おかげで いろんな新しい設計が可能になります この例では グループにアイテムが３つあります leading側に大きなのが１つ trailing側には縦のグループがあります コードでどう書くのでしょう？

明快ですね 水平グループが下にあり― サブアイテムがleadingItem そしてtrailingグループがあります とても理屈が分かりやすいです 細部を足せば すばらしいレイアウトの完成です

ネストのグループは便利ですね でもCollection Viewのネストは どうでしょう？

こちらはApp Store iOS 13の新装版です もし私がサードパーティ開発者なら これを見て死ぬかも かなり複雑です 大変ですが 最近の アプリケーションではよくあります 見慣れた光景です うまく動かすのは なかなか難しいです それが１行のコードで済みます デモを見せましょう (拍手)

先ほどのグループと似てますが 少し潰れてます コンテナの幅の80％くらいです 縦スクロールで セクションが５つあります 各セクションは横スクロールできます (拍手) バリエーションがたくさんあるので お付き合いください ５通りあります noneのケースは要りません continuousが２通り pagingが３通りあります それぞれ説明しましょう

縦スクロールのセクション動作デモを 開きましょう continuousはシンプルで明快な スクロールビュー的な動作ですね 跳ねてますね

何時間でもやってられます これが普通です それから もう１つ動的なスクロールのほうを continuousGroupLeadingBoundaryです 長いけど的を射てます スクロールすると― 自然とグループの semantic-leading boundaryで停止 (拍手) 拍手した人は contentOffsetで苦労した人ですね continuousの動作に続いて― pagingの動作を見ましょう paging動作に似てるので この名がつきました そのままです どれだけ速くスクロールしても １ページしか進みません このページの定義は― Collection Viewの幅になっています

あと２つあります group pagingと呼んでいるものです ページのサイズを― グループのサイズにできます いい動作です (拍手) コンテンツが 自動で前面の中央に配置されます 最後がgroup paging centered これは自動で― グループが中央に来ます (拍手) いいでしょう？ のぞかれてる感覚です コンテンツの動きがとても よく分かります

以上がより高度な機能の紹介です まだあります　SDKで試してください

Appleでは― コラボレーションというものが とても重要です 問題解決には 他チームとの協力が不可欠です フレームワークエンジニアは… 他のチームが― 新しいフレームワークの機能に 何を求めているか知ることが重要です App Storeチームが iOS 13用に新デザインを開発していて コードをシンプルにしたがっていました その時 彼らと Compositional Layoutについて話すと とても興奮してくれました そこでApp Storeチームの ダース･アボルファシを呼びます ダース？ (拍手)

ありがとう　スティーブ App Storeは何百万ものユーザが 便利なAppを求めて訪れる場所です

毎日 訪れる人も多いのです リッチでダイナミックで 魅力的なコンテンツが必要です

Collection Viewが重要になります

App Storeです

もしフローレイアウトだけを使って このUIを作るなら― 縦スクロールの Collection Viewから始めるでしょう

そして横方向にスクロールする 各セクションに― 追加でCollection Viewが必要です 各Collectionを動かすのに サポートコードが必要になります

Compositional Layoutなら １つのCollection Viewで済みます

実際にそうしました iOS 13では App Storeが生まれ変わったのです

このページでは 各コンテンツタイプが個別に― レイアウト記述を有します それらが集まり １つの CollectionViewLayoutを構成します

このセクションは レイアウトアイテム１つで記述され 高さがコンテナの幅の100％です

レイアウトグループは― そのコンテナの幅の半分を占めます

これが基本的なブロックです

このグループを レイアウトセクションに挿入します ページングの動作は― 直交するスクロールを group pagingに設定しました これで滑らかになります

iOS 13ではApp Storeが 右横書きの言語にも対応しています Compositional Layoutのおかげです

今日 お見せした機能を使って このレイアウトを構築しました Compositional Layoutを使えば― supplementaryやセルの配置も 適応可能です

１行もコードを書かずとも paging動作が右横書きの環境で― 正常に維持されます

これまで私たちが個別に対応していた スクロール箇所が― 解決され １つの CollectioinViewにまとめられました

それに加えコードは簡略化され― 明快になり 維持しやすくなりました

Compositional Layoutで我々の Collection Viewの見方が変わりました 同様に皆さんのAppが これによって進化するのが楽しみです トロイ (拍手) ありがとう　見事な再設計だね Compositional Layoutがすでに 有名なAppで― 役立っていると聞いてうれしいです それを皆さんに提供できることも 本当にうれしいですね ここで少しMacOSで NSCollectionViewを使ったデモを― お見せします

Xcodeのサンプルプロジェクトを開くと ビルドSchemeと ビルドTargetがあります ここで実行します

そして今日お見せした例を すべて開いて並べてみましょう

これで全部 並べられましたね これらのコードは基本的に同じです APIは同じで 調整が必要なのはメトリックのみです macOSに適したものにします 直交軸のスクロールも問題ありません もちろんMacでは Macらしい動作になるはずです Collection Viewは 絶えずサイズ変更ができるはずです サイズ変更が すばやくできるか確認しましょう 動作が非常に軽くて速いですね 先ほどと同じく layout breakが起きています 仕組みが分かれば― layout breakを 広い画面用に追加できるでしょう クリックで アイテムを選択することもできます 矢印キーでも動かせます シフトキーを押しながらも動かせます (拍手) ドラッグして範囲選択もできます このように 古いものでも新しいものでもできます (拍手) 期待どおりに動きます どのレイアウトも動いています アイテムや グループ記述などのコードは― 共通のものです 別のプラットフォームのものと コードを共有することも可能です Compositional Layoutで― プラットフォームの垣根を越えて 作業しやすくなります おすすめ機能が満載です iOS tvOS macOSで すぐに使い始めることができます 記述により 新しいカスタムレイアウトを― 簡単に作成できます これは革命的です そしてCollection Viewが コンテンツを示す上でさらに― 汎用性の高いものとなります レイアウトを記述したり 調整したり 変更したり試したりするのが簡単になり デザイナーとのやり取りも 楽になるはずです 革命をもたらすと思います

サンプルで いろいろ試してみてください 我々のコードを使い― あなたのAppの カスタムレイアウトを始めましょう 皆さんが作る 新たなユーザ体験が― 待ちきれません 他にもいいセッションがあります UITableViewを使う人はぜひ― “Advances in UI Data Sources”へ まったく新しいAPIを紹介します Collection Viewや UITableViewにモデルデータを送り 差異を自動計算し 自動アニメーションを入手します 最高の体験ができます ぜひセッションにご参加を ありがとうございました (拍手)