概述
UIcollectionView是一个十分强大的控件,可以实现各种网格布局,简单的说基本没有 UIcollectionView 不能实现的布局,接下来我会先简单介绍一下使用过程中涉及到的一些类和
布局
UIcollectionView在初始化的时候必须要指定一个布局,布局是用来指定 cell 的位置,尺寸等.
好消息是苹果已经给我们提供了一种简单的流水布局--UICollectionViewFlowLayout,其继承自UICollectionViewLayout,当想实现一些比较特殊的布局时,我们就需要自定义布局,这个在下篇教程中我们在详细展开.现在我们来看一下UICollectionViewFlowLayout的属性
// iOS6.0以后才有的
NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewFlowLayout : UICollectionViewLayout
// 行之间的最小间距
@property (nonatomic) CGFloat minimumLineSpacing;
// item之间的最小间距
@property (nonatomic) CGFloat minimumInteritemSpacing;
// 如果cell的大小是固定的，应该直接设置此属性，就不用实现代理
@property (nonatomic) CGSize itemSize;
// 这是8.0后才能使用，评估item的大小
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);
// 支持两种滚动方向，水平滚动和竖直功能
// 因此不要再想要使用横向tableview，直接使用collectionview就okb
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
// header参考大小
@property (nonatomic) CGSize headerReferenceSize;
// footer参考大小
@property (nonatomic) CGSize footerReferenceSize;
// section的inset，用于设置与上、左、底、右的间隔
@property (nonatomic) UIEdgeInsets sectionInset;
// 9.0以后才有的属性，用于设置header/footer与tableview的section效果一样。
// 可以悬停
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@end
数据源
UIcollectionView 的设计原理和 UItableVIew一样,都是通过数据源和给其提供数据,让我们看看常用的数据源方法
//定义展示的UICollectionViewCell的个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 30;
}
//定义展示的Section的个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
//每个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;
}
代理
UIcollectionView 的代理与 UItableVIew 的代理方法一样,用来处理点击 cell 事件等
/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
{
return YES;
}
Demo
好了,看到这里的朋友,相信你们已经熟悉了 UIcollectionView的基本属性,接下来让我们一起做个小例子,来练习一下吧
效果图
切换占位文字颜色.gif
1. 创建一个 UICollectionViewController,重写其init方法,初始化流水布局
// 使用UICollectionView步骤
// 1.设置流水布局
// 2.UICollectionViewCell只能注册
- (instancetype)init
{
// 流水布局
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// 设置cell的尺寸
layout.itemSize = CGSizeMake(150, 100);
// 设置每一行的间距
layout.minimumLineSpacing = 40;
// 设置每个cell的间距
layout.minimumInteritemSpacing = 20;
// 设置每组的内边距
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
return [self initWithCollectionViewLayout:layout];
}
2. 注册 cell
static NSString *ID = @"cell";
- (void)viewDidLoad {
[super viewDidLoad];
// 注意: self.collectionView != self.view
self.collectionView.backgroundColor = [UIColor whiteColor];
// 注册cell
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
}
3. 实现数据源方法
#pragma mark - UICollectionView数据源
// 返回有多少个cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 30;
}
// 返回每个cell长什么样子
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
cell.backgroundColor = [UIColor redColor];
return cell;
}
小结
UIcollectionView 的简单使用就是这样了,下篇来自定义布局来实现一些复杂的布局