こんにちは、グノシー事業部でiOSエンジニアをしているsyouitです。
この記事は Gunosy Advent Calendar 2020 17日目の記事です。
昨日は関さんの2020年の研究開発チームの振り返りでした。
はじめに
本記事では「UICollectionViewで変更に強いリスト面を作成する」ことについて書きたいと思います。
前任者や先輩方のおかげでグノシーでは以前からリスト表示のUIをUICollectionViewで作成していましたが、その後運用してみて良かった点などをご紹介します。
UICollectionViewをUITableViewのような見た目で利用する方法がWWDC2020のセッションで紹介されましたが、今回はこの方法ではなく現在グノシーで実際に利用している話をしようと思います。
利用例
一般的なUICollectionViewの利用シーンとして、縦横方向にコンテンツを配置する下図のようなレイアウトが挙げられます。
UICollectionViewの利点として、UICollectionViewFlowLayoutでCellやHeader, Footerの細かなレイアウト調整が可能な点が挙げられます。これはUITableVIewにはない大きなメリットです。
標準ではUICollectionViewのCellは左寄せのレイアウトなのですが、上図ではCellが中央揃えになるよう、UICollectionViewFlowLayoutでレイアウトしています。
このようにUICollectionViewFlowLayoutを利用して、様々なレイアウトでのCellの表示が可能となります。
それではUICollectionViewをUITableViewのように利用しているシーンについてご紹介します。グノシーでよく利用している下図のようなUIではすでにUICollectionViewを利用しています。
一見UITableViewのように見えますが、なぜUICollectionViewを利用しているかは次の章でご説明します。
なぜUICollectionViewなのか
Cellの使いまわし
UITableViewとUICollectionViewがアプリ内で混在している状態だと、UITableViewのA画面で表示しているCellをUICollectionViewのB画面でも表示したいといった場合、Cellを作り直したり等の対応が必要となります。*1
しかしアプリでUICollectionViewしか利用していない場合は各画面でのCellの使い回しが容易になります。
細かなデザイン修正
セル間のマージンを空けたいといったデザイン修正の場合を考えると、UITableViewではSectionHeaderを利用したりSeparatorCellを作成したりといったことが考えられます。
しかし、UICollectionViewでは先述のUICollectionViewFlowLayoutで容易に変更可能です。
UICollectionViewを利用する一番の理由はUICollectionViewFlowLayoutにありあす。
まとめ
UICollectionViewを利用する利点について簡単に説明させていただきました。
現在のグノシーではほぼUICollectionViewを利用しており、Cellの使いまわし、細かなレイアウト調整が容易な作りとなっています。
既にこのような考えで画面を作成しておられる方もいるかと思いますが、この記事が誰かの参考になれば幸いです。
明日はshosundbergさんの記事になります！お楽しみに！
*1:CellではなくViewで作り空のCellにaddSubviewする利用法もあると思います。
