从零开始UICollectionView(3)--瀑布流

2017-01-14 10:19:58来源:http://www.jianshu.com/p/2e965890bfb1作者:BradleyJohnson人点击

第七城市
前言

对于许多的项目来说,瀑布流是极其重要的一个UI效果。在这里不深究瀑布流的出现历史,只追求它的实现。我尽可能讲得详细。
其实如果深入的去探索UICollectionView就会发现,它只不过是一个基于UIScrollView的加入重用机制的高度细致的封装控件,所有关于UICollectionView布局的奥秘,都在UICollectionViewLayout的里面。
鉴于这是一个抽象类不能直接使用,通常我们会创建和使用它的子类。


原理:所有的瀑布流都应该基于已知的宽高比例,通过固定的宽(高)来计算另外一个高(宽)。
1.开撸之 UICollectionViewLayout。

1.1 我们首先要写一个继承自UICollectionViewLayout的子类,本Demo中为@interface BJWaterfullLayout : UICollectionViewLayout


由于我们是纵向瀑布流,宽度是固定的,根据宽高比动态生成高度。
所以我们需要写一个代理方法来暴露我们在.m中算好的宽度,来向外界索取数据中的宽高比来生成动态的高度,由于这一步是不可省略的,我们将唯一的这个方法声明为@required
@protocol BJWaterfullLayoutDelegate <NSObject>
@required;
-(CGFloat)BJWaterfullLayout:(BJWaterfullLayout *)layout index:(NSInteger)index weight:(CGFloat)weight;
@end

1.2 仔细想想,纵向瀑布流我们需要知道有多少列、列之间的间距、上下行之间的间距、整个section(也就是一个组的所有Cell共同撑起的内容)的内边距也就是UIEdgeInsets
最后我们还得有两个数组,一个数组用来记录每个列的高度,以便于我们寻找最短高度去拼接Item,另一个用来装载所有的Item的UICollectionViewLayoutAttributes对象。
UICollectionViewLayoutAttributes : 装载了每一个对应IndexPath的Item的布局信息。

于是从上面我们得到了所有需要提前准备的东西:


@interface BJWaterfullLayout ()
@property (nonatomic , assign) NSInteger columnCount;//列数量
@property (nonatomic , assign) NSInteger columnSpace;//列间距
@property (nonatomic , assign) NSInteger rowSpace;//行间距
@property (nonatomic , assign) UIEdgeInsets sectionInsets;//section内容内边距
@property (nonatomic , strong) NSMutableArray * columnYArray;//列长度数组
@property (nonatomic , strong) NSMutableArray * attributesArray;//布局属性数组
@end

下面是我们必须要重写的几个UICollectionViewLayout的方法,没有它们,我们无法完成整个布局。


//预备布局信息调用。
-(void)prepareLayout;
//生成详细布局信息调用。
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
//返回attributesArray的数组,布局方法。
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
//返回整个UICollectionView的可滑动范围。
-(CGSize)collectionViewContentSize;

1.3 详细代码(columnYArray、attributesArray通过懒加载方式初始化过了、就不贴代码了):


//在这个方法中,我们写入了所有预备的参数的值,清空了所有的数组数据,重新写入。
-(void)prepareLayout
{
[super prepareLayout];
self.columnCount = 3;
self.columnSpace = 10;
self.rowSpace = 10;
self.sectionInsets = UIEdgeInsetsMake(5, 5, 5, 5);
[self.columnYArray removeAllObjects];
for (NSInteger index = 0; index < self.columnCount; index++) {
[self.columnYArray addObject:@(self.sectionInsets.top)];
}
//我们假定数据源只有一组。
//当然也可以有多组,这样的话我们只要用嵌套循环就可以遍历所有的Item了。
[self.attributesArray removeAllObjects];
for (NSInteger index = 0; index<[self.collectionView numberOfItemsInSection:0]; index++) {
UICollectionViewLayoutAttributes * attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
[self.attributesArray addObject:attributes];
}
}

下面是布局layoutAttributesForElementsInRect:和collectionViewContentSize方法:


//返回布局详细信息数组,数组中包含的全都是我们为对应IndexPath的Item生成的布局属性对象。
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attributesArray;
}
//找出所有列中最长的一列,并加上section的下边距即为内容的最长Y轴可滑动距离,X轴我们不滑动设置为0。
-(CGSize)collectionViewContentSize
{
CGFloat maxContent = [self.columnYArray[0] floatValue];
for (NSInteger index = 0; index < self.columnYArray.count; index++) {
CGFloat theContentY = [self.columnYArray[index] floatValue];
if (theContentY > maxContent) {
maxContent = theContentY;
}
}
return CGSizeMake(0, maxContent + self.sectionInsets.bottom);
}

