iOS UI-集合视图（UICollectionView）

BowenCollectionViewCell.xib

 #import <UIKit/UIKit.h>

 @interface BowenCollectionViewCell : UICollectionViewCell

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

 @property (weak, nonatomic) IBOutlet UILabel *lalName;
 @property (weak, nonatomic) IBOutlet UILabel *lblPosition;
 @property (weak, nonatomic) IBOutlet UIButton *btnManInfo;
 @property (weak, nonatomic) IBOutlet UITextView *textViewStory;

 @end

 #import "BowenCollectionViewCell.h"

 @implementation BowenCollectionViewCell

 - (void)awakeFromNib {
     // Initialization code
 }

 @end

 #import "ViewController.h"
 #import "BowenCollectionViewCell.h"

 /*
  集合视图：UICollertionView
  三个协议、两个代理、四或五个方法

  UICollectionViewDataSource          加载数据
  UICollectionViewDelegate            执行代理
  UICollectionViewDelegateFlowLayout  布局

  使用步骤
  0.创建单元格ID
  1.创建布局（横向布局、纵向布局）
  2.创建集合视图，设置代理
  3.注册单元格
  4.加载视图
  */

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

 @property (nonatomic, strong) UICollectionView *collectionView;
 @property (nonatomic, strong) NSIndexPath *indexPath;

 @end

 @implementation ViewController

 static NSString *cellIdentyfier = @"cellIndentyfier";

 - (void)viewDidLoad {
     [super viewDidLoad];

 //    1.创建布局（横向布局、纵向布局）
     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
     [layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

 //    2.创建集合视图，设置代理
     self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
     self.collectionView.dataSource =self;
     self.collectionView.delegate = self;
 //    3.注册单元格（item）
     [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellIdentyfier];
 //    4.加载视图
     [self.view addSubview:self.collectionView];
 //      加载nib文件
     [self.collectionView registerNib:[UINib nibWithNibName:@"BowenCollectionViewCell" bundle:[NSBundle mainBundle]] forCellWithReuseIdentifier:cellIdentyfier];

 }

 #pragma mark - 数据源
 // 加载组数
 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
 {
     return ;

 }
 // item的个数
 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 {
     return ;
 }
 // item中的单元格加载数据的方法
 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     //集合视图的单元格本身就是一个View，什么自带控件都没有
     //如果想使用集合视图的item
     //1.直接往上面添加控件（不推荐） 官方规定：这个加载方法只能加载数据
     //2.自定义item使用
     BowenCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentyfier forIndexPath:indexPath];
     cell.contentView.backgroundColor = [UIColor whiteColor];

     //每个button都是不一样的
     cell.btnManInfo.tag = indexPath.section* + indexPath.row;
     [cell.btnManInfo addTarget:self action:@selector(btnManInfoClick:) forControlEvents:UIControlEventTouchUpInside];

     return cell;
 }
 // 按钮关联方法
 - (void)btnManInfoClick:(id)sender
 {
     UIButton *tempBtn = (UIButton*)sender;
     NSInteger section = tempBtn.tag/;
     NSInteger row = tempBtn.tag%;
     switch (section) {
         case :
             if (row ==) {
                 NSLog(@"第0分组第0元素");
             }
             else{
                 NSLog(@"第0分组第1元素");
             }
             break;
         case :
             if (row ==) {
                 NSLog(@"第1分组第0元素");
             }
             else{
                 NSLog(@"第1分组第1元素");
             }
             break;
         default:
             break;
     }
 }

 #pragma mark - 代理方法
 // 监听行被选中执行的代理方法
 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
 {
     NSLog(@"%@",indexPath);
 }

 #pragma mark - 布局
 // item的尺寸
 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
 {
     return CGSizeMake(, );

 }
 // 每组的Header尺寸
 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
 {
     return CGSizeMake(, );

 }

 #pragma mark - 状态栏
 // 隐藏状态栏
 - (BOOL)prefersStatusBarHidden
 {
     return YES;
 }

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

 @end

一、UICollectionViewController的使用

1.注册cell(告诉collectionView将来创建怎样的cell)

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

2.从缓存池中取出cell

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

{

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

return cell;

}

3.重写init方法,创建布局参数

- (id)init

{

// 1.流水布局

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

// 2.每个cell的尺寸

layout.itemSize = CGSizeMake(100, 100);

return [super initWithCollectionViewLayout:layout];

}

二、UICollectionViewFlowLayout

UICollectionViewFlowLayout称为”流水布局”, 用来约束cell的显示

 

常见属性

 

Cell的尺寸

