ブロックチェーン・AI・システム開発の株式会社INDETAIL

CollectionViewでのアニメーション

2014.05.07
なめ橋

こんにちは。
なめ橋です。

暖かくなりましたね。
厚手のコートやマフラーはだいぶ使わなくなりましたね。
箪笥にしまうときは、しっかり防虫剤を用意しておきましょう。

CollectionViewについて

今回はCollectionViewについてです。
さらにプラスして、今まで行ったアニメーションを組み込んでみます。
組み込むアニメーションは、比較的簡単なフェードインするアニメーションにしたいと思います。

まず、CollectionViewとはなにかというと、
よく、ネットショッピング系のアプリで見る下図のような表示方法がCollectionViewです。
 
Screenshot 2014.05.01 09.30.07
 

CollectionViewは、TableViewとよく似た方法で作成することが可能です。
そのため、TableViewを扱ったことのある方なら比較的取っ付き易いと思います。
まずは、CollectionViewの作り方から見ていきましょう。

CollectionViewの作成

CollectionViewを作成するためには、TableViewと同様に、

  • UICollectionViewを親クラスとして作成する方法
  • UICollectionViewDataSourceとUICollectionViewDelegateプロトコルを読み込む方法

の2種類に分かれます。
今回は、2番目のプロトコルを読み込む方法で作成していきたいと思います。

まず、UIViewControllerを親クラスとして、クラスを作成し、
「UICollectionViewDataSource」と「UICollectionViewDelegate」プロトコルをヘッダーファイルに記載します。今回はクラス名をCustomCollectionViewControllerクラスとします。
次に、CustomCollectionViewController.mファイルに以下の3つのメソッドを記載してください。

  • numberOfSectionsInCollectionView:collectionView
  • collectionView:collectionView numberOfItemsInSection:section
  • collectionView:collectionView cellForItemAtIndexPath:indexPath

この3つが、CollectionViewを使用するために最低限必要なメソッドです。
まずは、中身を定義する前にそれぞれの役割を追ってみます。

numberOfSectionsInCollectionView:collectionView

セクション数を指定します。

collectionView:collectionView numberOfItemsInSection:section

CollectionViewに表示するセルの数を指定します。

collectionView:collectionView cellForItemAtIndexPath:indexPath

Cellに表示する内容を設定します。
設定完了後Cellを返します。
詳しい実装方法は後述します。

XIBの設定

次に、XIBの設定を行います。
まずは、デフォルトで作成されるViewを削除してください。
下図の部分をクリックしてからdeleteキーを押すと削除できます。
 
スクリーンショット 2014-04-30 20.34.24
 
削除したら、object LibraryからCollectionViewを選択し、Viewのあった箇所にドラッグします。
次に、CollectionViewを選択し、ConnectionsInspectorのdataSouceとdelegateをFile's Ownerに接続します。続けて、ReferencingOutletからFile's OwnerにViewを接続させます。これで、ConnectionsInspectorは下図のようになります。
 
スクリーンショット 2014-05-01 9.54.54
 
以上でひとまずXIBの設定は完了です。
もし、CellのサイズやPaddingを変更したい場合は下図のようにSizeInspectorの値を変更してください。
 
スクリーンショット 2014-04-30 21.41.47
 

Cellの作成

次に、実際に表示する内容を定義するCellを作成します。
最初にUICollectionViewCellを親クラスとして、新しいクラスを作成し、その後同名のXIBファイルを作成します。今回は、CustomCollectionCellとします。
Cellの場合はXIBの作成から入ります。
object Libraryから適せんオブジェクトをCellの中に追加します。
今回は以下のようにUIImageViewとUILabelを追加しました。
 
スクリーンショット 2014-04-30 20.45.50
 
作成するCellの内容が決まったら、XIBに対応するクラスを接続します。
XIBのIdentity Inspectorを選択し、ClassのところにCustomCollectionCellを指定します。(ドロップダウンリストに候補があるはずです。)
さらにRestoration IDのところに任意の名前を記載します。今回は、CustomCellとします。
ここで記載した名前は後々使用することになるので、覚えておいてください。
その後、UIImageViewとUILabelをCustomCollectionCell.hにプロパティとして接続してください。
※注意:.hファイルに定義しないと外部クラスから参照できない為です。

次に.mファイルのinitにてContentViewに、宣言したUIImageViewとUILabelを追加します。

重要なのは、3行目と4行目です。
本来ならば、XIB上に定義した物であれば自動的にContentViewに追加されるはずなのですが、どうもCollectionViewの場合、自動的にContentViewが生成されないためコード上でaddします。
以上で、Cellの定義が完了しました。

CollectionViewの作成

それでは、CustomCollectionViewControllerに戻ってメソッドを内の値を定義していきます。

numberOfSectionInCollectioniew

今回、セクションは1つのため、1を返します。

collectionViewnumberOfItemInSection

今回は、お試しということで、10を返します。
本来は表示するデータを格納している配列(Array)のcountを返したりします。

cellforitematindexpath

このメソッドがCollectionViewを作成する上で最も重要な個所になります。
まず、作成したCustomCollectionCellクラスを宣言し、dequeueReusableCellWithReuseIdentifier:forIndexPath:にCellのXIBで定義したIdentifier(CustomCell)を指定します。

その後、宣言した変数のプロパティにデータを当てはめます。

最後に作成したCellを返します。

以上でひとまず、CollectionViewの設定は完了です。デバッグ実行してみてください。
CollectionViewが表示されたでしょうか?

アニメーションの作成

残すはアニメーションの作成のみです。
アニメーションはCellを作成するcellforitematindexpath内でCellに追加したViewに対して定義します。
今回は簡単なフェードインするアニメーションを作成します。
そのため、アニメーションを作成する上で最も簡単なUIKitのanimateKeyframesWithDuration:^animations:^completion:メソッドメソッドを使用します。
コードは下記のようになります。

ここでは、1秒かけてフェードインするようにalphaの値を予め0.0にしておき、アニメーションブロックで1.0にしています。

上記を記述後、デバッグ実行してみてください。
フェードインしながらCellが表示されたでしょうか?

以上でCollectionViewのアニメーションの定義方法を終わります。

なめ橋

2013年4月に入社。 最近ようやくiOSの開発に慣れてきた新人のエンジニアです。 髪が長くなるとなめこに似ているといわれます。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。