概要「UICollectionViewController」は、iOS6で新たに挿入されたクラスです。
このクラスを利用して、CoverFlowを実現させるための方法をご紹介致します。
当然、Refrectonにも対応しております。
「UICollectionViewController」を使用せず、独自レイヤーで実装させる方法もありますが、メモリ管理・キャッシュ処理が複雑になります。
OS標準の機能を可能な限り使用することが、安定動作させる近道でもあります。
但し、iOS6以上を搭載のデバイスに限定されますので、この辺りの判断は難しいところではあります。
対象クラス構成
本実装は、 「作者: Jonathan Wight <jwight@mac.com>」が管理・提供されているGit「 Coverflow」を利用します。
UICollectionViewControllerでCoverFlowを実装する方法 最も重要なクラスは、「UICollectionViewLayout」を継承している「CCoverflowCollectionViewLayout」です。 ここで動作が決定されます。 画像やリフレクションの画像設定に関しては「CDemoCollectionViewController」で行っている。 このクラスでは、画像がタップされたことを検出する「tapCell」メソッドも定義されています。 基本的には、下記メソッドを自身の処理に合わせて修正するだけで十分利用可能です。
- collectionView:cellForItemAtIndexPath:
セルを設定する処理。 - collectionView:numberOfItemsInSection:
セルの総数を取得。 - tapCell:
画像がタップされた場合の処理。 - scrollViewDidScroll:scrollView:
正面画像のタイトルを表示。
UITableView / UITableViewCell と感覚的には同じようなものですので、簡単に利用できるはずです。 全体的に、コードも簡素ですので、一通り眺めてみることをお勧め致します。
実装方法StoryBoardでの実装時に１つ注意点があります。（注意点という程でもないのですが）
それは、「CDemoCollectionViewCell」を「UICollectionReusbaleView」にすることです。
下記がStoryBoardでの実装例です。
非常に簡素に仕上がっておりますので、独自に実装する場合にも、混乱することはないと思います。 必要なクラス類も「Coverflow」フォルダに纏められていますので、自身のプロジェクトにも簡単に設定できるでしょう。
このように、美しい仕上がりで、コードも簡素ですので、無理な大きさの画像を用いない限り、処理速度にも全く問題ありません。
提供されているクラスを使用している範囲内では、下記問題（課題）も含んでおります。
- 表示される画像のアスペクト比が無視されている。
- 中央以外の画像をタップしても、センターに移動しない。
但し、
画像がタップされたことは検知できておりました。
このあたりを修正すれば、中心以外の画像をタップした場合、その画像を中心に配置させることができるでしょう。
また、画像を設定する部分を修正すれば、理想通りにアスペクト比を保ったまま表示させることも簡単なことです。
注意事項提供されているものを利用する場合には、ライセンスには十分配慮してください。 また、 Gitでの公開ですので、修正した場合には、作者に通知することも忘れないでください。 最低限のルールは守り、より良いものを構築していってください。
|
|
