服务器之家

服务器之家 > 正文

iOS自定义UICollectionViewFlowLayout实现图片浏览效果

时间:2021-01-11 16:53     来源/作者:jiangamh

以前瀑布流的时候使用过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

运行结果:

iOS自定义UICollectionViewFlowLayout实现图片浏览效果

以上就是本文的全部内容,希望对大家的学习有所帮助。

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部