UICollectionView几种简单布局(线性,圆形,商品)

概述

上一篇博客中,简单了解了一下 UICollectionView的构成和使用,在这篇文章中我们来学习一下几种经典的布局,在这之前我们需要来了解一个比较重要的类

UICollectionViewLayoutAttributes

UICollectionViewLayoutAttributes是一个非常重要的类,由他提供给 cell各种属性,看一下其有哪些重要的属性:

  • @property (nonatomic) CGRect frame; // 大小
  • @property (nonatomic) CGPoint center; // 中心位置
  • @property (nonatomic) CGSize size; // 形状
  • @property (nonatomic) CATransform3D transform3D; // 3D 动画
  • @property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0); //尺寸
  • @property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0); // 形变
  • @property (nonatomic) CGFloat alpha; // 透明度
  • @property (nonatomic, getter=isHidden) BOOL hidden; // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES
    从上面可以看出,其实一个 cell 对应一个UICollectionViewLayoutAttributes对象,这个对象决定了cell 的 fram 等属性

线性布局

11694552-d51632332e217762

线性布局.png

从图片来看,图片可以左右滑动,并且停留在屏幕最中间的 cell 会自动放大,这个简单的效果,让我们来看看是如何实现的
首先,我们来考虑用系统的流水布局来实现这个效果,随后发现系统并没有提供相关 API, 接下来需要我们自定义一个线性布局,这个布局继承自系统提供的流水布局
用来做布局的初始化操作

返回一个数组,数组内存放着 rect 范围内所有元素的排布

返回值决定了 collectionVIew 停止滚动时的偏移量

需要注意的是,当 collectionView的显示范围发生变化时,会调用此方法来决定是否重新刷新 UI


商品展示

12694552-031730fcd9981e45

商品展示.png

商品展示效果可以上下滑动,图片交错排布,这个布局需要继承自UICollectionViewLayout(其实流水布局就继承自他),因为我们不需要流水布局为我们计算一些布局
懒加载一个数组,里面存放着布局属UICollectionViewLayoutAttributes

准备工作,计算好返回的属性

显示范围内的属性

collectionview 的内容大小


圆形布局

13694552-449d8e8d60315ddc

圆形布局.png

这是一个圆形布局,自定义UICollectionViewLayout实现

 

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部