瀑布流
功能描述:WSLWaterFlowLayout 是在繼承于UICollectionViewLayout的基礎(chǔ)上封裝的帶頭腳視圖的瀑布流控件。目前支持豎向瀑布流(item等寬不等高、支持頭腳視圖)、水平瀑布流(item等高不等寬 不支持頭腳視圖)、豎向瀑布流( item等高不等寬、支持頭腳視圖)、柵格布局瀑布流 4種樣式的瀑布流布局。
前言 :近幾個(gè)月一直在忙公司的ChinaDaily項(xiàng)目,沒有抽出時(shí)間來寫簡(jiǎn)書,現(xiàn)在終于算是告一段落了,抽出時(shí)間來更一篇
實(shí)現(xiàn):主要是重寫父類的幾個(gè)涉及布局屬性的方法,在對(duì)應(yīng)的布局屬性方法中根據(jù)需求自定義視圖布局屬性信息。詳情看示例
/** 初始化 生成每個(gè)視圖的布局信息*/
-(void)prepareLayout;
/** 決定一段區(qū)域所有cell和頭尾視圖的布局屬性*/
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect ;
/** 返回indexPath位置cell對(duì)應(yīng)的布局屬性*/
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
/** 返回indexPath位置頭和腳視圖對(duì)應(yīng)的布局屬性*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
//返回內(nèi)容高度
-(CGSize)collectionViewContentSize;
- 用法:注意遵循WSLWaterFlowLayoutDelegate協(xié)議,代理方法和TableView、collectionView的代理方法用法相似。
下面是WSLWaterFlowLayout.h中的屬性方法和代理方法,含義注釋的還算清晰:
typedef enum {
WSLWaterFlowVerticalEqualWidth = 0, /** 豎向瀑布流 item等寬不等高 */
WSLWaterFlowHorizontalEqualHeight = 1, /** 水平瀑布流 item等高不等寬 不支持頭腳視圖*/
WSLWaterFlowVerticalEqualHeight = 2, /** 豎向瀑布流 item等高不等寬 */
WSLWaterFlowHorizontalGrid = 3, /** 特為國(guó)務(wù)院客戶端原創(chuàng)欄目滑塊樣式定制-水平柵格布局 僅供學(xué)習(xí)交流*/
WSLLineWaterFlow = 4 /** 線性布局 待完成,敬請(qǐng)期待 */
} WSLFlowLayoutStyle; //樣式
@class WSLWaterFlowLayout;
@protocol WSLWaterFlowLayoutDelegate <NSObject>
/**
返回item的大小
注意:根據(jù)當(dāng)前的瀑布流樣式需知的事項(xiàng):
當(dāng)樣式為WSLWaterFlowVerticalEqualWidth 傳入的size.width無效 ,所以可以是任意值,因?yàn)閮?nèi)部會(huì)根據(jù)樣式自己計(jì)算布局
WSLWaterFlowHorizontalEqualHeight 傳入的size.height無效 ,所以可以是任意值 ,因?yàn)閮?nèi)部會(huì)根據(jù)樣式自己計(jì)算布局
WSLWaterFlowHorizontalGrid 傳入的size寬高都有效, 此時(shí)返回列數(shù)、行數(shù)的代理方法無效,
WSLWaterFlowVerticalEqualHeight 傳入的size寬高都有效, 此時(shí)返回列數(shù)、行數(shù)的代理方法無效
*/
- (CGSize)waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
/** 頭視圖Size */
-(CGSize )waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForHeaderViewInSection:(NSInteger)section;
/** 腳視圖Size */
-(CGSize )waterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout sizeForFooterViewInSection:(NSInteger)section;
@optional //以下都有默認(rèn)值
/** 列數(shù)*/
-(CGFloat)columnCountInWaterFlowLayout:(WSLWaterFlowLayout *)waterFlowLayout;
/** 行數(shù)*/
-(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
初始化僅三行代碼,只需設(shè)置代理和樣式,item的大小、頭腳視圖的大小、行列數(shù)以及間距都可以在對(duì)應(yīng)樣式的代理方法中自定義,然后設(shè)置為UICollectionView的自動(dòng)流水布局樣式,并結(jié)合UICollectionView的用法使用,詳情看示例
WSLWaterFlowLayout * _flow = [[WSLWaterFlowLayout alloc] init];
_flow.delegate = self;
_flow.flowLayoutStyle = WSLVerticalWaterFlow;
好了,有需要的直接去這里瞅瞅吧WSLWaterFlowLayout
更新于2018/8/12: iOS瀑布流之柵格布局 新增樣式4-柵格布局樣式的瀑布流,如下圖
柵格布局樣式
贊.gif