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 plus iOSアプリ開発自動テストの教科書〜XCTestによる単体テスト・UIテストから、CI/CD、デバッグ技術まで 詳解 Swift 第4版

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Xcode11のデバッグ機能

1 はじめに2 Device Conditions2.1 Thermal state condition2.2 Network link condition3 Environment Override ...

UserNotificationsの使い方について

1 はじめに2 UserNotificationsフレームワーク3 基本実装3.1 デリゲートの設定3.2 ユーザー許可3.3 デバイストークン取得後3.4 バックグラウンドで通知受信3.5 フォアグ ...

swift

Swiftの配列、辞書関連メソッドの基本

1 はじめに2 配列(Array)2.1 filter2.2 map2.3 reduce3 辞書(Dictionary)3.1 filter3.2 map3.3 reduce4 さいごに はじめに 普 ...

[Swift4]ライブラリをやめてCodableでJSONを取り扱う

1 はじめに2 Codableとは2.1 Codable使いたい理由3 実装3.1 とりあえずJSONを読み込む3.2 ObjectMapperの場合3.3 ネスト配列に対応してみよう3.4 JSON ...

swift

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

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

フォロー

blog-page_side_responsive

2019年10月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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