zoukankan      html  css  js  c++  java
  • iOS 瀑布流封装

    代码地址如下:
    http://www.demodashi.com/demo/12284.html

    一、效果预览

    瀑布流.gif

    功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。

    • 前言 :近几个月一直在忙公司的ChinaDaily和国务院项目,没有抽出时间来写,现在终于算是告一段落了,抽出时间来更一篇

    二、实现:主要是重写父类的几个涉及布局属性的方法,在对应的布局属性方法中根据需求自定义视图布局属性信息。详情看示例

    /** 初始化 生成每个视图的布局信息*/
    -(void)prepareLayout;
    /** 决定一段区域所有cell和头尾视图的布局属性*/
    -(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect ;
    /** 返回indexPath位置cell对应的布局属性*/
    -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
    /** 返回indexPath位置头和脚视图对应的布局属性*/
    - (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
    //返回内容高度
    -(CGSize)collectionViewContentSize;
    
    

    三、 用法:注意遵循WSLWaterFlowLayoutDelegate协议,代理方法和TableView、collectionView的代理方法用法相似。

    下面是WSLWaterFlowLayout.h中的属性方法和代理方法,含义注释的还算清晰:

    typedef enum {
        WSLVerticalWaterFlow = 0, /** 竖向瀑布流 item等宽不等高 */
        WSLHorizontalWaterFlow = 1, /** 水平瀑布流 item等高不等宽 不支持头脚视图*/
        WSLVHWaterFlow = 2,  /** 竖向瀑布流 item等高不等宽 */
        WSLLineWaterFlow = 3 /** 线性布局 待完成,敬请期待 */
    } WSLFlowLayoutStyle;//样式
    
    @class WSLWaterFlowLayout;
    
    @protocol WSLWaterFlowLayoutDelegate <NSObject>
    
    /** 竖向瀑布流 item等宽不等高 */
    -(CGFloat)waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout heightForItemAtIndexPath:(NSIndexPath *)indexPath itemWidth:(CGFloat)itemWidth;
    
    /** 水平瀑布流 item等高不等宽 */
    -(CGFloat)waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout widthForItemAtIndexPath:(NSIndexPath *)indexPath itemHeight:(CGFloat)itemHeight;
    
    /** 竖向瀑布流 item等高不等宽  列数、行数无用 */
    - (CGSize)waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
    
    /** 头视图Size */
    -(CGSize )waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForHeaderViewInSection:(NSInteger)section;
    /** 脚视图Size */
    -(CGSize )waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForFooterViewInSection:(NSInteger)section;
    
    @optional  //以下都有默认值
    /** 列数*/
    -(CGFloat)columnCountInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout;
    /** 行数*/
    -(CGFloat)rowCountInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout;
    
    /** 列间距*/
    -(CGFloat)columnMarginInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout;
    /** 行间距*/
    -(CGFloat)rowMarginInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout;
    /** 边缘之间的间距*/
    -(UIEdgeInsets)edgeInsetInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout;
    
    @end
    
    @interface WSLWaterFlowLayout : UICollectionViewLayout
    
    /** delegate*/
    @property (nonatomic, weak) id<WSLWaterFlowLayoutDelegate> delegate;
    /** 瀑布流样式*/
    @property (nonatomic, assign) WSLFlowLayoutStyle  flowLayoutStyle;
    
    @end
    
    

    初始化仅三行代码,只需设置代理和样式,item的大小、头脚视图的大小、行列数以及间距都可以在对应样式的代理方法中自定义,然后设置为UICollectionView的自动流水布局样式,并结合UICollectionView的用法使用,详情看示例:

     WSLWaterFlowLayout * _flow = [[WSLWaterFlowLayout alloc] init];
        _flow.delegate = self;
        _flow.flowLayoutStyle = WSLVerticalWaterFlow;
    

    四、项目结构:

    iOS 瀑布流封装

    代码地址如下:
    http://www.demodashi.com/demo/12284.html

    注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

  • 相关阅读:
    展示
    发布说明
    团队作业Week14
    Scrum Meeting NO.10
    Scrum Meeting NO.9
    Scrum Meeting NO.8
    Scrum Meeting NO.7
    Scrum Meeting NO.6
    ES6/ES2015核心内容
    用React & Webpack构建前端新闻网页
  • 原文地址:https://www.cnblogs.com/demodashi/p/8512624.html
Copyright © 2011-2022 走看看