UICollectionViewツアー

(音楽)

(拍手) A Tour of UICollectionViewへ ようこそ 私はスティーブ･ブリーン フレームワークエンジニアです 本日は 私と同じUIKitチームの モハメド･ジスロウイと ツアーを行います

今日は変わったことをします デザイナーのスペックを基に アプリケーションを構築し UICollectionViewの 機能を活用します アプリケーションを構築する過程で 様々なトピックに 触れたいと思います レイアウト 更新 アニメーションを含みます それでは早速 始めましょう

これはデザイナーのスペックです フレンドフィードのようです レイアウトは縦で 分かりやすい作りです

これはいいですね フレンドフィードのコンテンツが モザイクで表示されています これらを使うためのコードを モハメドが説明します デザインはどう？ 実際に見るのは初めてだけど CollectionViewが使えると思う 作業するのが楽しそうだ これはすごくいい コードを使った説明は モハメドが後ほど行います まず CollectionViewを 理解するために ３つのコンセプトを説明します レイアウト データソース デリゲートです

まずレイアウトからお話しします UICollectionViewの 定義を開きます UITableViewに詳しければ APIが似ていることに気づきます デリゲートや データソースがあります しかし UICollectionViewの レイアウトコンセプトは 独特で すごい力を持っています 視覚配置の情報を コンテンツから抽象化できます コンテンツ自身とは別にです レイアウトは コンテンツの配置場所です

全アイテムが UICollectionViewの レイアウト属性で特定されています 境界 センター フレームなどの属性です 表示アイテムを定義する プロパティとも言えます サブクラスを作成して カスタマイズすることもでき 自分のデザインに組み込めます ユーザがコンテンツを スクロールする時― 通常レイアウトは変わりません しかし レイアウトの表示を 変えたい時もあります その時には 無効化メカニズムを使用します

レイアウトがコンテンツとは別に 抽象化されるので 別のレイアウトへの移行が簡単です また移行時に アニメーション効果が使えます レイアウトＡとＢの 情報共有は要りません 作りたいレイアウトを 宣言するだけです

CollectionViewLayoutは 抽象クラスなので 直接は使用されません むしろサブクラスが使用されます

今回は UICollectionView FlowLayoutがあります CollectionViewを 知っていれば簡単です

UICollectionViewFlowLayoutの カスタマイズには 色々と方法があります デリゲートを使うこともできます しかし CollectionViewFlowLayoutは CollectionViewDelegateより 多くのものを特定できます

フローレイアウトは 行配置に基づいているため 様々なデザインに 対応することができます

行配置とはどういう意味か？ 行配置システムを説明するには 例を挙げるのが一番でしょう この縦にスクロールする CollectionViewで フローレイアウトの コンテンツ表示を再現します まず最初のアイテムを 上端に配置します そして同じ行にアイテムを並べます アイテムを並べる行は スクロール軸に直交し 水平になます 最初の行が一杯になったので 次の行に移動します コンテンツを更に並べます 最後の行に来ました コンテンツを全て並べました

水平なレイアウトが分かるように 線を引きました フローレイアウトを カスタマイズする定義を見ます

最初はラインスペース 矢印で表示されている 行間のスペースです 同様に

レイアウトに沿った アイテム間スペースもあります 両方の最低スペースを定義する プロパティは２つ

それでは理解を深めるために 90度回転させて もう１度やってみます 最初は左上です 今度は横スクロールなので 縦にアイテムを並べます 下まで一杯になったら上に戻ります パターンは分かりましたね コンテンツを全て入れて 縦のレイアウトができました この方向での ラインスペースはこれです アイテム間スペースはこれ 必ず覚えてください 以上がレイアウトです

今度はデータソースです TableViewを知っていれば すぐに使えます APIが似ているのです レイアウトは コンテンツの表示場所で データソースがコンテンツです メソッドは３つあり １つ目はセクションの数です 入力しない場合 値は１になります

２つ目はセクション内の アイテムの数で 各セクションの アイテム数が分かります ３つ目はコンテンツを提供する cellForItemAtIndexPathです 以上がデータソースです ３つ目のトピックはデリゲート コードに入る前に説明します デリゲートの使用は 必須ではありません CollectionViewは UIScrollViewのサブクラスです そのため UIScrollViewが提供する― 同じデリゲートを拡張して使います スクロールを変える時も 同じデリゲートを使います また ハイライトや選択の 細かい作業を可能にする― UICollectionViewDelegate メソッドとも連携できます

