春の入門祭り

春の入門祭りの第13弾です。はじめにTIG メディアユニットの福谷（ふくや）です。お仕事では主にサーバーサイド領域で開発していますが、趣味でiOSアプリを開発しており、春の入門祭りの社内アナウンスがあったので書いてみようと思います。iOSアプリで記事や写真などを一覧表示させたい場合、必ずと言っていいほどCollectionView（あるいはTableView）が採用されると思います。iPhoneが発売された当初のデザインは、縦にコンテンツが並ぶだけのレイアウトでしたが、昨今はコンテンツの一覧性・視認性をより高めるために、縦にも横にもスクロールできるCollectionViewが一般的になってきています。Compositional LayoutsそこでCompositional Layoutsの登場です。Compositional LayoutsはWWDC2019に発表された複雑なレイアウトをシンプルに実装するための考え方です。CollectionViewにおいてはUICollectionViewCompositionalLayoutクラス6を利用します。Compositional Layoutsの詳しい解説はWWDC2019の動画2を見るか、それを元に解説した記事3もあるのでそちらを参照してください。また公式サンプルコード7もかなり参考になるためおすすめです。※公式ではiOS13でサポートされていますが、iOS13以前でも利用可能にするためのライブラリ1がでています。アプリを作る以下のようなFuture Tech Blogリーダーを作ってみようと思います。ソース全量はこちら。※以降の解説はCompositional Layoutsの実装部分に焦点を当てて解説していきます。item・group・sectionの構成を決めるCompositional Layoutは item・group・section、そしてsectionを内包するlayoutにより構成されます。今回作るアプリのUIを例に、item・group・sectionをどう構成するかについて示したのが下記の画像です。それではLayoutを書いていきましょう。Compositional Layoutで実装するまず大枠のSectionから書いていきます。12345678910111213141
情報元サイト：「Tech Blog – Future Architect」
[ オリジナルサイトで見る ]