- UICollectionView和UITableView的简单比较
- UICollectionView的基本使用
- UICollectionView实现无限轮播
- 瀑布流布局
UICollectionView和UITableView的简单比较
UICollectionView 和 UITableView非常的相似,但是使用起来却比UITableView 强大很多.
二者的使用比较:
相同点
- 都是通过
datasource和delegate来驱动的，因此在使用的时候必须实现数据源与代理协议方法; - 性能上都实现了循环利用的优化。
不同点
- UITableView的cell是系统自动布局好的，不需要我们布局。但UICollectionView的cell是需要我们自己布局的。所以我们在创建UICollectionView的时候必须传递一个布局参数，系统帮助我们提供并实现了一个流水布局
UICollectionViewFlowLayout - UITableView的滚动方式只能是垂直方向， 而UICollectionView既可以垂直滚动，也可以水平滚动；
- UICollectionView的cell只能通过注册来确定重用标识符。
UICollectionView的基本使用
我们来看看如下代码:
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
GSCollectionVC *vc = [[GSCollectionVC alloc] init];
[self.navigationController pushViewController:vc animated:YES];
}
运行起来之后点击View,此时系统给我们抛出如下错误:
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'UICollectionView must be initialized with a non-nil layout parameter'
上面我们说过CollectionView在初始化的时候必须传递一个布局参数,所以这里我们需要在GSCollectionVC中重写init方法,指定布局方式
- (instancetype)init{
// 设置流水布局
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(ScreenWidth/7, ScreenWidth/7);
layout.minimumLineSpacing = 0;
layout.minimumInteritemSpacing = 0;
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 设置组头大小
layout.headerReferenceSize = CGSizeMake(ScreenWidth, ScreenWidth/7);
return [self initWithCollectionViewLayout:layout];
}
下面我们来看看 UICollectionViewDataSource UICollectionViewDelegate 和UICollectionViewDelegateFlowLayout中的常用方法:
- (void)viewDidLoad {
[super viewDidLoad];
_dayAry = [NSMutableArray array];
[self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([DateCell class]) bundle:nil] forCellWithReuseIdentifier:cellID];
//注册headerView 此处的ReuseIdentifier 必须和 cellForItemAtIndexPath 方法中 一致
[self.collectionView registerNib:[UINib nibWithNibName:@"DateHeadView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"DateHeadView"];
[self dataHandle:[[NSDate date] description]];
}
#pragma mark <UICollectionViewDataSource>
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return _dayAry.count;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
DateCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
cell.textLabel.text = [_dayAry[indexPath.row] description];
return cell;
}
//要想使该方法生效必须设置组头或者组尾部大小
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"DateHeadView" forIndexPath:indexPath];
if(headView == nil)
{
headView = [[UICollectionReusableView alloc] init];
}
return headView;
}
return nil;
}
#pragma mark <UICollectionViewDelegate>
//点击item方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
cell.backgroundColor = [UIColor greenColor];
}
//取消点击item方法
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor];
}
#pragma mark <UICollectionViewDelegateFlowLayout>
/**
* 除了在上面直接设置layout的一些属性来设置间距等,也可以使用该代理方法来指定布局方式,该优先级要高于上面直接指定的方式
*/
//设置itemSize
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(ScreenWidth/7, ScreenWidth/7);
}
//设置水平间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return 0;
}
//设置垂直间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 0;
}
//设置每个item的UIEdgeInsets
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(5, 5, 5, 5);
}
//设置headerView的尺寸大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
return CGSizeMake(ScreenWidth, ScreenWidth/7);
}
@end
运行之后 效果图如下:
image
这里我贴一下日期计算的几个关键的代码:
/**
* 根据所传递的日期计算当前月份的天数
**/
+ (NSInteger)totalDaysInMonthFromDate:(NSDate*)date{
NSRange dayRange = [[NSCalendar currentCalendar] rangeOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitMonth forDate:date];
return dayRange.length;
}
/**
* 根据所传递的日期计算当前月份的第一天是星期几
**/
+ (NSInteger)weekDayMonthOfFirstDayFromDate:(NSDate*)date{
NSInteger firstDayOfMonthInt = [[NSCalendar currentCalendar] ordinalityOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitWeekOfMonth forDate:date];
return firstDayOfMonthInt - 1;
}
- (void)dataHandle:(NSString*)dateStr{
[_dayAry removeAllObjects];
//计算当月第一天星期几
NSInteger firstWeekDay = [EOCDateModel weekDayMonthOfFirstDayFromDate:[NSDate date]];
//计算当月共有多少天
NSInteger dayCount = [EOCDateModel totalDaysInMonthFromDate:[NSDate date]];
// 补充当月星期几前面的空白
for (int i = 0; i< firstWeekDay; i++) {
[_dayAry addObject:@""];
}
for (int i = 0; i< dayCount; i++) {
[_dayAry addObject:@(i+1)];
}
// 补后面余下的空白
int leftDay = 0;
if (_dayAry.count%7) {
leftDay = 7 - _dayAry.count%7;
}
for (int i = 0; i< leftDay; i++) {
[_dayAry addObject:@""];
}
[self.collectionView reloadData];
}
UICollectionView实现无限轮播
因为CollectionView的循环利用,所以我们就无需在自己创建缓存池了,如果用ScrollView来实现无限轮播,我们还需要自己去创建缓存机制.
网上关于无限轮播的文章非常的多,这里我主要记录一下自己的实现思路
- 假设我们有5张轮播图,我们可以为
CollectionView设置100组数据,当程序执行时候,立马让CollectionView滚动到最中间的那组数据上
//默认显示最中间的那组数据
[self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:MaxSectionNum/2] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
- 当定时器开始运行的时候,在
nextPage方法中 让CollectionView滚动到最中间的那组数据中
//开启定时器
- (void)startTimer{
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)nextPage{
//获取当前正在展示的位置
NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
//最中间的那组数据
NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForRow:currentIndexPath.item inSection:MaxSectionNum/2];
//马上显示最中间的那组数据上
[self.collectionView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
//计算下一组数据
NSInteger nextItem = currentIndexPathReset.item + 1;
NSInteger nextSection = currentIndexPathReset.section;
if (nextItem == self.news.count) {
nextItem = 0;
nextSection ++;
}
NSIndexPath *nextIndexPath = [NSIndexPath indexPathForRow:nextItem inSection:nextSection];
//滚动到下一组数据
[self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}
具体demo可以参考GitHub链接
瀑布流布局
瀑布流布局在很多应用中非常常见，效果图如下：
image
实现思路
（1）继承自UICollectionViewLayout；
（2）几个需要重载的方法：
/*
* 初始化
*/
- (void)prepareLayout;
/*
* 返回rect中的所有的元素的布局属性
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
/*
* 返回对应于indexPath的位置的cell的布局属性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath；
/*
* 返回collectionView的内容的尺寸
*/
- (CGSize)collectionViewContentSize;
具体demo可以参考GitHub链接
网友评论