iOSのPhotoアプリライクな体験を目指したUICollectionViewの作り込み by Miki

魅力的な体験や没入感のあるアプリを作るためには、写真や動画などのメディアコンテンツを効果的に表示することが欠かせません。
iOS標準のPhotoアプリでは、優れたレイアウトとジェスチャーに対応したインタラクションで写真・動画のコンテンツを心地よく閲覧できます。

Rettyでは、ユーザーさんが投稿した写真を「iOSのPhotoアプリのような体験で振り返られる」というコンセプトで「メモリーズ」という機能を開発しました。
その際、UICollectionViewのCompositionalLayoutやTransitionLayoutを総動員して、モザイクレイアウトやレイアウトの切り替えなど、写真を振り返るリッチな体験を実装しました。

このトークでは、UICollectionViewLayoutに実装されているAPIで、シンプルなタイル表示を拡張する方法をお話しします。

トーク内容

• iOSのPhotoアプリにおける注目すべき体験と、それらを再現する方針
• UICollectionViewで複雑なモザイクレイアウトを構築
• 複数のLayoutを、 UICollectionViewTransitionLayout を用いてインタラクティブに切り替える方法
  • タイル表示の切り替えのアニメーション実装
  • デフォルトのアニメーションとカスタム実装の解説
• UICollectionViewLayoutAttributes を操作してスクロールに応じた挙動を作成する
  • Cell / SupplementaryViewの LayoutAttributesを画面内の位置に応じて変更するなど

参考:
メモリーズ機能: https://corp.retty.me/news/article/?id=8ahxxd_ukqf