iOS6から追加されたUICollectionViewを弄ってみた

iOS6から追加されたUICollectionViewを弄ってみたのでそのメモ。

このUICollectionViewは、コンテンツを表示する土台を作って、セクションの数を決めて、セクション毎のセルの数を決めて、セルを返す、というように「UITableView」に似ています。

公式のリファレンスは以下になります。

UICollectionView Class Reference - Apple Developer

とりあえず動くサンプル

とりあえず動くサンプルです。

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UICollectionViewDelegate, UICollectionViewDataSource>
{
    UICollectionViewFlowLayout *_flowLayout;
    UICollectionView *_collectionView;
}

@property (retain, nonatomic) UICollectionViewFlowLayout *flowLayout;
@property (retain, nonatomic) UICollectionView *collectionView;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

@synthesize collectionView = _containerView;
@synthesize flowLayout = _flowLayout;

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self createCollectionView];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

- (void)dealloc {
    self.flowLayout = nil;
    self.collectionView = nil;
    [super dealloc];
}

-(void)createCollectionView
{
    /*UICollectionViewのコンテンツの設定 UICollectionViewFlowLayout*/
    self.flowLayout = [[UICollectionViewFlowLayout alloc]init];
    self.flowLayout.itemSize = CGSizeMake(50, 50);  //表示するアイテムのサイズ
    self.flowLayout.minimumLineSpacing = 10.0f;  //セクションとアイテムの間隔
    self.flowLayout.minimumInteritemSpacing = 12.0f;  //アイテム同士の間隔
    
    /*UICollectionViewの土台を作成*/
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:self.flowLayout];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"];  //collectionViewにcellのクラスを登録。セルの表示に使う
    
    [self.view addSubview:self.collectionView];
}

#pragma mark -
#pragma mark UICollectionViewDelegate

/*セクションの数*/
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 3;
}

/*セクションに応じたセルの数*/
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    if (section == 0) {
        return 3;
    }else if(section == 1){
        return 5;
    }else{
        return 10;
    }
}

#pragma mark -
#pragma mark UICollectionViewDataSource

/*セルの内容を返す*/
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellID = @"UICollectionViewCell";
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    
    if (indexPath.section == 0) {
        cell.backgroundColor =[UIColor redColor];
    }else if (indexPath.section == 1){
        cell.backgroundColor =[UIColor greenColor];
    }else{
        cell.backgroundColor =[UIColor blueColor];
    }
    
    return cell;
}

@end

実行画面

とりあえず動くようなものですのでレイアウトはぐちゃぐちゃです。

説明など

createCollectionViewメソッド

まずここでUICollectionViewを生成しています。UICollectionViewのインスタンスを生成し、その上にグリッドベースのレイアウトを実装するUICollectionViewFlowLayoutを乗せてコンテンツを表示するといった形になります。

以下3つはデリゲートメソッドになります。

numberOfSectionsInCollectionView:collectionViewメソッド

セクションの数を返します。今回のセクション数は3つ。

collectionView:numberOfItemsInSection:sectionメソッド

セクションに含まれるセル数を返します。

collectionView:cellForItemAtIndexPath:indexPathメソッド

セルの内容を返します。UITableViewとほとんど同じで、セルのインスタンスを作成し、そのプロパティを弄ります。

おわり

カスタムセルなども使えるので色々とできそうです。



間違いなどありましたら指摘していただけると幸いです。

参考記事

UICollectionView - Apple Note Software
Collection View 基本的な使い方 - Natsu's note