ios开发-CollectionView的用法和一个例子

源码下载

CollectionView的用法

• CollectionView必须在创建的时候就布局
• CollectionViewCell必须注册,不能通过alloc,init创建,并且由CollectionView的布局决定位置和尺寸
• 不要通过minimumInteritemSpacing来设置cell的间距,因为设置不准确,最小只能为80

如果需要自定义布局的话,只需要自定义一个UICollectionViewFlowLayout类并且了解以下5个方法即可

// 什么时候调用:每次collectionView布局都会调用这个方法,每次collectionView刷新数据也会调用
// 一般情况下,只会调用一次
// 作用:计算所有cell的尺寸,前提条件,cell的位置固定的时候才在这计算.
// 注意:必须要调用[super prepareLayout]
- (void)prepareLayout
{
    [super prepareLayout];
}

// UICollectionViewLayoutAttributes:描述cell的布局
// 每一个cell 对应 UICollectionViewLayoutAttributes,记录frame,center,transform等等
// 返回所有cell的布局,可以一次性返回,也可以随着用户滚动,返回对应cell的布局
// rect:collectionView中某个范围
// 作用:给定一个区域,就会返回这个区域内所有cell对应的布局对象
// 确定cell布局
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return nil;
}
// 是否允许当滚动屏幕刷新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
   return YES;    
}

// 作用:返回collectionView最终滚动偏移量
// 调用时刻:用户拖动的时候,手指离开就会调用
// proposedContentOffset:就是最终滚动偏移量
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    CGPoint targetP = [super targetContentOffsetForProposedContentOffset:proposedContentOffset withScrollingVelocity:velocity];

}
// 返回collectionView内容尺寸
- (CGSize)collectionViewContentSize
{
    return [super collectionViewContentSize];
}

接下来看一下使用CollectionView写的一个小例子

具体如何创建CollectionView可以看下源码,这里不细说,主要讲下如何布局和定位

• 通过重写layoutAttributesForElementsInRect:来获得给定区域内的cell的布局,在这个方法里可以改变cell的比例
  • 通过rect来取得对应cell的布局

NSArray *array = [super layoutAttributesForElementsInRect:rect];

• 然后遍历array,来获取cell离中心点的距离

CGFloat delta = fabs(att.center.x - offset - collectionW * 0.5);```
  - 通过```CGAffineTransformMakeScale```方法来完成改变比例动画

- 通过重写```targetContentOffsetForProposedContentOffset:```来完成cell的定位
  - 也是先取出cell的布局

NSArray *attrs = [super layoutAttributesForElementsInRect:targetRect];

  - 然后遍历```array```来获取离中心点最近的间距值
  - 这里会有个小Bug,```proposedContentOffset.x```有可能会等于-0,只需要判断下```proposedContentOffset.x```小于0时重新将```proposedContentOffset.x```赋值为0

还在学习中,若有错误请指出,谢谢!!