UICollectionView

UICollectionView的使用

自定义流水布局

1.1 collectionView和tableView

区别:布局(collectionView需要自己手动布局,而tableView不需要,系统会自动帮我们布局)

共同点:循环利用(定义一个重用标识就可以实现循环利用)

1.2 添加collectionView

注意点:

初始化必须要传入布局(流水布局:九宫格布局)

UICollectionViewCell必须注册

必须自定义cell

步骤:创建流水布局;创建UICollectionView;设置数据源







效果图:



分析:这并不能满足我们的需求,我们需要展示图片数据,所以我们必须自定义cell,因为里面的图片格式都是一样的,可以使用xib描述.

1.3方法的抽取

为了简化代码,使得代码简单明了,我们就把方法进行了抽取

方式一:





方式二:

1.4自定义流水布局

思路:照片浏览布局:流水布局,在拖动的时候,在原来的基础上重新计算下布局->在原来功能上再添加功能,自定义流水布局.

自定义类:重写方法,达到一些效果

复杂效果:分析 - > 解决:cell离中心点的距离越近就越大,越远就越小

自定义布局,重写5个方法:

// 什么时候调用:一开始布局就会调用,UICollectionView刷新的时候也会调用
// 作用:计算所有的cell布局,条件:cell布局固定
- (void)prepareLayout{
[super prepareLayout];
}

// 作用:返回每个cell布局,
// 给定一个区域,就返回这个区域内所有cell布局
// 允许一次性返回所有cell布局
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{

//获取显示区域
CGRect visiableRect = self.collectionView.bounds;
//获取显示区域内的cell布局
NSArray *attributes =  [super layoutAttributesForElementsInRect:visiableRect];

//计算collectionView的偏移量x
CGFloat offSetX = self.collectionView.contentOffset.x;
//遍历cell布局
for (UICollectionViewLayoutAttributes *attr in attributes) {
//计算一下离中心的距离
CGFloat delta = fabs(attr.center.x - offSetX - kscreenW * 0.5);
//计算缩放比例 1 ~ 0.5
CGFloat scale = 1 - delta / (kscreenW * 0.5) * 0.5;
//缩放变换
attr.transform = CGAffineTransformMakeScale(scale, scale);
};
return attributes;
}

// Invalidate:刷新
// 是否允许在拖动的时候刷新布局
// 谨慎使用,YES:只要一滚动就会布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}

// 什么时候调用:手动拖动UICollectionView,当手指离开的时候,就会调用
// 作用:返回UICollectionView最终的偏移量
// proposedContentOffset:最终的偏移量
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
//获取显示区域
CGRect visiableRect = CGRectMake(proposedContentOffset.x, 0, self.collectionView.bounds.size.width, MAXFLOAT);

//获取显示区域的cell布局
NSArray *attributes = [super layoutAttributesForElementsInRect:visiableRect];
//遍历cell布局,判断离center最近的cell
CGFloat minDelta = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attr in attributes) {
//计算离中心点的距离
CGFloat delta = attr.center.x - proposedContentOffset.x - kscreenW * 0.5;
//计算最小的距离
if (fabs(delta) < fabs(minDelta)) {
minDelta = delta;
}
};
//因为我们是从右往左滑动
proposedContentOffset.x += minDelta;

//考虑到小于0的情况的处理
if (proposedContentOffset.x < 0) {
proposedContentOffset.x = 0;
}

return proposedContentOffset;
}

// 设置collectionView滚动范围
- (CGSize)collectionViewContentSize {
return [super collectionViewContentSize];
}

UICollectionView滚动范围不需要手动管理,布局会自动计算.UITableView滚动范围也不需要手动管理,自动根据内容计算.