Collection Viewの使い方(iOS/XCode/Storyboard/UICollectionView)

iOS6から追加されたUICollectionViewの使い方、UICollectionViewCell カスタムセルの作り方のメモ。基本的にはUITableViewと同じ感じでつくれます。
(1) プロジェクト新規作成して、UIViewController上にCollection Viewを置きます。
Pasted Graphic

後のために、Collection Viewのバックグラウンドをここでは白にしておきます。

Pasted Graphic 7


(2) 左のCollection ViewからCollection View Cell を選ぶと、その部分が青で四角く表示されるので、その四角を大きくしたり、適当にラベルとか貼り付けます。
Pasted Graphic 1


(3) 別のカスタムセルを追加してみます。つまり、2つの異なるセルを選べるようにしてみます。右のコンポーネントからCollection View Cellをドラッグして追加。その上に、(2)同様に色々はりつけていきます。
Pasted Graphic 2


(4) (2) と (3) で作ったセルに、Identifierを設定します。例えば(2)のセルにはcell1, (3)のセルにはcell2 など。
Pasted Graphic 3

セルの中の各要素に後でアクセスするために、各ViewにTagを設定します。下図ではUIImageに2のTagを設定してます。Tagの番号は1からつけてください。なお、異なるセル内にある部品だったら、Tag番号はかぶっていてもいいです。
このあたりは、UICollectionViewCellのサブクラスをつくってその中で参照をもたせてやって、プログラムからアクセスするみたいなやり方でもいいです。

Pasted Graphic 6


(5) Collection Viewをソースコードに紐付け。Collection ViewでCtrl押しながらうにょ〜と.hに登録
Pasted Graphic 5


(6) 後はコードを書くだけ。
[ViewController.h]

#import

@interface ViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate>
@property (weak, nonatomic) IBOutlet UICollectionView *myCollectionView;


@end




[ViewController.m]

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize myCollectionView;

- (
void)viewDidLoad
{
[
super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

[
myCollectionView setDataSource:self];
[
myCollectionView setDelegate:self];
}

- (
void)didReceiveMemoryWarning
{
[
super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

#pragma mark -collection view delegate

- (
NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
//とりあえずセクションは2
return 2;
}

-(
NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
if(section==0){//セクション0には5個
return 5;
}
else if(section==1){ //セクション1には7
return 7;
}
else{
return 0;
}
}


//Method to create cell at index path
-(
UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

UICollectionViewCell *cell;

if(indexPath.section==0){//セクション0のセル

cell = [collectionView
dequeueReusableCellWithReuseIdentifier:@"cell1" forIndexPath:indexPath];
cell.
backgroundColor = [UIColor greenColor];

UILabel *label = (UILabel *)[cell viewWithTag:1];
label.
text = [NSString stringWithFormat:@"ラベル%d-%d",indexPath.section,indexPath.row];

UIImageView *image = (UIImageView *)[cell viewWithTag:2];
image.
backgroundColor = [UIColor redColor];

}
else if(indexPath.section==1){//セクション1のセル
cell = [collectionView
dequeueReusableCellWithReuseIdentifier:@"cell2" forIndexPath:indexPath];
cell.
backgroundColor = [UIColor yellowColor];

UIButton *button = (UIButton *)[cell viewWithTag:1];
button.
titleLabel.text = [NSString stringWithFormat:@"%d-%d",indexPath.section,indexPath.row];

UILabel *label = (UILabel *)[cell viewWithTag:2];
label.
text = [NSString stringWithFormat:@"ラベル%d-%d",indexPath.section,indexPath.row];
}

return cell;
}


- (
void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
//クリックされたらよばれる
NSLog(@"Clicked %d-%d",indexPath.section,indexPath.row);
}


@end




こんな感じ。

Pasted Graphic 9


セルをクリックすると、ログが出ます。

Pasted Graphic 8