今天带来的是图片点击放大效果,这种效果一般在微博,微信朋友圈中比较常见
当我点击其中一张图片时,就会进入详情
具体实现如下
首先创建个 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
如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。