瀑布流布局

2018-03-16  本文已影响10人  woniu

瀑布流布局队伍我们已经非常常见了,特别是在淘宝、京东商城里面浏览商品的时候,往往出现的就是瀑布流这种展示。视觉效果非常棒,本人也特别喜欢这种方式。俗话说“好记性不如烂笔头”,针对这类常见的UI,我觉得还是专门做下分析,同时写出一个模板(俗称“造轮子”),再一次遇到项目的时候直接使用此模板可以极大地提高开发速率。好了,我们现在开始吧。
一、首先我们来介绍一下UICollectionViewLayout相应的方法

1.当布局首次被加载时会调用prepareLayout函数
-(void)prepareLayout;

2.自定义ContentSize该方法会返回CollectionView的大小,这个方法也是自定义布局中必须实现的方法
-(CGSize)collectionViewContentSize; 

3.该方法返回一个数组,该数组中存放的是为每个Cell绑定的UICollectionViewLayoutAttributes属性
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;

4.该方法中去定制每个Cell的属性
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

5.该方法就是根据indexPath来获取Cell所绑定的layoutAtrributes, 然后去更改UICollectionViewLayoutAttributes对象的一些属性并返回
-(UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;

6.该方法是为Header View或者FooterView来定制其对应的UICollectionViewLayoutAttributes
-(UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString*)elementKind atIndexPath:(NSIndexPath *)indexPath;

UICollectionViewLayoutAttributes常用的属性:

@property (nonatomic) CGRect frame;
@property (nonatomic) CGPoint center;
@property (nonatomic) CGSize size;
@property (nonatomic) CATransform3D transform3D;
@property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGFloat alpha;
@property (nonatomic) NSInteger zIndex; // default is 0
@property (nonatomic, getter=isHidden) BOOL hidden; // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES
@property (nonatomic, strong) NSIndexPath *indexPath;
上一篇下一篇

猜你喜欢

热点阅读