iOS流水布局UICollectionView简单使用
2017-03-28 16:11
387 查看
引
开发中我们最常看到的可能是表视图UITableView了,但其实还有一个视图也很常见,特别是一些图片、商品、视频的展示界面,用UICollectionView来展现往往会更加方便。本文就介绍纯用代码创建UICollectionView的简单示例,效果如下图:
实现
如图所示,视图由一个个方块组成,每个方块中有一张图片以及一个标题文字。如果熟悉UITableView的话,其实很多地方都是类似的,甚至可以说UITableView是一种特殊的UICollectionView,正如正方形是一种特殊的矩形一样,UITableView就是一种每行只放一个方块的UICollectionView嘛。其实看代码的也会发现两者之间有着惊人的相似。
自定义Cell
根据UITableView的经验。首先看每个方块,也就是每个cell怎么呈现,这里的cell明显是自定义的,我们用一张图片填满cell,同时在底部居中的位置放置一个label。所以我们创建一个继承自UICollectionViewCell的类用来自定义我们的cell,代码如下:// CollectionViewCell.h @interface CollectionViewCell : UICollectionViewCell @property (nonatomic, strong) UIImageView *image;// 图片 @property (nonatomic, strong) UILabel *label;// 文字 @end // CollectionViewCell.m - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { int x = arc4random() % 10;// [0, 10)的随机数 NSLog(@"%d", x); // 图片 self.image = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)]; self.image.image = x >= 5 ? [UIImage imageNamed:@"boy.jpg"] : [UIImage imageNamed:@"girl.jpg"]; [self.contentView addSubview:self.image]; // 文字 self.label = [[UILabel alloc] initWithFrame:CGRectMake(10, frame.size.height - 25, frame.size.width - 20, 20)]; self.label.text = x >= 5 ? @"鬼助" : @"百姬"; self.label.textColor = [UIColor whiteColor]; self.label.textAlignment = NSTextAlignmentCenter; [self.contentView addSubview:self.label]; } return self; }
我们将图片和label放在.h文件是为了便于在控制器中去直接操作要显示的图片和文字,不过这里我们是直接在cell自身里确定要显示什么的。为了显得真实一点,我用了一个随机数来决定每个cell显示的图片和文字,这样在呈现的时候就不会太过千篇一律。
控制器
接着我们来创建UICollectionView,UICollectionView和UITableView的相同之处在于它们都是由DataSource填充内容并有Delegate来管理响应的,并且都实现了循环利用的优化。不同之处在于UICollectionView需要一个布局参数来决定cell是如何布局的,默认是流水布局,也就是我们最常见的形式,也就是上面图里的形式;此外,UICollectionView除了垂直滚动,还可以设置为水平滚动,只需要改变布局参数的设置就可以了;UICollectionView的cell只能通过注册来确定重用标识符,什么叫注册,我们还是看代码:- (void)viewDidLoad { [super viewDidLoad]; // cell的布局方式,默认流水布局(UICollectionViewFlowLayout) UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; // 设置滚动方式为水平,默认是垂直滚动 // [layout setScrollDirection:UICollectionViewScrollDirectionHorizontal]; // 初始化UICollectionView UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, SCREENWIDTH, SCREENHEIGHT) collectionViewLayout:layout]; collectionView.backgroundColor = [UIColor colorWithRed:235.0/255.0 green:235.0/255.0 blue:235.0/255.0 alpha:1]; // 注册cell,此处的Identifier和DataSource方法中的Identifier保持一致,cell只能通过注册来确定重用标识符 [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"myCell"]; collectionView.delegate = self; collectionView.dataSource = self; [self.view addSubview:collectionView]; }
既然我们将delegate和dataSource都设为了自己,那就要记得去遵循UICollectionViewDelegate和UICollectionViewDataSource协议。
代码中注释了一行,就是用来设置滚动方向为水平的,效果如下:
同样的内容,滚动方式变化后,呈现的效果也会变化。
接下来就是对于DataSource和Delegate的设置,这和UITableView非常像,DataSource决定显示的效果,Delegate处理点击等响应,直接看代码:
#pragma mark - UICollectionView DataSource // section数 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; } // section内行数 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 10; } // 每个cell的尺寸 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(nonnull NSIndexPath *)indexPath { return CGSizeMake(SCREENWIDTH/2 - 2, SCREENWIDTH/2 - 2); } // 垂直间距 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { return 4; } // 水平间距 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section { return 2; } // cell - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath { CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"myCell" forIndexPath:indexPath]; return cell; } #pragma mark - UICollectionView Delegate // 点击cell响应 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { CollectionViewCell *cell = (CollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath]; NSLog(@"%@", cell.label.text); }
结
以上,就是一个简单的UICollectionView的使用方式,就像UITableView可以简单也可以做的非常多样,UICollectionView也是一种乍看很平常但可以容纳非常多想象力的布局方式,只要善加利用就可以做出很好的效果,当然,什么时候用UICollectionView,什么时候用UITableView,还是要根据具体需求来定。示例工程:https://github.com/Cloudox/CollectionViewDemo
版权所有:http://blog.csdn.net/cloudox_
相关文章推荐
- iOS开发——高级篇——流水布局UICollectionViewFlowLayout的基本使用
- iOS UICollectionView简单使用
- IOS基础_ UICollectionView的简单使用
- iOS UICollectionView简单使用
- iOS开发笔记之UICollectionView的简单使用
- UICollectionView使用storyBoard完成设置自动布局,并附带简单选择功能
- iOS UICollectionViewController基本使用方法和简单的相册实现
- iOS学习笔记6- iOS UICollectionView简单使用
- iOS UICollectionView简单使用
- iOS UICollectionView简单使用
- iOS UICollectionView简单使用
- iOS UICollectionView简单使用
- 使用UICollectionView和UITableView混合布局,完成简单天气demo
- iOS UICollectionView简单使用
- iOS UICollectionView简单使用
- iOS开发 - UICollectionViewFlowLayout 流水布局
- iOS学习9:UICollectionView的简单使用
- UICollectionView的简单使用(二)— 瀑布流(石工布局)
- iOS UICollectionView简单使用
- Swift - 使用网格(UICollectionView)的自定义布局实现复杂页面