美文网首页
瀑布流布局

瀑布流布局

作者: woniu | 来源:发表于2018-03-16 11:37 被阅读10次

瀑布流布局队伍我们已经非常常见了,特别是在淘宝、京东商城里面浏览商品的时候,往往出现的就是瀑布流这种展示。视觉效果非常棒,本人也特别喜欢这种方式。俗话说“好记性不如烂笔头”,针对这类常见的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;

相关文章

  • 瀑布流布局 的学习

    1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...

  • 瀑布流、木桶布局

    瀑布流 瀑布流效果代码 木桶布局 木桶布局效果(加载有点慢)代码

  • 瀑布流照片墙布局

    title: 瀑布流照片墙布局 瀑布流概念 瀑布流布局是错落式的布局方式。它有一个特点,整个布局以列为单位,下一个...

  • CSS经典布局

    圣杯布局 瀑布流

  • 瀑布流

    瀑布流布局瀑布流jsonp新闻页

  • 瀑布流布局_木桶布局

    题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...

  • 瀑布流和懒加载结合

    实现一个瀑布流布局效果 瀑布流

  • 瀑布流

    什么是瀑布流: 欣赏 pinterest 样式分析 瀑布流,又被称作为瀑布流式布局,是一种比较流行的网站页面布局方...

  • 瀑布流

    1、什么是瀑布流 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚...

  • 瀑布流的三种实现

    先来欣赏三个瀑布流的网站 pinterest 淘宝爱逛街 蘑菇街 什么是瀑布流? 瀑布流,又称瀑布流式布局。 这种...

网友评论

      本文标题:瀑布流布局

      本文链接:https://www.haomeiwen.com/subject/hdplqftx.html