当前位置： 移动技术网 > IT编程>移动开发>IOS > iOS 点击图片放大效果的实现

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

紫薇校园,邓稼先的资料,美女为李敏镐剃头

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

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

具体实现如下

首先创建个 controller(photoviewcontroller)

// 
// 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 
// 
// 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 中创建四张小图片,添加轻拍手势

// 
// 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

这样就可以实现啦........当然这里只是单纯的实现功能,至于想要图片循环什么的还是需要根据需求自行添加..

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网