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


関連記事

【Swift】iOS14でブラウザが起動しない。

1 はじめに2 ブラウザの起動について3 原因について4 修正について5 おまけ:メールについて6 さいごに7 おすすめ書籍 はじめに こんにちはsuzukiです。iOS14がリリースされてしばらく経 ...

[Swift]AlamofireでファイルのUploadをしてみる

1 はじめに2 CarthageでAlamofireを導入する2.1 CartFileの作成とライブラリのダウンロード2.2 Xcodeの設定3 Alamofireとは3.1 AlamofireのHT ...

【Swift】XCUITestでScrollViewのテストをしてみる

1 はじめに2 XCUITestとは3 導入方法3.1 オブジェクトの配置3.2 UISCrollView3.3 ラベルとボタン4 テストのための設定4.1 ラベル5 テストコード5.1 SetUp5 ...

swift

SwiftでS3への画像アップロード

1 はじめに2 AWS上での事前準備3 CocoaPodsでAWS SDKをインストールをする4 認証の設定をする5 UIImageを保存して、URLを取得する6 S3へアップロードする7 さいごに ...

swift

[Swift]通信状況を取得できるReachability.swiftを使ってみた

1 はじめに2 準備3 実装3.1 通信状況を確認する3.2 通信可能になった時に通知する4 さいごに はじめに こんにちは、nukkyです。 今回は端末の通信状況を取得できるReachability ...

フォロー

blog-page_side_responsive

2019年10月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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