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版

page_footer_300rect




page_footer_300rect




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

swift

[Swift]Schemaを使用してURLの接続先を切り替える

1 はじめに2 XCodeのBuildConfigurationとは3 スキーマとは4 スキーマの追加方法5 スキーマの設定変更6 開発と本番で異なる通信の接続先を設定する7 さいごに はじめに はじ ...

swift

UITableViewでTableViewCell(Xib)を使ってみた

1 はじめに1.1 前提条件1.2 事前準備2 TableViewを準備3 Xibを準備4 tableviewに表示するcellにxibを指定する5 さいごに はじめに どうも、はじめです。 今回はX ...

swift

[Swift]UIViewからUIImageを作成しローカルに保存

1 はじめに1.1 前提条件2 実装2.1 UIViewからUIImageへ2.2 UIImageをローカルに保存2.3 おまけ:画像のリサイズ3 さいごに4 おすすめ書籍 はじめに こんにちは、nu ...

swift

[Swift3]で直感的にアニメーションが記述できるライブラリ「Cheetah」

1 はじめに2 準備3 実装3.1 準備3.2 移動3.3 回転と拡大3.4 速度調整3.5 繰り返し3.6 アニメーションの終了4 さいごに はじめに こんにちは、nukkyです。 今回は、仕事でV ...

swift

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

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

フォロー

follow us in feedly

page_side_300rect

2019年10月
« 9月 11月 »
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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