Collection Viewの使い方（iOS/XCode/Storyboard/UICollectionView）

28/08/13 14:36

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) 別のカスタムセルを追加してみます。つまり、２つの異なるセルを選べるようにしてみます。右のコンポーネントから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には５個
        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 8

note

Collection Viewの使い方（iOS/XCode/Storyboard/UICollectionView）