简单快捷自定义UICollectionViewLayout布局

Demo下载:ZBSimpleCollectionViewLayout

我们继承UICollectionViewLayout可以实现很多自定义布局。

介绍

ZBSimpleCollectionViewLayout也继承UICollectionViewLayout实现了三种流式布局:普通流式布局 、一拖N布局、瀑布流布局,三种可以单独使用也可以混合使用

typedef NS_ENUM(NSInteger, ZBCollectionViewLayoutType) {
    /// 普通流式布局
    ZBCollectionViewLayoutNormal,
    /// 一拖N布局
    ZBCollectionViewLayoutMultiSplit,
    /// 瀑布流布局
    ZBCollectionViewLayoutFalls
};

支持设置区头区尾(可以设置区头吸顶悬浮),以及DecorationView装饰视图。

混合使用
混合使用

使用方法:

可以下载Demo查看更直观 ZBSimpleCollectionViewLayout

1.导入头文件:#import "ZBSimpleCollectionViewLayout.h"

2.遵循协议:ZBSimpleCollectionViewLayoutDelegate

3.设置代理并添加到UICollectionView即可

ZBSimpleCollectionViewLayout * layout = [[ZBSimpleCollectionViewLayout alloc]init];
layout.delegate = self;
UICollectionView * collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];

4.根据需求实现相关Delegate

  • 协议内容:
@protocol ZBSimpleCollectionViewLayoutDelegate <NSObject>

@required
/// 每个item的size (瀑布流布局时宽度设置无效,宽度根据布局列数自动计算)
- (CGSize)ZBSimpleCollectionViewLayoutItemSizeForIndexPath:(NSIndexPath *)indexPath;

@optional
/// 返回每区布局类型基本配置
- (ZBCollectionViewLayoutTypeConfig)ZBSimpleCollectionViewLayoutTypeAtSection:(NSInteger)section;
/// 每列的距离(item之间的距离)
- (CGFloat)ZBSimpleCollectionViewLayoutItemSpaceAtSection:(NSInteger)section;
/// 每行的距离
- (CGFloat)ZBSimpleCollectionViewLayoutLineSpaceAtSection:(NSInteger)section;
/// 区的内间距
- (UIEdgeInsets)ZBSimpleCollectionViewLayoutSectionInsetsAtSection:(NSInteger)section;

/// 区头区尾大小(size.width超过最大值时会自动设置成最大值(滚动视图的宽减滚动视图左右内间距))
- (CGSize)ZBSimpleCollectionViewLayoutHeaderSizeAtSection:(NSInteger)section;
- (CGSize)ZBSimpleCollectionViewLayoutFooterSizeAtSection:(NSInteger)section;

/// 区的装饰视图大小
- (CGSize)ZBSimpleCollectionViewLayoutDecorationViewSizeAtSection:(NSInteger)section;
/// 区的装饰视图基于本身大小的内偏移
- (UIEdgeInsets)ZBSimpleCollectionViewLayoutDecorationViewSizeInsetsAtSection:(NSInteger)section;
/// 区的装饰视图对应的注册kind(identity)
- (NSString *)ZBSimpleCollectionViewLayoutDecorationKindAtSection:(NSInteger)section;

/// 区头是否悬浮顶部
- (BOOL)ZBSimpleCollectionViewLayoutHeaderPinToTopAtSection:(NSInteger)section;
/// 区头悬浮顶部的偏移量
- (CGFloat)ZBSimpleCollectionViewLayoutHeaderPinToTopOffsetAtSection:(NSInteger)section;

@end

  • 其他
@interface ZBSimpleCollectionViewLayout : UICollectionViewLayout

@property (nonatomic, weak) id <ZBSimpleCollectionViewLayoutDelegate> delegate;
/// 更新数据(在每次reloadData方法之前设置有效) 默认NO: 会重新计算全部布局;YES: 只计算最后一区增加items的布局---每次设置为YES时,计算完成后会自动设置为NO
@property (nonatomic, assign) BOOL updateData;

@end

以上的updateDta属性是为了collectionView reloadData刷新页面数据 但是布局没有改变时设置为YES,这样不会去重新计算布局。或者只是最后一区的数据有增加,比如翻页时数据的增加,设置为YES时只计算新增的cell布局,其他不变。避免数据不断增加时去计算原有不变的布局

使用实例(瀑布流布局)

#import "FallsLayoutViewController.h"
#import "ZBSimpleCollectionViewLayout.h"

#import "TestCollectionViewCell.h"

@interface FallsLayoutViewController () <ZBSimpleCollectionViewLayoutDelegate, UICollectionViewDataSource>

@property (nonatomic, strong) UICollectionView * collectionView;

@end

@implementation FallsLayoutViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];
    self.navigationItem.title = @"瀑布流布局";
    
    ZBSimpleCollectionViewLayout * layout = [[ZBSimpleCollectionViewLayout alloc]init];
    layout.delegate = self;
    
    UICollectionView * collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor whiteColor];
    collectionView.contentInset = UIEdgeInsetsMake(10, 10, 10, 10);
    [self.view addSubview:collectionView];
    [collectionView registerClass:[TestCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    _collectionView = collectionView;
    
    
}


- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];
    self.collectionView.frame = self.view.bounds;
}

#pragma mark - ZBSimpleCollectionViewLayoutDelegate
- (CGSize)ZBSimpleCollectionViewLayoutItemSizeForIndexPath:(NSIndexPath *)indexPath {
    
    return CGSizeMake(0, 180 + arc4random() % 50);
}

- (CGFloat)ZBSimpleCollectionViewLayoutItemSpaceAtSection:(NSInteger)section {
    return 10;
}

- (CGFloat)ZBSimpleCollectionViewLayoutLineSpaceAtSection:(NSInteger)section {
    return 10;
}

- (ZBCollectionViewLayoutTypeConfig)ZBSimpleCollectionViewLayoutTypeAtSection:(NSInteger)section {
    ZBCollectionViewLayoutTypeConfig config = ZBLayoutTypeConfigDefault;
    config.type = ZBCollectionViewLayoutFalls;
    config.falls = 2;
    return config;
}

#pragma mark - UICollectionViewDataSource
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    TestCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.label.text = [NSString stringWithFormat:@"Section: %ld\nRow: %ld", indexPath.section, indexPath.row];
    return cell;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 20;
}

@end

瀑布流布局
Demo下载:ZBSimpleCollectionViewLayout

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值