第一弹 - 资源福利版.apk
萌猫导航
首页 » 技术 » iOS

UICollectionView 瀑布流 添加表头视图的坑

作者: 叶子 来源: 怪哈哈网 日期: 2017-08-25 16:56:48 人气: -

UICollectionView 瀑布流 添加表头视图的坑

首先是,需求加了个头视图在顶部,在collectionView中的头视图跟TableView的不一样,TableView的表头只要设置tableview.tableHeaderView就可以了. collectionView 怎么添加这样的效果的呢

有两种思路

第一种:在collectionView的段头代理中设置 (只在第一段中设置)

第二种:改变 collectionView 的内延距离, 然后添加在内延空白的位置.

 

第一种

复制代码
//  返回头视图- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableView =nil;    //返回段头段尾视图
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        HMCollectionReusableView *header=[collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerViewIdentifier forIndexPath:indexPath];        //添加头视图的内容
        header.backgroundColor = [UIColor redColor];
        reusableView = header;        return reusableView;
    }    //如果底部视图
    if (kind ==UICollectionElementKindSectionFooter)
    {
        UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"FooterView"forIndexPath:indexPath];
        footerview.backgroundColor = [UIColor purpleColor];
        reusableView = footerview;
        
    }    return reusableView;
}
复制代码

但是你会发现,使用瀑布流的时候,,Cell都是不同大小的布局,UICollectionViewFlowLayout是自定义的布局,collectionView的代理不会走,所以,这里就比较坑了。

怎么解决呢 就是在自定义的Layout中添加加一个 Header类型的 UICollectionViewLayoutAttributes就可以。然后我把瀑布流的Cell的起始位置从headerView的最大Y开始布局。这样设置之后,controllerView中的代理方法才会走,要记得注册头视图哦,不然会崩。

注册段头

