iOS 心得二 UICollectionView的基本使用

自从ios6之后，苹果给出了这个类，可以使我们快速的块状布局。

废话不多说，直接上代码：

控制器.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>

//九宫格

@property(nonatomic,weak)UICollectionView *collectionView;

//数组

@property(nonatomic,retain)NSArray *array;

@end

控制器.m

#import "ViewController.h"

#import "MyCell.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    //九宫格加载

    [self loadCollectionView];

    

    //数组内容加载

    self.array = @[@"DMNH5001.jpg",@"DMNH5002.jpg",@"DMNH5003.jpg",@"DMNH5004.jpg",@"DMNH5005.jpg",@"DMNH5006.jpg",@"DMNH5007.jpg",@"DMNH5001.jpg",@"DMNH5002.jpg",@"DMNH5003.jpg",@"DMNH5004.jpg",@"DMNH5005.jpg",@"DMNH5006.jpg",@"DMNH5007.jpg",@"DMNH5001.jpg",@"DMNH5002.jpg",@"DMNH5003.jpg",@"DMNH5004.jpg",@"DMNH5005.jpg",@"DMNH5006.jpg",@"DMNH5007.jpg",@"DMNH5001.jpg",@"DMNH5002.jpg",@"DMNH5003.jpg",@"DMNH5004.jpg",@"DMNH5005.jpg",@"DMNH5006.jpg",@"DMNH5007.jpg"];

}

-(void)loadCollectionView

{

    UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc]init];

    flow.itemSize = CGSizeMake(self.view.frame.size.width/3, self.view.frame.size.width/3);

    flow.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);

    flow.minimumInteritemSpacing = 0;

    flow.minimumLineSpacing = 0;

    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flow];

    collectionView.delegate = self;

    collectionView.dataSource = self;

    collectionView.backgroundColor = [UIColor whiteColor];

    [self.view addSubview:collectionView];

    self.collectionView = collectionView;

        //适配

    [collectionView setTranslatesAutoresizingMaskIntoConstraints:NO];

    

    //x

    NSLayoutConstraint *conx = [NSLayoutConstraint constraintWithItem:collectionView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0f constant:0.0f];

    //w

    NSLayoutConstraint *conw = [NSLayoutConstraint constraintWithItem:collectionView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0f constant:0.0f];

    //y

    NSLayoutConstraint *cony = [NSLayoutConstraint constraintWithItem:collectionView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0f constant:100.0f];

    //h

    NSLayoutConstraint *conh = [NSLayoutConstraint constraintWithItem:collectionView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f];

    

    //适配数组

    NSArray *array = @[conx,cony,conw,conh];

    [self.view addConstraints:array];

    

    //注册

    UINib *nib = [UINib nibWithNibName:@"MyCell" bundle:nil];

    [self.collectionView registerNib:nib forCellWithReuseIdentifier:@"cell"];

}

#pragma mark---

#pragma mark----九宫格代理

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

{

    return self.array.count;

}

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

{

    MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    cell.icon.image = [UIImage imageNamed:self.array[indexPath.item]];

    return cell;

}

@end

然后就是具体的item的自定义，这和表有一个区别，item必须自己nib去定义，然后在控制器里面注册，这是和表不同的

//注册

    UINib *nib = [UINib nibWithNibName:@"MyCell" bundle:nil];

    [self.collectionView registerNib:nib forCellWithReuseIdentifier:@"cell"];

注册的时候[UINib nibWithNibName:@"MyCell" bundle:nil]里的mycell就是你nib的名字

[self.collectionView registerNib:nib forCellWithReuseIdentifier:@"cell"]，cell这个事在nib里面定义的，不是你随便起的名字你要注意，不然运行直接崩溃。他的原理就是和表一样的，只是创建了屏幕那么大的一块区域的item，当你滑动的时候item划上去的会进入一个队列，等你再往下滑的时候他不会重新加载只是从这个队列里取出item就行了。

还有一块就是UICollectionView是需要你来定义它的布局形式，苹果只提供了一种形式：流式布局UICollectionViewFlowLayout

流式布局系统有默认的大小和item之间的间距。当然你可以自己来改变，下面的代码就是改变的布局形式。

UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc]init];

    flow.itemSize = CGSizeMake(self.view.frame.size.width/3, self.view.frame.size.width/3);//这个是自定义item的大小

    flow.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);//item与上左下右的间距

    flow.minimumInteritemSpacing = 0;//item之间垂直方向最小间距

    flow.minimumLineSpacing = 0;//item水平方向最小间距

下面给出自定义item的代码：

#import <UIKit/UIKit.h>

@interface MyCell : UICollectionViewCell

//图片

@property (weak, nonatomic) IBOutlet UIImageView *icon;

//标题

@property (weak, nonatomic) IBOutlet UILabel *title;

@end

#import "MyCell.h"

@implementation MyCell

- (void)awakeFromNib {

}

@end

其实item的代码编写很少，主要是要利用nib

红色圈住的地方就是你最需要注意的地方，一定要和你在控制器填写的一样才行，不然程序运行立即崩溃。

至此，一个简单的九宫格布局结束。