Git Product home page Git Product logo

wsl2ls / wslwaterflowlayout Goto Github PK

View Code? Open in Web Editor NEW
333.0 9.0 49.0 48.06 MB

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

License: MIT License

Objective-C 87.97% Ruby 12.03%
uicollectionviewlayout uicollectionview

wslwaterflowlayout's Introduction

WSLWaterFlowLayout

简书地址:https://www.jianshu.com/p/9fafd89c97ad ( 此库年久失修,不建议直接使用,可以学习看看)

瀑布流

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

  • 前言 :近几个月一直在忙公司的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 {
    WSLWaterFlowVerticalEqualWidth = 0, /** 竖向瀑布流 item等宽不等高 */
    WSLWaterFlowHorizontalEqualHeight = 1, /** 水平瀑布流 item等高不等宽 不支持头脚视图*/
    WSLWaterFlowVerticalEqualHeight = 2,  /** 竖向瀑布流 item等高不等宽 */
    WSLWaterFlowHorizontalGrid = 3,  /** 特为国务院客户端原创栏目滑块样式定制-水平栅格布局  仅供学习交流*/
    WSLLineWaterFlow = 4 /** 线性布局 待完成,敬请期待 */
} WSLFlowLayoutStyle; //样式

@class WSLWaterFlowLayout;

@protocol WSLWaterFlowLayoutDelegate <NSObject>

/**
 返回item的大小
 注意:根据当前的瀑布流样式需知的事项:
 当样式为WSLWaterFlowVerticalEqualWidth 传入的size.width无效 ,所以可以是任意值,因为内部会根据样式自己计算布局
 WSLWaterFlowHorizontalEqualHeight 传入的size.height无效 ,所以可以是任意值 ,因为内部会根据样式自己计算布局
 WSLWaterFlowHorizontalGrid   传入的size宽高都有效, 此时返回列数、行数的代理方法无效,
 WSLWaterFlowVerticalEqualHeight 传入的size宽高都有效, 此时返回列数、行数的代理方法无效
 */
- (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的大小、头脚视图的大小、行列数以及间距都可以在对应样式的代理方法中自定义:

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

更新于2018/8/12: 新增样式4-栅格布局样式的瀑布流,如下图 简书地址:https://www.jianshu.com/p/f40bbe437265

栅格布局样式

赞.gif

GitHub项目README.md设置徽标(环境、build、下载量...)

GitHub上 README 增加图片标签

shields.io标签生成官网

http://github.com/donggelaile/HDCollectionView.git

推荐学习资料:

Swift从入门到精通

恋上数据结构与算法(一)

恋上数据结构与算法(二)

Welcome To Follow Me

您的follow和start,是我前进的动力,Thanks♪(・ω・)ノ

欢迎扫描下方二维码关注——奔跑的程序猿iOSer——微信公众号:iOS2679114653 本公众号是一个iOS开发者们的分享,交流,学习平台,会不定时的发送技术干货,源码,也欢迎大家积极踊跃投稿,(择优上头条) ^_^分享自己开发攻城的过程,心得,相互学习,共同进步,成为攻城狮中的翘楚!

iOS开发进阶之路.jpg

wslwaterflowlayout's People

Contributors

wsl2ls avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wslwaterflowlayout's Issues

scrollToItemAtIndexPath不能移动

[collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:2 inSection:3] atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES],调用之后collectionview不移动是怎么回事?

头部悬停

您好,请问这个如果需要头部悬停的话怎么处理?

如果实现了代理方法返回头部脚部视图,如果我只返回头部 脚部返回nil会直接崩溃

//返回头脚视图

  • (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
    // CollectionHeaderAndFooterView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"sectionHeader" forIndexPath:indexPath];
    // headerView.titleLabel.text = @"头视图";
    // headerView.titleLabel.backgroundColor = [UIColor orangeColor];
    // return headerView;
    return nil;

    }else{
    CollectionHeaderAndFooterView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"sectionFooter" forIndexPath:indexPath];
    footerView.titleLabel.text = @"脚视图";
    footerView.titleLabel.backgroundColor = [UIColor cyanColor];
    return footerView;

    }
    }

加入上拉刷新cell会有错乱

处在底部的时候刷新layout加载有问题不会完全加载出来只有滚动到cell 位置时候才会更新Layout 不只是不是apple 的bug

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.