【Swift】UICollectionViewLayoutの使い方。セルのレイアウトをカスタマイズする。 | はじはじアプリ体験記

Swift
【Swift】UICollectionViewLayoutの使い方。コレクションビューのセルの配置をカスタマイズする。

  • 2016年4月12日
    Swift 2.1で検証
  • Twitterでシェア
  • Facebook
  • LINEで送る

UICollectionViewLayout

前回までの記事で、UICollectionView(以下、コレクションビュー)を使ってデータを格子状に並べる方法について説明した。⇒「記事

Collection View

 

前回の記事では、単純にセルを碁盤の目のように並べて表示したが、もっと個性のある並べ方にしたいときがある。そんなときに利用されるのがUICollectionViewLayout(以下、コレクションビューレイアウト)である。

コレクションビューレイアウトとは、コレクションビューに表示するセルのレイアウトを自由にカスタマイズするために利用されるクラスである。

コレクションビューレイアウトを継承したクラスを作成し、メソッドをオーバーライドして自作レイアウトを実装する。

 

自作レイアウトのクラスを作る。

では、実際に自作レイアウトを実装してみよう。

なお、以降の説明は「Collection Viewの使い方」で行った手順の続きからとなる。自作レイアウトにはセクションも含めることができるが、コードを把握しやすいようにするため今回はセクションの実装は行わない。

作り始める前にどのようなレイアウトにするかを考える。今回は下図のようにコレクションビューの幅の半分が1つのセルの幅になるようにし、セルがY軸方向に向かってジグザグに配置されるレイアウトを作ってみよう。

作成イメージ

 

メニューから「File」⇒「New」⇒「File...」を選択する。
新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。
Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestCollectionViewLayout」、Subclass ofに「UICollectionViewLayout」を入力し、Nextボタンを押す。
クラス名を入力

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。
クラスを作成する

 

次に、Main.storyboardを開き、コレクションビュー(下図赤枠)、アイデンティティインスペクタボタン(下図紫枠)の順にクリックして設定画面を表示する。設定項目のLayoutに「Custom」、Classに「TestCollectionViewLayout」を入力する。

これでコレクションビューに自作レイアウトが使われるようになった。
LayoutにCustomを設定する

スポンサーリンク

自作レイアウトのコードを実装する

ViewController.swiftを開き、以下のコードに変更する。

オーバーライドが必要なメソッドは「レイアウトを準備するメソッド」、「レイアウトを返すメソッド」、「全体サイズを返すメソッド」の3つである。

レイアウトを準備するメソッド」は、コレクションビューが描画される前に1回だけ呼ばれるメソッドである。コレクションビューに含まれるセルのX座標、Y座標、幅、高さを保持するUICollectionViewLayoutAttributeクラスのインスタンスを作り、インデックス番号順に並べて配列(以下、レイアウト配列)に格納しておく。

レイアウトを返すメソッド」は、コレクションビューに表示するレイアウトの配列を返すメソッド。引数rectにコレクションビューのサイズが渡ってくるが、今回は考慮不要なので、「レイアウトを準備するメソッド」で作ったレイアウト配列をそのまま返すようにした。

全体サイズを返すメソッド」は、レイアウトに従ってセルを配置したあとのレイアウトの全体サイズを返すメソッド。この値が小さいとコレクションビューをスクロールしてすべてセルを見れなくなる。

 

ViewController.swiftは修正無し。

 

以下は実際のプレイ動画

Swift記事一覧へ
  • Twitterでシェア
  • Facebook
  • LINEで送る
はじはじビットコイン目指せ!最強の暗号通貨トレーダー

コメントを残す

お名前