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
网友评论