willDisplayItemと didEndDisplayingItemのAPIが スクリーンの 新着情報を通知します

UICollectionViewの コードを説明する前に お話ししたかったのは この３点です ではモハメドと交代して 実際に見てみましょう モハメド CollectionViewFlowLayoutを 使用するのに 最初の縦のレイアウトは最適です そこで全てを行えるので UICollectionViewを 使うのに向いています

更にカスタマイズするために フローレイアウトではなく CollectionViewFlowLayoutの サブクラスを見ます ColumnFlowLayoutクラスの インスタンスを 作成することから初めましょう そのインスタンスを使い CollectionViewを作り ビュープロパティを設定します autoresizingMaskや backgroundColorです ScrollViewプロパティも設定します これで希望どおりに表示されます ビュー階層に CollectionViewを入れた後に 一意識別子を使い PersonCellクラスを登録します

View Controllerを データソースとして設定 表示するセルの数や データの種類などの情報を これで提供できます

デリゲートとしても設定して セル選択を可能にします そして ２つのプロトコルに 準拠させます まずデータソースに準拠させます ２つのメソッドを実装します １つ目は セクション内のアイテムの数です people配列にある 人数やアイテムの数を返して データモデルオブジェクトを 表示させます ２つ目に実装するメソッドは CellForItemAtIndexPathです 一意識別子でCollectionViewから セルを取り除き people配列のPersonオブジェクトを セルに渡します データを実際に表示させて セルを戻します

最後に 選択をハンドルできるように デリゲートプロトコルの 任意メソッドを実装します まず DidSelectItemAtIndexPathを追加 feedViewControllerを インスタンス化し ２つ目のスクリーンを作ります 表示する画像が誰か分かるように Personオブジェクトを渡します navControllerに置きます ではシミュレータで 実際にやってみましょう

始めます (拍手 喝采) これはCollectionViewです いくつかセルが見えますが 表示サイズが正しくありません そこでカスタマイズしたいと 思います ではXcodeに戻りましょう そして 列のクラスを 開きます 先程の ColumnFlowLayoutクラスです そして

必要な作業をお見せします 既にprepareメソッドを スタブに置き換えています UICollectionViewの prepareメソッドが レイアウトの無効化で呼ばれます UICollectionViewFlowLayoutでは サイズの境界が変わると レイアウトが無効化されます アプリケーションの向きや サイズが変わった時です

ですからCollectionViewの サイズを考慮した カスタマイズを行うのに最適です セルに CollectionViewの幅に関する 機能を持たせます CollectionViewに アイテムサイズのプロパティで 希望サイズを知らせます 実際にやってみます アイテムのサイズを CGサイズにして CollectionViewの境界幅に 合わせます レイアウトのマージンに合わせ 高さを70ポイントにします これでデザインに合います ついでに見た目を もう少し良くしましょう アイテム間スペースに合うように セクションを挿入します CollectionViewの セーフエリアに全て収まるように 挿入参照プロパティを セーフエリアから設定します シミュレータでレイアウトが どう見えるか確認します

スペックどおり表示されています デザイナーも満足でしょう

画面を横にすると セルのサイズが変更されます 無効化コードが呼び出されたのです

しかし もっと良いレイアウトにできると 考える人もいると思います まだスペースが余っているので 複数の列を表示させてみましょう フローレイアウトなら 簡単にできます スティーブが説明したように フローレイアウトは １行にできるだけ多くの アイテムを入れます そして 入らないと行を変えます つまり アイテムのサイズを 変更すると 複数の列が作成されるのです Xcodeのレイアウトに戻り アイテムサイズの計算を 変更します サイズに合わせる設定を消し 代わりに少し計算式を入れます まず 使用可能な幅は 前回と同じです これはマージンによる 境界のインセットです 列の最低幅を決める 任意の定義は 300ポイントになります

この決められたスペースに 最大 何列まで入るかを 両方の値を使って計算します 求めた数値で幅を割ると 最適なセルの幅がでます 300ポイント以上かもしれません それをCGSizeに伝えます シミュレータに再び戻って レイアウトの更新を確認します

前と同じように表示されています 画面を横にして表示すると 列が左右に並んでいます

