iOS

CollectionViewのカスタムレイアウトを作ってみた

投稿日:

はじめに

こんにちは。Yossyです。
最近、CollectionViewを利用してアイコンが格子状に並んでいるViewを作成しています。
ただ、2行と3行目の間だけは他の行よりも間隔を大きくして、ボタンを設置します。
そこで、カスタムレイアウト(手作りのレイアウト)を作成してみたので、備忘録を兼ねて作り方を紹介してみたいと思います。

作成するレイアウト

レイアウト

4×3の格子状。2行目と3行目の間にボタン設置用の間隔を空ける。

手順

UICollectionViewFlowLayoutを継承したクラスの中で下記を4つを実装します。
詳細はリンク先を参照して下さい。
prepare( )layoutAttributesForItem( at:)layoutAttributesForElements(in:)collectionViewContentSize

大枠の流れとしては、
prepare( )内で12個分のセルの位置(CGRect)を定義する。
②それを基にlayoutAttributesForItem(at: )で各セルのUICollectionViewLayoutAttributesを生成する。
layoutAttributesForElements(in: )でレイアウト作成に必要な[UICollectionViewLayoutAttributes]を返す。
CollectionViewContentSizeに値を入力する。

prepare( )

レイアウトの初回作成時と、レイアウト変更時に(invalidateLayout( )が呼ばれる度に)呼ばれます。
ここで、12個分のセルの位置情報(CGRect)を定義します。
具体的な実装としては、セルの位置情報の配列を作って、以後の処理に使用しています。

layoutAttributesForItem(at indexPath: IndexPath)

各indexPathに対してのUICollectionViewLayoutAttributesを返却します。
UICollectionViewLayoutAttributesは、セルサイズや位置情報のプロパティを持っています。
具体的な実装としては、prepare( )で作成した配列から、セルサイズと位置情報を含んだUICollectionViewLayoutAttributesを生成しています。

layoutAttributesForElements(in rect: CGRect)

引数のrectに含まれる全てのセルやviewのUICollectionViewLayoutAttributesの配列を返却します。
ここで返却されるUICollectionViewLayoutAttributesに従い、各セルのレイアウトが作成されます。
具体的な実装としては、rect.intersectsで前述のlayoutAttributesForItem(at: )で取得したrect範囲内のUICollectionViewLayoutAttributesの配列を返しています。

CollectionViewContentSize

レイアウト作成時に、カスタムレイアウトのスクロール量を判断するのに使用されます。
カスタムレイアウト全体の大きさを返却してあげる必要があります。
デフォルトではCGSizeZeroとなっているらしいので、オーバーライトで値を設定する必要があります。

まとめ

コード全体としては以下の通りとなります。

最後に、CollectionViewのインスタンスを生成する際の引数に指定します。

さいごに

カスタムレイアウトを上手に使えるようになれば、CollectionViewを使用しての実装の幅が大きく広がると感じました。
今回のカスタムレイアウトはシンプルなものでしたが、機会があればもう少し複雑なものにも挑戦してみたいです。

おすすめ書籍

[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 WEB+DB PRESS plusiOSアプリ開発自動テストの教科書〜XCTestによる単体テスト・UIテストから、CI/CD、デバッグ技術まで詳解 Swift 第4版

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

[Swift]クラスタされているPINを取得する

1 はじめに2 前回からの修正箇所3 クラスタリングされたPINの内容を取得する3.1 クラスタリングされているPINか判別3.2 クラスタリングされているPINを取得する4 TableViewとの連 ...

swift

[Swift]ログフレームワーク「CocoaLumberjack」をSwiftで使ってみた

1 はじめに2 準備3 実装3.1 出力先の設定3.2 ログの出力レベルを設定する3.3 ログの出力4 さいごに はじめに こんにちは、nukkyです。 今回はログ管理に便利なライブラリ「CocoaL ...

swift

Swiftでのパーミッション取得を簡単に

1 はじめに2 準備3 実装3.1 とりあえず表示3.2 カスタマイズ4 さいごに はじめに こんにちは、nukkyです。 今回は、アプリにはつきもののユーザへのパーミッションの確認を 簡単に行えるラ ...

Sign in with Appleの実装

1 はじめに2 Sign in with Appleとは2.1 iOS レビューガイドライン2.2 つまり3 準備4 実装5 デザイン6 さいごに7 おすすめ書籍 はじめに こんにちは、nukkyです ...

【Swift】iOS14 で変わるプライバシー主にIDFA周り

1 はじめに2 iOS14のプライバシーについて2.1 IDFAについて2.2 iOS14でどのような動きになるか2.3 今後の対策として3 その他のプライバシーについて4 さいごに5 おすすめ書籍 ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年10月
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。
Get it on App Store
Get it on Google Play