iOS開發-UICollectionView

本章通過先總體介紹UICollectionView及其常用方法，再結合一個執行個體，了解如何使用UICollectionView。

UICollectionView 和 UICollectionViewController類是iOS6 新引進的API，用于展示集合視圖，布局更加靈活，可實作多列布局，用法類似于UITableView和 UITableViewController 類。

使用UICollectionView 必須實作UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout這三個協定。

下面先給出常用到的一些方法。（隻給出常用的，其他的可以檢視相關API）

#pragma mark -- UICollectionViewDataSource

//定義展示的UICollectionViewCell的個數

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    return30;

}

//定義展示的Section的個數

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

    return1;

}

//每個UICollectionView展示的内容

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString * CellIdentifier =@"GradientCell";

    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];

    cell.backgroundColor = [UIColor colorWithRed:((10 * indexPath.row) /255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1.0f];

    return cell;

}

#pragma mark --UICollectionViewDelegateFlowLayout

//定義每個UICollectionView的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{

    return CGSizeMake(100,100);

}

//定義每個UICollectionView的 margin

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

    return UIEdgeInsetsMake(10,10, 10, 10);

}

#pragma mark --UICollectionViewDelegate

//UICollectionView被選中時調用的方法

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];

    cell.backgroundColor = [UIColor whiteColor];

}

//傳回這個UICollectionView是否可以被選擇

-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    returnYES;

}

下面通過一個例子具體介紹下。

iOS CollectionView的出現是一大福利，再也不用用TableView來定義複雜的多欄表格了，用法與Table類似，隻是Cell必須自己添加，無預設模式

由于CollectionView沒有預設的Cell布局，是以一般還是自定義友善又快捷

一、自定義Cell

1、建立類CollectionCell繼承自UICollectionViewCell

2、建立Xib，命名為CollectionCell.xib

a.選中CollectionCell.xib删掉預設的View，從控件中拖一個Collection View Cell（圖3）到畫布中，設定大小為95*116；

b.選中剛剛添加的Cell，更改類名為CollectionCell，

c.在CollectionCell.xib的CollectionCell中添加一個ImageView和一個Label

d.設定代理

e.選中CollectionCell.m ,重寫init方法

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        // 初始化時加載collectionCell.xib檔案

        NSArray *arrayOfViews = [[NSBundle mainBundle] loadNibNamed:@"CollectionCell" owner:self options:nil];

        // 如果路徑不存在，return nil

        if (arrayOfViews.count <1)

        {

            returnnil;

        }

        // 如果xib中view不屬于UICollectionViewCell類，return nil

        if (![[arrayOfViews objectAtIndex:0] isKindOfClass:[UICollectionViewCell class]])

        {

            returnnil;

        }

        // 加載nib

        self = [arrayOfViews objectAtIndex:0];

    }

    returnself;

}

f.選中CollectionCell.xib修改其identifier為CollectionCell。

二、定義UICollectionView；

1、拖動一個Collection View到指定ViewController的View上

2、連線dataSource和delegate，并建立映射，命名為CollectionView

3、選中CollectionView的标尺，将Cell Size的Width和Height改成與自定義的Cell一樣的95*116,

4、選中CollectionView的屬性,可以修改其屬性，比如是垂直滑動，還是水準滑動，選擇Vertical或Horizontal

5、選中CollectionViewCell，修改Class，繼承自CollectionCell

5、在ViewDidLoad方法中聲明Cell的類，在ViewDidLoad方法中添加，此句不聲明，将無法加載，程式崩潰

其中,CollectionCell是這個Cell的辨別（之前幾步已經定義過了。）

[self.collectionView registerClass:[CollectionCell class] forCellWithReuseIdentifier:@"CollectionCell"];

6、在ViewController.h中聲明代理

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>

7、在.m檔案中實作代理方法

//每個section的item個數

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    return12;

}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    CollectionCell *cell = (CollectionCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionCell" forIndexPath:indexPath];

    //圖檔名稱

    NSString *imageToLoad = [NSStringstringWithFormat:@"%d.png", indexPath.row];

    //加載圖檔

    cell.imageView.image = [UIImage imageNamed:imageToLoad];

    //設定label文字

    cell.label.text = [NSString stringWithFormat:@"{%ld,%ld}",(long)indexPath.row,(long)indexPath.section];

    return cell;

}