@property (nonatomic) CGSize itemSize;

cell之间的水平间距

@property (nonatomic) CGFloat minimumInteritemSpacing;

cell之间的垂直间距

@property (nonatomic) CGFloat minimumLineSpacing;

四周的内边距

@property (nonatomic) UIEdgeInsets sectionInset;

三、UICollectionView常用数据源方法

1.调用数据源的下面方法得知一共有多少组数据

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

2.调用数据源的下面方法得知每一组有多少项数据

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

3.调用数据源的下面方法得知每一项显示什么内容

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

UICollectionView的数据源必须实现第二个方法和第三个方法,第一个方法不实现默认就是1组

 

四、UICollectionView的常见属性

1.布局对象

@property (nonatomic, strong) UICollectionViewLayout *collectionViewLayout;

2.背景视图,会自动填充整个UICollectionView

@property (nonatomic, strong) UIView *backgroundView;

3.是否允许选中cell 默认允许选中

@property (nonatomic) BOOL allowsSelection;

4.是否可以多选 默认只是单选

@property (nonatomic) BOOL allowsMultipleSelection;

五、UICollectionViewFlowLayout常用属性

1.cell之间的最小行间距                                               

 @property (nonatomic) CGFloat minimumLineSpacing;

 

2.cell之间的最小列间距                                                                                                             

@property (nonatomic) CGFloat minimumInteritemSpacing;

3.cell的尺寸                                                                                                                                             

@property (nonatomic) CGSize itemSize;

 

4.cell的预估尺寸                                                                                                                         

@property (nonatomic) CGSize estimatedItemSize;

 

5.UICollectionView的滚动方向,默认是垂直滚动                                                                

 @property (nonatomic) UICollectionViewScrollDirection scrollDirection;

 

6.HeaderView的尺寸                                                

@property (nonatomic) CGSize headerReferenceSize;

 

7.FooterView的尺寸                                                       

@property (nonatomic) CGSize footerReferenceSize;

 

8.分区的四边距                                                                                                                                             

@property (nonatomic) UIEdgeInsets sectionInset;

 

9.设置是否当元素超出屏幕之后固定页眉视图位置，默认NO                    

@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds;

 

10.设置是否当元素超出屏幕之后固定页脚视图位置，默认NO                               

@property (nonatomic) BOOL sectionFootersPinToVisibleBounds

 

六、自定义布局的常用方法

1.UICollectionView将要显示时准备布局,每当布局更新时,调用该方法做布局前的准备                                                                    

- (void)prepareLayout;

 

2.创建指定索引的cell的布局属性                                             

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPat;

 

3.返回UICollectionView内所有的控件的布局属性                                

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;

 

4.自定义布局时一定要实现此方法来返回UICollectionView的contentSize,内容尺寸,UICollectionView的滚动范围                                            - (CGSize)collectionViewContentSize;

七、注册cell的三种方式:

1> 用nib(xib)来注册cell,表示cell如何去创建, 在注册同时必须给cell设置重用标识

2> 用类(纯代码)来注册cell,表示cell用代码来创建,在注册同时必须cell设置重用标识

3> 在storyboard中给cell,设置重用标识时会同时注册cell

1纯代码实现

常见错误

错误1> ICollectionView must be initialized with a non-nil layout parameter

实例化(创建)UICollectionView的同时必须指定一个非空的layout

用UICollectionViewLayout这个类直接创建出来的布局对应就是一个空的布局,里面什么也没有

一般情况用UICollectionViewFlowLayout(流水布局,它创建出来有默认的itemSize,和行间距等等)

错误警告

negative or zero item sizes are not supported in the flow layout

UICollectionViewFlowLayout 不支持负得或为0尺寸cell

当itemSize等于 CGSizeZero 数据源方法返回每一个cell的方法不会执行,说明只有cell有尺寸时才能返回cell

layout.itemSize = CGSizeZero;

用class来注册 cell(告诉collectionView中的cell如何创建),并给cell添加重用标识

[collectionView registerClass:[CZAppCell class] forCellWithReuseIdentifier:ID];

2.用xib实现

// 加载xib

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

// 通过xib来注册,告诉collectionView如何去创建cell,并指定重用标识

[self.collectionView registerNib:nib forCellWithReuseIdentifier:ID];

// 实例化xib

CZAppCell *cell = [[nib instantiateWithOwner:nil options:nil] lastObject];

// 根据xib中的cell的尺寸来设置布局属性中cell的尺寸

self.flowLayout.itemSize = cell.bounds.size;

3.用storyboard实现

给storyboard的cell会只需添加重用标识即可自动注册