以前瀑布流的時候使用過uicollectionview，但是那時使用的是系統自帶的uicollectionviewflowlayout布局，今天看文章，看到uicollectionviewflowlayout自定義相關的東西，于是動手寫了一個簡單圖片瀏覽的demo，熟練一些uicollectionviewflowlayout自定義布局。
|
1
2
3
4
5
|
#import <uikit/uikit.h>@interface jwcollectionviewflowlayout : uicollectionviewflowlayout@end |
自定義uicollectionviewflowlayout，首先繼承uicollectionviewflowlayout，實現一下幾個方法
|
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
|
#define screenwidth [uiscreen mainscreen].bounds.size.width#define maxchangerange 100#import "jwcollectionviewflowlayout.h"@implementation jwcollectionviewflowlayout-(void)preparelayout{ self.scrolldirection = uicollectionviewscrolldirectionhorizontal; self.itemsize = cgsizemake(300, 500);}- (bool)shouldinvalidatelayoutforboundschange:(cgrect)newbounds{ return yes;}- (nullable nsarray<__kindof uicollectionviewlayoutattributes *> *)layoutattributesforelementsinrect:(cgrect)rect{ nsarray *array = [super layoutattributesforelementsinrect:rect]; cgrect visiblerect = cgrectmake(self.collectionview.contentoffset.x, 0, self.collectionview.bounds.size.width, self.collectionview.bounds.size.height); for (uicollectionviewlayoutattributes *attr in array) { if (cgrectintersectsrect(attr.frame, rect)) { bool isatright = yes; cgfloat distance = (attr.center.x - cgrectgetmidx(visiblerect)); if (distance<0) { distance = -distance; isatright = no; } cgfloat precent ; if (distance < 180) { precent = 1.0; } else { precent = ((screenwidth / 2) - distance) / (screenwidth / 2); } catransform3d transform = catransform3didentity; transform.m34 = 1.0 / 600; if (precent < 0.5) { precent = 0.5; } transform = catransform3dscale(transform, 1, precent, 1); cgfloat p = isatright?m_pi_4:-m_pi_4; transform = catransform3drotate(transform, p * (1 - precent), 0, 1, 0); attr.transform3d = transform; attr.zindex = 1; attr.alpha = precent; } } return array;}- (cgpoint)targetcontentoffsetforproposedcontentoffset:(cgpoint)proposedcontentoffset withscrollingvelocity:(cgpoint)velocity{ cgfloat offset = maxfloat; cgfloat hcenter = proposedcontentoffset.x + (cgrectgetwidth(self.collectionview.bounds) / 2.0); cgrect currentrect = cgrectmake(proposedcontentoffset.x, 0, self.collectionview.bounds.size.width, self.collectionview.bounds.size.height); nsarray* array = [super layoutattributesforelementsinrect:currentrect]; for (uicollectionviewlayoutattributes* layoutattributes in array) { cgfloat itemhorizontalcenter = layoutattributes.center.x; if (abs(itemhorizontalcenter - hcenter) < abs(offset)) { offset = itemhorizontalcenter - hcenter; } } return cgpointmake(proposedcontentoffset.x + offset, proposedcontentoffset.y);} |
使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
-(void)setupui{ jwcollectionviewflowlayout *flowlayout = [[jwcollectionviewflowlayout alloc] init]; uicollectionview *imgbrowseview = [[uicollectionview alloc] initwithframe:self.view.bounds collectionviewlayout:flowlayout]; imgbrowseview.datasource = self; imgbrowseview.delegate = self; imgbrowseview.backgroundcolor = [uicolor whitecolor]; [self.view addsubview:imgbrowseview]; _imgbrowseview = imgbrowseview; [self.imgbrowseview registernib:[uinib nibwithnibname:@"custumcollectionviewcell" bundle:nil] forcellwithreuseidentifier:@"cell"];} |
demo:https://github.com/jiangtaidi/jwimagebrowsedemo.git
運行結果：
以上就是本文的全部內容，希望對大家的學習有所幫助。