どうだい？ 簡単に調整できる良いレイアウトだ 次のデザインは？ フレンドリストは終わりにして モザイクのレイアウトを作ります いい考えだね スライドに戻って説明をしましょう

このレイアウトを見て 何ができるか考えます 私はフローレイアウトを 使う傾向にあります まず使ってみましょう このデザインに フローレイアウトが適切か考えます ３枚の写真が並ぶ この箇所を拡大してみます このインスタンスには 左に大きな写真があり 右には写真が縦に並んでいます フローレイアウトでは 左にアイテムを置いた後に 次のアイテムを 空いている場所に置きます 空きがなければ次の行です 縦に並ぶ写真を改善します このレイアウトは 行配置に基づかないため フローレイアウトを 使うことはできません しかし試しに一度 使ってみます

カスタムレイアウトを 作成しましょう 難しくありません ４つの基本メソッドに もう１つメソッドを 追加するだけです

４つのメソッドを説明します １つ目はCollectionViewの コンテンツサイズ CollectionViewは UIScrollViewのサブクラスです UIScrollViewの特徴は 広いコンテンツ領域が 可視である点です そのため領域内で 快適にコンテンツを動かせます ScrollViewに伝えるべき コンテンツサイズを どうやって求めるのでしょう コンテンツを含む長方形があります その長方形の領域の サイズを出すのです

以上がコンテンツサイズです 次の２つのメソッドは レイアウト属性を提供します １つ目はlayoutAttributesFor ElementsInRectです これはCollectionViewが 画面に何を表示するか 確認する時に呼び出します このクエリは幾何学領域からです

もう１つのAPIは 特定のアイテムを探す― LayoutAttributes ForItemAtIndexPathです 後ほどモハメドが説明しますが この２つのAPIでは 処理能力がカギとなります

４つ目のカスタムレイアウトの サブクラスは prepareメソッドです これはレイアウトが 無効化される度に呼び出されます キャッシュ保存したい レイアウト属性や コンテンツのサイズを 計算する良い機会です

追加のAPIについて話します shouldInvalidateLayout (forBoundsChange:)です これは境界が 変更される度に呼び出されます これもUIScrollViewの サブクラスです 境界の変更とは何を指すのか？ スクロール中に原点が変わったり アプリケーションと共に サイズが変わったりします そのため スクロール時や 絵文字の使用中に呼び出されます うまく設定する必要があります UICollectionViewLayoutは デフォルトでfalseを返します 変更したければ ここで行います これに対して UICollectionViewFlowLayoutは 原点が変わるとfalseを返します スクロール時は デフォルトに任せます 機器が回転してアプリケーションの サイズが変わると trueを返します 例外は フローティングヘッダとフッタで スクロール中に再計算が必要です これはカスタム無効化で行います 理論はここまでにして 実際に見てみましょう では このレイアウトのコードを モハメドに説明してもらいます

では始めましょう このレイアウトで使用する サブクラスを入力しました UICollectionViewLayoutの直下で UICollectionViewFlowLayoutの 下ではありません その理由は スティーブが説明しました UICollectionViewFlowLayoutは カスタムモザイクを サポートしないからです

まずインスタンス変数を設定して 後で重要な情報を 参照できるようにします １つ目は コンテンツ境界のCGRectです CollectionView内の アイテムの境界を示します ２つ目は キャッシュ済みの属性配列です 後でレイアウト属性を 参照することができます

ではレイアウトに prepareメソッドを実装します レイアウト作業に prepareが使われるのは 無効化の度に 呼び出されるからです レイアウトを ここに作れば終わりです もっと頻繁に呼ばれる メソッドのように 難しい作業や計算は要りません

まずキャッシュ属性と コンテンツ境界をリセットして 古い無効化情報は 全て消去します 次にCollectionViewの 全てのアイテムに対し 属性を設定します レイアウトごとに 必要なものが違うので 詳細は省きます ここでサイズ 位置 変化などを計算して セルを自分のデザインに 合わせるのです 属性を設定したら 重要な作業を行います 後で使うため 属性をキャッシュ保存し キャッシュ属性配列に置きます

次にコンテンツ境界矩形を使い フレームを統合し コンテンツ境界を最新に保ちます

prepareメソッドは作動したので レイアウトの 残りのメソッドを実装します

まずCollectionViewの コンテンツサイズです prepareで設定しているので コンテンツ境界を サイズとして返します

