一、UICollectionView是什么

二、UICollectionView使用技巧

三、成品展示

一、UICollectionView是什么

UICollectionView.png

二、UICollectionView使用技巧

RootViewController.m

#import "RootViewController.h"
#import "CustomCollectionViewCell.h"

@interface RootViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

@property (nonatomic,retain)NSDictionary *itemDic; // 承载一个item上面显示的图片和文字
@property (nonatomic,retain)NSMutableArray *allDataArray; // 成方所有的item上显示的内容，其实就是盛放小字典
@end

@implementation RootViewController
- (NSMutableArray *)allDataArray{
    if (!_allDataArray) {
        _allDataArray = [[NSMutableArray alloc]init];
    }return _allDataArray;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    for (int i = 1; i < 20; i++) {
      
        NSDictionary *itemDic = [[NSDictionary alloc] initWithObjectsAndKeys:
                                   [NSString stringWithFormat:@"%d.jpg",i],@"imageName",
                                   [NSString stringWithFormat:@"我是第%d个妹子",i] ,@"textLable",
                                   nil];
        [self.allDataArray addObject:itemDic];

    }
    
   self.navigationItem.title = @"github";
    // 由于初始化集合视图需要布局对象，所以我们才需要初始化布局对象，并且设置它的某些属性
     // 这个是系统提供的布局类，可以布局一些比较规则的布局。
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    // 设置每个item的大小，
    flowLayout.itemSize = CGSizeMake(120, 160);
//    flowLayout.itemSize = CGSizeMake(CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame));
    // 设置列的最小间距
    flowLayout.minimumInteritemSpacing = 10;
    // 设置最小行间距
    flowLayout.minimumLineSpacing = 15;
    // 设置布局的内边距
    flowLayout.sectionInset = UIEdgeInsetsMake(15, 15, 15, 15);
    // 滚动方向
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
//    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
      // 如果未设置背景颜色是黑色设置背景颜色
    collectionView.backgroundColor = [UIColor whiteColor];
    // 设置代理
    collectionView.delegate = self;
    collectionView.dataSource = self;
//    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"CELL"];
    [collectionView registerClass:[CustomCollectionViewCell class] forCellWithReuseIdentifier:@"CELL"];
    
    [self.view addSubview:collectionView];
}



// 返回分区数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    
    return 1;
}

// 每个分区多少个item
- (NSInteger )collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
    return _allDataArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CELL" forIndexPath:indexPath];
    CustomCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CELL" forIndexPath:indexPath];
    // 取出每个item所需要的数据
    NSDictionary *dic = [_allDataArray objectAtIndex:indexPath.item];
    // 取出图片名称
    NSString *imageString = [dic objectForKey:@"imageName"];
    cell.imageView.image = [UIImage imageNamed:imageString];
    // 取出文字
    NSString *textString = [dic objectForKey:@"textLable"];
    cell.titleLabel.text = textString;
    cell.backgroundColor = [UIColor colorWithRed:arc4random()%256/256.0 green:arc4random()%256/256.0 blue:arc4random()%256/256.0 alpha:1];
    
    
    return cell;
}

// 点击图片的方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"我点击了%ld图片！！！",indexPath.item + 1);
    
}



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

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end

CustomCollectionViewCell.h

#import <UIKit/UIKit.h>

@interface CustomCollectionViewCell : UICollectionViewCell
@property (nonatomic,retain)UIImageView *imageView; // 显示图片
@property (nonatomic,retain)UILabel *titleLabel; // 显示文字

@end

CustomCollectionViewCell.m

#import "CustomCollectionViewCell.h"

@implementation CustomCollectionViewCell
- (UIImageView *)imageView{
    if (!_imageView) {
        _imageView = [[UIImageView alloc] initWithFrame:self.viewForFirstBaselineLayout.bounds];
        [self.contentView addSubview:_imageView];
    }return _imageView;
}

- (UILabel *)titleLabel{
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.bounds) - 30, CGRectGetWidth(self.bounds), 30)];
        [self.contentView addSubview:_titleLabel];
    }return _titleLabel;
}
@end

三、成品展

UICollectionView简单运用.png