iOS 点击图片放大效果的实现

时间:2022-05-24 13:45:28

今天带来的是图片点击放大效果,这种效果一般在微博,微信朋友圈中比较常见

iOS 点击图片放大效果的实现

当我点击其中一张图片时,就会进入详情

iOS 点击图片放大效果的实现

具体实现如下

首先创建个 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