下面是重头戏layoutAttributesForItemAtIndexPath:方法:


-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
//创建 UICollectionViewLayoutAttributes 对象,这里面包含了对应 Item 的具体布置细节。
UICollectionViewLayoutAttributes * attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//获取跟本Layout绑定的UICollectionView的宽度,这是个固定值。
CGFloat weight = self.collectionView.frame.size.width;
//每个 Item 的宽度等于总宽度-左边距-右边距-所有的列间距,再除以列数。
CGFloat w = (weight - self.sectionInsets.left - self.sectionInsets.right - (self.columnCount-1)*self.columnSpace)/self.columnCount;
//这里我们通过代理,将 Item 的序号和宽度暴露出去,来获取动态的高度,这里我们的代理方法是要求必须实现的。
CGFloat h = [self.delegate BJWaterfullLayout:self index:indexPath.item weight:w];
//找出列高度数组中最短的那个及其序号。
NSInteger minIndex = 0;
CGFloat minContent = [self.columnYArray[0] floatValue];
for (NSInteger index = 0; index < self.columnYArray.count; index++) {
CGFloat theContentY = [self.columnYArray[index] floatValue];
if (theContentY < minContent) {
minIndex = index;
minContent = theContentY;
}
}
//x坐标就等于section的左边距+(Item的宽度+列间距)* 最短列序号。
CGFloat x = self.sectionInsets.left + (w+self.columnSpace)*minIndex;
//y坐标就是最短的那列的高度+上下行间距。
CGFloat y = minContent + self.rowSpace;
//然后设置 UICollectionViewLayoutAttributes 对象的frame坐标。
attributes.frame = CGRectMake(x, y, w, h);
//更新 列高度数组中 刚刚找到的 最短的数组的 新高度。
self.columnYArray[minIndex] = @(CGRectGetMaxY(attributes.frame));
return attributes;
}

至此,我们的瀑布流的布局类就书写完毕了,我们需要把它和UICollectionView绑定在一起,并且通过UICollectionView的数据源,来提供宽高比从而生成动态高度返回给我们的BJWaterfullLayout的代理使用。
代码如下:


#import "ViewController.h"
#import "BJWaterfullModel.h"
#import "BJWaterfullLayout.h"
#import "BJWaterfullCell.h"
@interface ViewController ()<BJWaterfullLayoutDelegate,UICollectionViewDelegate,UICollectionViewDataSource>

在UICollectionView的懒加载方法中绑定UICollectionView:


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

下面是BJWaterfullLayoutDelegate中我们强制要求实现的返回动态高度的方法,希望你还记得:


-(CGFloat)BJWaterfullLayout:(BJWaterfullLayout *)layout index:(NSInteger)index weight:(CGFloat)weight
{
BJWaterfullModel * model = self.dataArray[index];
return weight*(model.h/model.w);
}

至此,大功告成,我的数据源在Demo文件里面有,你们可以去拿来写Demo用,而具体的基本UICollectionView实现我的从零开始UICollectionView(1)--基本实现里面有,瀑布流效果如下:



瀑布流

这里我们需要聊聊UICollectionViewLayoutAttributes这个类:


这个类在我的理解中,它更像是UICollectionViewCell和UICollectionReusableView的布局属性类,因为它所包含的属性及构造方法,总的来看,都是为布局而诞生的。
它有坐标frame、尺寸size、甚至2D变形transform和3D变形transform3D。这些都能为我们实现一些极其有趣的布局效果。


NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewLayoutAttributes : NSObject <NSCopying, UIDynamicItem>
@property (nonatomic) CGRect frame;
@property (nonatomic) CGPoint center;
@property (nonatomic) CGSize size;
@property (nonatomic) CATransform3D transform3D;
@property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGFloat alpha;
@property (nonatomic) NSInteger zIndex; // default is 0
@property (nonatomic, getter=isHidden) BOOL hidden; // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES
@property (nonatomic, strong) NSIndexPath *indexPath;
@property (nonatomic, readonly) UICollectionElementCategory representedElementCategory;
@property (nonatomic, readonly, nullable) NSString *representedElementKind; // nil when representedElementCategory is UICollectionElementCategoryCell
+ (instancetype)layoutAttributesForCellWithIndexPath:(NSIndexPath *)indexPath;
+ (instancetype)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath;
+ (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind withIndexPath:(NSIndexPath *)indexPath;
@end

下节预告:横向动画效果布局及page悬停、增删Item及其动画(基于UICollectionViewLayoutAttributes这个类做的一些有趣的动画和变动)。


注:若你觉得这文章确实帮到你了,或是支持一下原创技术文章,请为我点个赞。大爷若是还能打赏打赏,那就更好不过了。




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台