次はshouldInvalidateLayout (forBoundsChange:)です スクロール中に 無効化する必要のある要素は レイアウトに含まれていません フローティングヘッダもフッタも ありません 境界のサイズが変更された時のみ 無効化します 新しい境界のサイズが 現在のサイズと 異なる場合にtrueを返します

その後layoutAttributesForItem AtIndexPathを実装します 準備はprepareメソッドで 行っています そのため 要求したIndexPathに合う属性を 配列から選ぶだけです

最後に実装するのは layoutAttributesForElements InRectです このメソッドで呼び出された 矩形の範囲は CollectionViewより大きい こともあります CollectionViewは 領域に合う属性だけを要求します CollectionViewの矩形内に 表示されるアイテムに 対応する属性を含む配列を 返す必要があります

これは簡単に行えます キャッシュ保存された属性配列を 属性フレームでフィルタにかけます 属性フレームが矩形と交われば これを返すことができます シミュレータで レイアウトを確認してみましょう

フィードを１つ選んで レイアウトを出します 画像が奇麗に モザイク配置されています 横にすると セルのサイズが変更されます 全てが適切に更新されています

しかし スクロール機能が いま一つです すごく悪いですね ご存じかもしれませんが コードに戻り問題を確認しましょう

矩形内のレイアウト属性を 見てみます これはスクロール中に よく呼び出されます

この関数は配列全体を フィルタにかけます そのためアイテムが増えると 作業が大変になります 写真が増えると スクロールの速度が落ちるのです

こういう時は 一段階前に戻り レイアウトの性質と 最適化について考えてください レイアウトの要求は何か？

それは アプリケーションのセルが 上下 左右に並ぶことです つまり属性は既に キャッシュ属性配列内で フレームの最低Ｙ値で 並べられているのです

配列はソート済みです 従って フィルタではなく ２分探索を使うと 検索を迅速に行うことができます まずスピードの遅い実装を 削除しましょう そして 速いものと入れ替えます

ステップごとに説明をします まず初めに 準備した２分探索機能を 使うことから始めます 配列と矩形内の 様々なインデックスを使います

属性がフレームを持ち 矩形内にある場合 配列内で属性を インデックスとして返します

このインデックスを使って 矩形のための 残りの属性を 設定することができます 配列内でループさせて 属性を選んでいき 矩形外の属性を 見つけるまで続けます この方法は迅速です 配列にある何千ものアイテムを 何千回も検索しなくていいのです スクロールのアルゴリズムを シミュレータで確認してみます

スクロールすると 速いのが分かります どうだいスティーブ？ いいね ２つのレイアウトが完成した 次は何？ 残りはフレンドリスト用の 更新アニメーションです “すごくクールな 更新アニメーション”を スライドで見てみましょう アニメーションのビデオを 実際に見てみます

画面上の最後のアイテムが 誰かが写真を投稿したので 更新されました そして３番目の サミアのアイテムは 画面から消されました 今３つのことが行われました リロード 移動 削除です モハメドがシミュレータで やり方を説明します では始めます

複数の更新アニメーションを 同時に行っています UICollectionViewと UITableViewが提供する― performBatchUpdatesのAPIが 使えます これで更新とアニメーションが 同時に実行されるようにします performBatchUpdatesを 呼び出します データソースとCollectionViewの 両方の更新をここで行います これは更新が矛盾を生まないように 同期させる最善の方法と言えます 初めに データソースの 最後のアイテムを 更新したいと思います 下から２番目を削除し 最後を１番上に持ってきて アニメーションを表示させます シミュレータで レイアウトを確認します 更新コードを 右上の更新ボタンで送りました

おかしいな どうした？

何てことだ

どうした 私もiOSのコードで 同じ画面を見たよ ステージで起こるなんて

