今天带来的是图片点击放大效果,这种效果一般在微博,微信朋友圈中比较常见
当我点击其中一张图片时,就会进入详情
具体实现如下
首先创建个 controller(photoviewcontroller)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// // photoviewcontroller.h // 点击图片放大效果 // // created by amydom on 17/1/9. // copyright © 2017年 amydom. all rights reserved. // #import <uikit/uikit.h> @interface photoviewcontroller : uiviewcontroller //保存图片的数组 @property (nonatomic, strong)nsmutablearray *photoarr; //图片 tag @property (nonatomic, assign)nsinteger imagetag; @end |
|
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
|
// // photoviewcontroller.m // 点击图片放大效果 // // created by amydom on 17/1/9. // copyright © 2017年 amydom. all rights reserved. // #import "photoviewcontroller.h" @interface photoviewcontroller () @end @implementation photoviewcontroller - (void)viewdidload { [super viewdidload]; uiscrollview *myscrollview = [[uiscrollview alloc] initwithframe:cgrectmake(0, 0, 375, 667)]; myscrollview.backgroundcolor = [uicolor blackcolor]; myscrollview.pagingenabled = yes; myscrollview.bounces = no; [self.view addsubview:myscrollview]; //根据tag 来获取当前点击的图片 myscrollview.contentoffset = cgpointmake(self.view.frame.size.width * self.imagetag, 10); myscrollview.contentsize = cgsizemake(self.view.frame.size.width * self.photoarr.count, 667); //创建 for (int i = 0; i < self.photoarr.count; i++) { uiimageview *img = [[uiimageview alloc] initwithframe:cgrectmake(self.view.frame.size.width * i + 10, 0, self.view.frame.size.width - 20, self.view.frame.size.height)]; nsstring *imgname = self.photoarr[i]; img.image = [uiimage imagenamed:imgname]; [myscrollview addsubview:img]; //自适应图片大小 img.contentmode = uiviewcontentmodescaleaspectfit; } //轻拍跳出照片浏览 uitapgesturerecognizer *tap = [[uitapgesturerecognizer alloc] initwithtarget:self action:@selector(tapaction)]; [myscrollview addgesturerecognizer:tap]; } - (void)tapaction { [self dismissviewcontrolleranimated:yes completion:^{ }]; } - (void)didreceivememorywarning { [super didreceivememorywarning]; // dispose of any resources that can be recreated. } /* #pragma mark - navigation // in a storyboard-based application, you will often want to do a little preparation before navigation - (void)prepareforsegue:(uistoryboardsegue *)segue sender:(id)sender { // get the new view controller using [segue destinationviewcontroller]. // pass the selected object to the new view controller. } */ @end |
然后在 viewcontroller 中创建四张小图片,添加轻拍手势
|
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
|
// // viewcontroller.m // 点击图片放大效果 // // created by amydom on 17/1/9. // copyright © 2017年 amydom. all rights reserved. // #import "viewcontroller.h" #import "photoviewcontroller.h" @interface viewcontroller (){ nsmutablearray *array; } @end @implementation viewcontroller - (void)viewdidload { [super viewdidload]; self.view.backgroundcolor = [uicolor whitecolor]; array = [nsmutablearray arraywithobjects:@"1.jpg", @"2.jpg",@"3.jpg",@"4.jpg", nil nil]; for (int i = 0; i < array.count; i++) { uiimageview *img = [[uiimageview alloc] initwithframe:cgrectmake(20 + 880 * i, 100, 70, 70)]; img.image = [uiimage imagenamed:[array objectatindex:i]]; img.userinteractionenabled = yes; //截掉边框 img.clipstobounds = yes; img.tag = 1000 + i; uitapgesturerecognizer *tap = [[uitapgesturerecognizer alloc] initwithtarget:self action:@selector(tapaction:)]; [img addgesturerecognizer:tap]; [self.view addsubview:img]; } } - (void)tapaction:(uitapgesturerecognizer *)tap{ photoviewcontroller *photovc = [[photoviewcontroller alloc] init]; photovc.imagetag = tap.view.tag - 1000 ;//获取当前被点击图片的 tag photovc.photoarr = array; [photovc setmodaltransitionstyle:uimodaltransitionstylecrossdissolve];// 效果 [self presentmodalviewcontroller:photovc animated:yes]; } - (void)didreceivememorywarning { [super didreceivememorywarning]; // dispose of any resources that can be recreated. } @end |
这样就可以实现啦........当然这里只是单纯的实现功能,至于想要图片循环什么的还是需要根据需求自行添加..
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://blog.csdn.net/amydom/article/details/54287002
