在网上找了许久，一直没有发现有提供横向瀑布流效果的。在项目中用到了我就在垂直瀑布流的基础上，进行了修改，做出了横向瀑布流的效果。同时也对一些uicollectionview的属性进行简单的注释，方便以后查阅。
1、首先要写一个继承与nsobject的布局类，记录每一行（列）目前的宽度（高度）。再添加一个新的cell的时候进行判断比较，添加到最短的那一行或一列上。
2、横向的布局类入下，垂直的话就是讲对应的x y轴数据进行调整即可。
waterfallflowlayout为布局类，继承与nsobject。.h文件入下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#import <uikit/uikit.h>// 类的前置声明@class waterfallflowlayout;@protocol waterfallflowlayoutdelegate <nsobject>// 动态获取 item 宽度- (cgfloat) waterfallflowlayout:(waterfallflowlayout *) layout widthforitematindexpath:(nsindexpath *) indexpath;@end@interface waterfallflowlayout : uicollectionviewlayout@property (nonatomic,assign) id <waterfallflowlayoutdelegate> delegate;@property (nonatomic) nsinteger numberofcolumns;@property (nonatomic) cgfloat minimumlinespacing;@property (nonatomic) cgfloat minimuminteritemspacing;@property (nonatomic) uiedgeinsets sectioninset;@end |
waterfallflowlayout为布局类，继承与nsobject。.m文件入下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
#import "waterfallflowlayout.h"@interface waterfallflowlayout (){ // 用于记录每一列布局到的宽度 nsmutablearray * _widthofcolumns; // 用于保存所有item的属性 (frame) nsmutablearray * _itemsattributes;}@end@implementation waterfallflowlayout- (void) setnumberofcolumns:(nsinteger)numberofcolumns { if (_numberofcolumns != numberofcolumns) { _numberofcolumns = numberofcolumns; // 让原有布局失效，需要重新布局 [self invalidatelayout]; }}- (void)setminimumlinespacing:(cgfloat)minimumlinespacing { if (_minimumlinespacing != minimumlinespacing) { _minimumlinespacing = minimumlinespacing; [self invalidatelayout]; }}- (void)setminimuminteritemspacing:(cgfloat)minimuminteritemspacing { if (_minimuminteritemspacing != minimuminteritemspacing) { _minimuminteritemspacing = minimuminteritemspacing; [self invalidatelayout]; }}- (void)setsectioninset:(uiedgeinsets)sectioninset { if (!uiedgeinsetsequaltoedgeinsets(_sectioninset, sectioninset)) { _sectioninset = sectioninset; [self invalidatelayout]; }}//重写方法 1: 准备布局-(void)preparelayout { [super preparelayout]; // 真正的布局在这里完成 if (_itemsattributes) { [_itemsattributes removeallobjects]; }else { _itemsattributes = [[nsmutablearray alloc] init]; } if (_widthofcolumns) { [_widthofcolumns removeallobjects]; }else { _widthofcolumns = [[nsmutablearray alloc] init]; } for (nsinteger i = 0; i < self.numberofcolumns; i++) { // 初始化每一列的宽度(默认为上边距)// _heightofcolumns[i] = @(self.sectioninset.top); [_widthofcolumns addobject:@(self.sectioninset.left)]; } // item的总数 nsinteger count = [self.collectionview numberofitemsinsection:0];// cgfloat itemwidth = (self.collectionview.frame.size.width - self.sectioninset.left - self.sectioninset.right - (_numberofcolumns-1) * _minimuminteritemspacing )/_numberofcolumns; // 总的高度 (集合视图的宽度) cgfloat totalheight = self.collectionview.frame.size.height; // 有效的高度 (出去间隔及边界) cgfloat validheight = totalheight - self.sectioninset.top - self.self.sectioninset.bottom - (self.numberofcolumns-1) * self.minimuminteritemspacing; // 每一个item的高度 cgfloat itemheight = validheight/self.numberofcolumns; // 设置item的默认宽度 cgfloat itemwidth = itemheight; for (nsinteger i = 0; i<count; i++) { // 最短列的下标 nsinteger index = [self indexofshortestcolumn]; cgfloat originy = self.sectioninset.top + index * (itemheight +self.minimuminteritemspacing); cgfloat originx = [_widthofcolumns[index] floatvalue]; // 构造 indexpath nsindexpath * indexpath = [nsindexpath indexpathforitem:i insection:0]; // 动态的获取宽度 if ([self.delegate respondstoselector:@selector(waterfallflowlayout:widthforitematindexpath:)]) { itemwidth = [self.delegate waterfallflowlayout:self widthforitematindexpath:indexpath]; } uicollectionviewlayoutattributes * attr = [uicollectionviewlayoutattributes layoutattributesforcellwithindexpath:indexpath]; attr.frame = cgrectmake(originx, originy, itemwidth, itemheight); // 保存 item 的属性 到数组中 [_itemsattributes addobject:attr]; // 更新布局到的一列(最短列) 的高度 _widthofcolumns[index] = @(originx + itemwidth + self.minimumlinespacing); } // 刷新显示 [self.collectionview reloaddata];}//重写方法 2: 返回指定区域的item的属性(frame)- (nsarray<uicollectionviewlayoutattributes *> *)layoutattributesforelementsinrect:(cgrect)rect { nsmutablearray * array = [nsmutablearray array]; for (uicollectionviewlayoutattributes * attr in _itemsattributes) { // 判断两个矩形是否有交集 if (cgrectintersectsrect(attr.frame, rect)) { [array addobject:attr]; } } return array;}//重写方法 3: 返回内容的尺寸-(cgsize)collectionviewcontentsize { cgfloat height = self.collectionview.frame.size.height; nsinteger index = [self indexoflongestcolumn]; cgfloat width = [_widthofcolumns[index] floatvalue] + self.sectioninset.right - self.minimumlinespacing; return cgsizemake(width, height);}- (nsinteger) indexoflongestcolumn { nsinteger index = 0; for (nsinteger i = 0; i<_numberofcolumns; i++) { if ([_widthofcolumns[i] floatvalue] > [_widthofcolumns[index] floatvalue]) { index = i; } } return index;}- (nsinteger) indexofshortestcolumn { nsinteger index = 0; for (nsinteger i = 0; i<_numberofcolumns; i++) { if ([_widthofcolumns[i] floatvalue] < [_widthofcolumns[index] floatvalue]) { index = i; } } return index;}@end |
3、上边的这个布局类可以直接复制粘贴下来。然后就是创建你的uicollectionview
在collectionview的cell中可以直接创建imageview或者是label添加到cell上，用来显示数据。
collectionview默认section缩进左右是0
调节横向cell间距
layout.minimumlinespacing = 10;
调节纵向cell间距
layout.minimuminteritemspacing = 20;
调节瀑布流显示的行数，当然了你的collectionview的高（宽）足够显示几行（列）就会自动显示多上行（列）；
layout.numberofcolumns = 3;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
#import "rootviewcontroller.h"#import "waterfallflowlayout.h"@interface rootviewcontroller () <uicollectionviewdatasource,uicollectionviewdelegateflowlayout,waterfallflowlayoutdelegate>{ uicollectionview * _collectionview;}@end@implementation rootviewcontroller- (void)dealloc { [_collectionview release]; [super dealloc];}- (void)viewdidload { [super viewdidload]; // 创建集合视图 [self createcollectionview];}- (uicollectionviewlayout *)createlayout {#if 1 waterfallflowlayout * layout = [[waterfallflowlayout alloc] init]; layout.sectioninset = uiedgeinsetsmake(20, 20, 20, 20); layout.minimumlinespacing = 10; layout.minimuminteritemspacing = 20; layout.numberofcolumns = 3; layout.delegate = self; [self performselector:@selector(changelayout:) withobject:layout afterdelay:3];#else uicollectionviewflowlayout * layout = [[uicollectionviewflowlayout alloc] init]; layout.minimumlinespacing = 10; layout.itemsize = cgsizemake(150, 100); layout.sectioninset = uiedgeinsetsmake(10, 10, 10, 10);#endif return [layout autorelease];}- (void)changelayout:(waterfallflowlayout *)layout { layout.numberofcolumns = 3;}- (void)createcollectionview { cgrect frame = cgrectmake(0, 20, view_width, view_height-20); _collectionview = [[uicollectionview alloc] initwithframe:frame collectionviewlayout:[self createlayout]]; _collectionview.backgroundcolor = [uicolor cyancolor]; // 设置代理 _collectionview.delegate = self; _collectionview.datasource = self; // 注册cell 类型 及 复用标识 [_collectionview registerclass:[uicollectionviewcell class] forcellwithreuseidentifier:@"cellid"]; [self.view addsubview:_collectionview];}#pragma mark - uicollectionviewdatasource- (nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section { return 102;}- (uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath { uicollectionviewcell * cell = [collectionview dequeuereusablecellwithreuseidentifier:@"cellid" forindexpath:indexpath]; uilabel * label = nil; nsarray * array = cell.contentview.subviews; if (array.count) { label = array[0]; }else { label = [[uilabel alloc] init];// label.frame = cell.bounds; label.textalignment = nstextalignmentcenter; label.font = [uifont systemfontofsize:50]; [cell.contentview addsubview:label]; [label release]; } label.frame = cell.bounds; label.text = [nsstring stringwithformat:@"%ld",indexpath.item]; label.textcolor = [uicolor whitecolor]; cell.backgroundcolor = randomcolor; return cell;}- (cgsize) collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout *)collectionviewlayout sizeforitematindexpath:(nsindexpath *)indexpath { return cgsizemake( arc4random()%100+200, 110);}-(cgfloat) waterfallflowlayout:(waterfallflowlayout *)layout widthforitematindexpath:(nsindexpath *)indexpath{ return arc4random()%150+50;}-(void)collectionview:(uicollectionview *)collectionview didselectitematindexpath:(nsindexpath *)indexpath{ nslog(@"点击了第 %ld 组，第 %ld 行",indexpath.section,indexpath.row);}- (void)didreceivememorywarning { [super didreceivememorywarning];}@end |
实现的效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/shengdaVolleyball/article/details/50858115