時間があまりないので データをリロードして アニメーションをやり直さないか？ 本気で？ (拍手) でも“すごくクールな 更新アニメーション”を失い ユーザの期待に応えられない 確かにそのとおりだ 分かってくれた ではスライドに戻り アニメーションを 救えるか見てみましょう これは前に見ました では このデバッグ例外が 示すものを見てみます indexPathの0-3から 削除と移動を試みました ４番目のアイテムを リロードして移動しました ４番でなく ３番目の0-2を削除したはず そうだね 何かおかしいな まずperformBatchUpdatesの APIを確認して ハイレベルな原則について お話しします このAPIを使用する目的は 同時に複数の更新を行うことです そして全てに アニメーションを演出させます CollectionViewの更新と共に データソースの更新を 必ず行ってください CollectionViewに関することは TableViewにも当てはまります では見てみましょう CollectionViewの更新では 挿入 移動 削除を行う順番は 重要ではありません しかしデータソースの更新で データソースの構成を変える時は 順序が重要です 分かりやすいように例を挙げます ３つの要素を含む 配列が２つあります 理解しやすいように 削除と挿入を行います １回目は削除を最初に行い ２回目は削除を２番目に行います こうすると感覚的に理解できます １番目のアイテムを削除し インデックス１に挿入します ２つ目は逆に 挿入をした後に 削除します 違う結果が出るので 悪い例だと思うでしょう

これをCollectionViewの更新と 比較します BatchUpdates経由の CollectionViewの更新が２つあり データソースの更新は していません １つは挿入した後に削除 もう１つは 削除した後に挿入です 結果は全く同じになります エンジニアとしては その理由が気になります

なぜCollectionViewでは 更新の順番が重要でなく データソースでは重要なのか ステップごとに見てみます １番目の削除は indexPathで降順に処理されます indexPathを説明します BatchUpdatesが始まる前は データソースは更新前の状態です 終わると更新後の状態に移行します indexPathは 削除に対し常に更新前の状態を 参照します 一方 挿入は indexPathで昇順に処理されます よってindexPathは挿入に対して 常に更新後の状態を参照します 移動はこの２つを混ぜたもので indexPathからの更新前と indexPathへの 更新後の状態があります

リロードはスーパーコマンドで 削除と挿入に 分解することができます リロードのindexPathは 更新前の状態を示しています リロードの仕組みを理解すると 今回のアプリケーションの エラーが分かってきます リロードでの削除が 移動と矛盾を起こしているのです 後でコードで修正します

参考までに紹介しておきますが これがCollectionViewが 作動しなくなる原因です

どうやって これらの知識を活用できるのか どのように データソースの更新を適用し 全てが同期するように保てるのか ４つの基本原則があります 移動を 削除と挿入に分解して ２つのリストに分けます まずindexPath上で 削除を降順で処理し 挿入を昇順で適用します これをやれば大丈夫です

データのリロードは？ モハメドが言ったように リロードは ボタン１つで終わります しかしアニメーションが出せず 荒っぽいアプローチです アニメーションを提供したいので これは特別な時にしか使いません モハメド コードを修正して 更新アニメーションを出せるか 試してみよう 名誉挽回の時間だ スティーブが説明した 修正ガイドラインを使用します まず古い実装を削除します

更新はリロード 削除 移動から成っていました そしてリロードと移動は 同じindexPathを使いました そこが矛盾点でした まず この２つを切り離します リロードを performBatchUpdatesに移します

そしてデータソースを更新して リロードのアイテムを CollectionViewに呼び出します performWithoutAnimationで 実行しています 実はスペックをよく見ると アニメーションは使われていません

次に 残りの更新の 削除と移動を行います

状況を整理しましょう index 2に削除があります index 3のアイテムを index 0に移動します ガイドラインに従って 移動を分けると index 2とindex 3に削除がきます そしてindex 3のアイテムを index 0に挿入 ここでの作業は２つで 削除と挿入です 順番に作業を行います まず削除を降順で行います index 3で削除を行い Personを後から 挿入できるようにします そしてindex 2のアイテムを削除

その後 昇順で挿入を処理します １つしかないので それを挿入します 最後にCollectionViewに アニメーションの表示を指示します 正しいアニメーションを 表示させるために 移動の指示のままにしています データソースが正しければ 正しいアニメーションが 表示されます シミュレータに戻り 更新の状況を 見てみましょう

うまくいくでしょうか

成功しました (拍手) リロードして スローモーションでもう一度

スペックのとおりです 良くできてる ではスライドに戻って まとめてみましょう カスタムレイアウトを作る時に 緊張したことはありますか 今日ご紹介した方法で CollectionViewソリューションを 作ってください リロードデータが一杯で アニメーションが 使えない時もあります これらの事項をチェックして 間違った点を修正してください

このリンクで 詳しい情報が見られます 明日の朝９時に CollectionViewラボに来れば 質問を受け付けます モハメドと私がいる予定です 本日はありがとうございました (拍手)