复制代码
    //注册段头部视图
    [collectionView registerClass:[HMCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerViewIdentifier];

    //xib

    [collectionView registerNib:[UINib nibWithNibName:@"HMCollectionReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerViewIdentifier];

复制代码

 

自定义的布局 HMWaterflowLayout : UICollectionViewLayout

.h

复制代码
@interface HMWaterflowLayout : UICollectionViewLayout

@property (nonatomic, assign) UIEdgeInsets sectionInset;/** 段头的size */@property (nonatomic, assign) CGSize headerReferenceSize;/** 每一列之间的间距 */@property (nonatomic, assign) CGFloat columnMargin;/** 每一行之间的间距 */@property (nonatomic, assign) CGFloat rowMargin;/** 显示多少列 */@property (nonatomic, assign) int columnsCount;

@property (nonatomic, weak) id<HMWaterflowLayoutDelegate> delegate;@end
复制代码

.m

复制代码
#import <UIKit/UIKit.h>@class HMWaterflowLayout;@protocol HMWaterflowLayoutDelegate <NSObject>
- (CGFloat)waterflowLayout:(HMWaterflowLayout *)waterflowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;@end#import "HMWaterflowLayout.h"@interface HMWaterflowLayout();/** 这个字典用来存储每一列最大的Y值(每一列的高度) */@property (nonatomic, strong) NSMutableDictionary *maxYDict;/** 存放所有的布局属性 */@property (nonatomic, strong) NSMutableArray *attrsArray;@end@implementation HMWaterflowLayout- (NSMutableDictionary *)maxYDict
{    if (!_maxYDict) {
        self.maxYDict = [[NSMutableDictionary alloc] init];
    }    return _maxYDict;
}- (NSMutableArray *)attrsArray
{    if (!_attrsArray) {
        self.attrsArray = [[NSMutableArray alloc] init];
    }    return _attrsArray;
}- (instancetype)init
{    if (self = [super init]) {
        self.columnMargin = 10;
        self.rowMargin = 10;
        self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        self.columnsCount = 3;        //如果段头的高度不一致 可以仿照UICollectionViewFlowLayout的代理 自己写一个代理方法返回 CGSize
        self.headerReferenceSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 140);
    }    return self;
}- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{    return YES;
}/**
 *  每次布局之前的准备 */- (void)prepareLayout
{
    [super prepareLayout];    
    // 1.清空最大的Y值    [self.maxYDict removeAllObjects];    for (int i = 0; i<self.columnsCount; i++) {
        NSString *column = [NSString stringWithFormat:@"%d", i];
        self.maxYDict[column] = @(self.sectionInset.top);
    }    
    // 2.计算所有cell的属性    [self.attrsArray removeAllObjects];    
    //头部视图
    UICollectionViewLayoutAttributes * layoutHeader = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader withIndexPath:[NSIndexPath indexPathWithIndex:0]];
    layoutHeader.frame =CGRectMake(0,0, self.headerReferenceSize.width, self.headerReferenceSize.height);
    [self.attrsArray addObject:layoutHeader];    //item内容视图
    NSInteger count = [self.collectionView numberOfItemsInSection:0];    for (int i = 0; i<count; i++) {
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
        [self.attrsArray addObject:attrs];
    }
}/**
 *  返回所有的尺寸 */- (CGSize)collectionViewContentSize
{
    __block NSString *maxColumn = @"0";
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {        if ([maxY floatValue] > [self.maxYDict[maxColumn] floatValue]) {
            maxColumn = column;
        }
    }];    
    //包括段头headerView的高度
    return CGSizeMake(0, [self.maxYDict[maxColumn] floatValue] + self.sectionInset.bottom + self.headerReferenceSize.height );
}/**
 *  返回indexPath这个位置Item的布局属性 */- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{    // 假设最短的那一列的第0列
    __block NSString *minColumn = @"0";    // 找出最短的那一列
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {        if ([maxY floatValue] < [self.maxYDict[minColumn] floatValue]) {
            minColumn = column;
        }
    }];    
    // 计算尺寸
    CGFloat width = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnsCount - 1) * self.columnMargin)/self.columnsCount;
    CGFloat height = [self.delegate waterflowLayout:self heightForWidth:width atIndexPath:indexPath];    
    // 计算位置
    CGFloat x = self.sectionInset.left + (width + self.columnMargin) * [minColumn intValue];
    CGFloat y = [self.maxYDict[minColumn] floatValue] + self.rowMargin;    
    // 更新这一列的最大Y值
    self.maxYDict[minColumn] = @(y + height);    
    // 创建属性
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];    
    //把瀑布流的Cell的起始位置从headerView的最大Y开始布局
    attrs.frame = CGRectMake(x, self.headerReferenceSize.height + y, width, height );    return attrs;
}/**
 *  返回rect范围内的布局属性 */- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{    return self.attrsArray;
}@end
复制代码

 

 

 

第二种

复制代码
self.collectionView  =  [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 320, self.view.frame.size.height) collectionViewLayout:flowlayout];
self.collectionView.contentInset = UIEdgeInsetsMake(50, 0, 0, 0);
UIImageView *imagev = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"015.png"]];
imagev.frame = CGRectMake(0, -50, 320, 50);
[self.collectionView addSubview: imagev];
[self.view addSubview: _collectionView];
复制代码

 

提示: UICollectionReusableView 段头是可以自定义的 第一种比较好

注意:UITableView 有两个样式布局 1.Group 2.Plain (段头可以停留) 而UICollectionView 需要自己写布局 要想实现Plain (段头可以停留)的效果可以找一些网上的第三方的框架参考一下



转载请注明文章来源(欢迎分享): http://www.guaihaha.com/ios/17176.html

怪哈哈动漫图库
关于怪哈哈
怪哈哈是一个集搞笑,美女,动漫,游戏,技术等为核心的综合性网站!
联系我们
商务洽谈、广告合作、友情链接、侵权举报,这些都可以联系我们哦!
关于我们 - 联系我们 - 广告服务 - 免责申明   
本站文字和图片均为严格审查筛选收藏,均收集整理于互联网,其著作权归原作者所有,如果有侵犯您权利的照片,请来信告知,我们将及时撤销相应文字和图片.
Copyright @2014-2020 怪哈哈网 All Rights Reserved.
【谢谢大家一直支持贵站】