自定义ImageView添加手势做出类似微博配图浏览效果
2015-04-17 19:56
387 查看
Demo下载以及个人Github地址: https://github.com/ChenNan-FRAM/WebImageViewBrowser
可用于单个ImageView也可用于多个ImageView
再次点击缩小回原位置
双指拖拉图片放大缩小
滑动浏览多个配图或上下滑动浏览
下载查看原图
保存到手机相册等
(该Demo也包含ImageView、ScrollView、PageControl组合使用方法相信也有一定参考价值。)
该类负责在windows窗口上添加一个ScrollView,如果只是单个图片则只需要在ScrollView上添加一个UIImageView,将大图原图的图片链接传入该类即可。如果是多个配图则需要在ScrollView上面添加一个ScrollView2,在ScrollView2上添加ImageView,再将大图原图的图片链接数组传入该类。
点击关闭的实现原理则是给最底下的ScrollView添加一个手势点击,将所有在ScrollView包括其自身设为全透明后从窗口移除。
在打开自定义UIImageView的时候要记录下打开时该ImageView的位置,以便动画返回原位置。
![](http://img.blog.csdn.net/20150417203952099?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ05MRjE0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
SingleWebImageView.h部分:
SingleWebImageBrowser.h:
SingleWebImageBrowser.m部分:
实现类似微博配图浏览功能:
点击全屏浏览大图可用于单个ImageView也可用于多个ImageView
再次点击缩小回原位置
双指拖拉图片放大缩小
滑动浏览多个配图或上下滑动浏览
下载查看原图
保存到手机相册等
(该Demo也包含ImageView、ScrollView、PageControl组合使用方法相信也有一定参考价值。)
大致实现思路:
自定义UIImageView并添加手势点击功能实现响应点击动作;接受点击信号后传递给一个可全局调用的浏览类。该类负责在windows窗口上添加一个ScrollView,如果只是单个图片则只需要在ScrollView上添加一个UIImageView,将大图原图的图片链接传入该类即可。如果是多个配图则需要在ScrollView上面添加一个ScrollView2,在ScrollView2上添加ImageView,再将大图原图的图片链接数组传入该类。
点击关闭的实现原理则是给最底下的ScrollView添加一个手势点击,将所有在ScrollView包括其自身设为全透明后从窗口移除。
在打开自定义UIImageView的时候要记录下打开时该ImageView的位置,以便动画返回原位置。
实现效果:
这里给出单个ImageView的情况下点击打开的Demo(图片下载的时候使用了第三方库SDWebImage,本Demo也有附上。可直接下载浏览):
自定义ImageView类:SingleWebImageView.h部分:
// // SingleWebImageView.h // WebImageBrowserDemo // // Created by Caesar on 15/4/16. // Copyright (c) 2015年 Caesar. All rights reserved. // #import <UIKit/UIKit.h> @interface SingleWebImageView : UIImageView @property(nonatomic, copy)NSString *original_pic_url; @property(nonatomic, copy)NSString *bmiddle_pic_url; -(SingleWebImageView *)initWithStyleAndBmiddlePicUrl:(NSString *)bmiddle_pic_url andOriginalPicUrl:(NSString *)original_pic_url; @endSingleWebImageView.m部分:
// // SingleWebImageView.m // WebImageBrowserDemo // // Created by Caesar on 15/4/16. // Copyright (c) 2015年 Caesar. All rights reserved. // #import "SingleWebImageView.h" #import "SingleWebImageBrowser.h" @implementation SingleWebImageView #define RGBACOLOR(r,g,b,a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:(a)] - (SingleWebImageView *)initWithStyleAndBmiddlePicUrl:(NSString *)bmiddle_pic_url andOriginalPicUrl:(NSString *)original_pic_url{ self = [super init]; if (self) { //ImageView样式自行定制 self.layer.cornerRadius = 5.0; self.layer.masksToBounds = YES; self.contentMode = UIViewContentModeScaleAspectFill; self.backgroundColor = RGBACOLOR(220, 220, 220, 0.5); //添加手势 self.userInteractionEnabled = YES; UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(showBmiddleImage:)]; [self addGestureRecognizer:tap]; self.bmiddle_pic_url = bmiddle_pic_url; self.original_pic_url = original_pic_url; } return self; } //调用打开图片浏览器显示中图 -(void)showBmiddleImage:(NSString *)bmiddle_pic_url{ [[SingleWebImageBrowser sharedSingleWebImageBrowser]showBmiddlePic:self]; } @end
SingleWebImageBrowser.h:
// // SingleWebImageBrowser.h // WebImageBrowserDemo // // Created by Caesar on 15/4/16. // Copyright (c) 2015年 Caesar. All rights reserved. // #import <Foundation/Foundation.h> #import "SingleWebImageView.h" @interface SingleWebImageBrowser : NSObject +(SingleWebImageBrowser *)sharedSingleWebImageBrowser; -(void)showBmiddlePic:(SingleWebImageView *)webImageView; -(void)closeBmiddlePic:(UITapGestureRecognizer *)tap; @end
SingleWebImageBrowser.m部分:
// // SingleWebImageBrowser.m // WebImageBrowserDemo // // Created by Caesar on 15/4/16. // Copyright (c) 2015年 Caesar. All rights reserved. // #import "SingleWebImageBrowser.h" #import "UIImageView+WebCache.h" #define IPHONE_SCREEN_WIDTH [[UIScreen mainScreen]bounds].size.width #define IPHONE_SCREEN_HEIGHT [[UIScreen mainScreen]bounds].size.height #define RGBACOLOR(r,g,b,a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:(a)] @interface SingleWebImageBrowser()<UIScrollViewDelegate> { UIWindow *window; UIImageView *imageView; UIScrollView *scrollView; NSString *_bmiddle_pic_url; NSString *_original_pic_url; // UIButton *downloadBtn; UIButton *saveBtn; // UIActivityIndicatorView *waiting; } @end @implementation SingleWebImageBrowser:NSObject static CGRect oldImageViewFrame; +(SingleWebImageBrowser *)sharedSingleWebImageBrowser{ static SingleWebImageBrowser *webImageBrowser; @synchronized(self){ if (!webImageBrowser) { webImageBrowser = [[self alloc]init]; } } return webImageBrowser; } -(void)showBmiddlePic:(SingleWebImageView *)webImageView{ _bmiddle_pic_url = webImageView.bmiddle_pic_url; _original_pic_url = webImageView.original_pic_url; //初始化控件 [self initComponent:webImageView]; [imageView addSubview:waiting]; [waiting startAnimating]; //使用SDWebImage异步下载并缓存图片 [imageView sd_setImageWithURL:[NSURL URLWithString:_bmiddle_pic_url] placeholderImage:nil options:SDWebImageProgressiveDownload completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL){ //图片下载成功 if (image) { [waiting stopAnimating]; imageView.image = image; CGSize imageSize = image.size; float b = imageSize.width/(IPHONE_SCREEN_WIDTH); //依据下载图片尺寸调整显示 //如果按比例缩小图片后图片长仍然比屏幕长,则按照长度设置scrollview的垂直方向上的可拖动范围 if (imageSize.height/b >= IPHONE_SCREEN_HEIGHT) { imageView.frame = CGRectMake(0, 20, IPHONE_SCREEN_WIDTH, imageSize.height/b); scrollView.contentSize = CGSizeMake(imageView.frame.size.width, imageView.frame.size.height + 40); } else{ imageView.frame = CGRectMake(0, (IPHONE_SCREEN_HEIGHT - imageSize.height/b)/2, IPHONE_SCREEN_WIDTH, imageSize.height/b); } } else{ [waiting stopAnimating]; } }]; UITapGestureRecognizer *tap_closeScrollView = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(closeBmiddlePic:)]; [scrollView addGestureRecognizer:tap_closeScrollView]; //放大图片浏览器 [UIScrollView animateWithDuration:0.3 animations:^{ scrollView.alpha = 1; }completion:^(BOOL finished){ }]; } - (void)initComponent:(UIImageView *)webImageView{ window = [UIApplication sharedApplication].keyWindow; downloadBtn = [UIButton buttonWithType:UIButtonTypeCustom]; downloadBtn.frame = CGRectMake(10, IPHONE_SCREEN_HEIGHT-40, 50, 25); [downloadBtn setTitle:@"Original" forState:UIControlStateNormal]; [downloadBtn setFont:[UIFont systemFontOfSize:12]]; downloadBtn.layer.cornerRadius = 5.0; downloadBtn.layer.masksToBounds = YES; downloadBtn.backgroundColor = RGBACOLOR(20, 200, 40, 0.5); [downloadBtn addTarget:self action:@selector(downloadOriginalPic) forControlEvents:UIControlEventTouchUpInside]; saveBtn = [UIButton buttonWithType:UIButtonTypeCustom]; saveBtn.frame = CGRectMake(70, IPHONE_SCREEN_HEIGHT-40, 50, 25); [saveBtn setTitle:@"Save" forState:UIControlStateNormal]; [saveBtn setFont:[UIFont systemFontOfSize:12]]; saveBtn.layer.cornerRadius = 5.0; saveBtn.layer.masksToBounds = YES; saveBtn.backgroundColor = RGBACOLOR(20, 200, 40, 0.5); [saveBtn addTarget:self action:@selector(saveImage) forControlEvents:UIControlEventTouchUpInside]; scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, IPHONE_SCREEN_WIDTH, IPHONE_SCREEN_HEIGHT)]; oldImageViewFrame = [webImageView convertRect:webImageView.bounds toView:window]; scrollView.backgroundColor = RGBACOLOR(150, 150, 150, 0.6); scrollView.scrollEnabled = YES; scrollView.showsVerticalScrollIndicator = YES; scrollView.delegate = self; scrollView.maximumZoomScale = 3.0; scrollView.minimumZoomScale = 0.5; imageView = [[UIImageView alloc]init]; imageView.contentMode = UIViewContentModeScaleAspectFill; imageView.layer.cornerRadius = 5.0; imageView.layer.masksToBounds = YES; //设置tag值因为点击时需要按照tag获取点击的控件 imageView.tag = 901; [scrollView addSubview:imageView]; [window addSubview:scrollView]; [window addSubview:downloadBtn]; [window addSubview:saveBtn]; waiting = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge]; waiting.center = CGPointMake(window.center.x, window.center.y); [window addSubview:waiting]; } //下载大图 - (void)downloadOriginalPic{ [waiting startAnimating]; [imageView sd_setImageWithURL:[NSURL URLWithString:_original_pic_url] placeholderImage:nil options:SDWebImageProgressiveDownload completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL){ if (image) { [waiting stopAnimating]; imageView.image = image; CGSize imageSize = image.size; float b = imageSize.width/(IPHONE_SCREEN_WIDTH); if (imageSize.height/b >= IPHONE_SCREEN_HEIGHT) { imageView.frame = CGRectMake(0, 20, IPHONE_SCREEN_WIDTH, imageSize.height/b); scrollView.contentSize = CGSizeMake(imageView.frame.size.width, imageView.frame.size.height + 40); } else{ imageView.frame = CGRectMake(0, (IPHONE_SCREEN_HEIGHT - imageSize.height/b)/2, IPHONE_SCREEN_WIDTH, imageSize.height/b); } } }]; } //保存图片到相册 - (void)saveImage{ UIImageWriteToSavedPhotosAlbum([imageView image], nil, nil, nil); UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Reminder" message:@"图片已保存" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil]; [alert show]; } -(void)closeBmiddlePic:(UITapGestureRecognizer *)tap{ UIScrollView *backgroundView = tap.view; UIImageView *aimageView = (UIImageView *)[tap.view viewWithTag:901]; [UIScrollView animateWithDuration:0.3 animations:^{ aimageView.frame = oldImageViewFrame; backgroundView.alpha = 0; downloadBtn.alpha = 0; saveBtn.alpha = 0; }completion:^(BOOL finished){ [backgroundView removeFromSuperview]; [downloadBtn removeFromSuperview]; [saveBtn removeFromSuperview]; }]; } //双指扩张放大图片 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)aScrollView{ if (aScrollView == scrollView) { return imageView; } return nil; } //放大缩小调整图片位置使其不发生偏移 - (void)scrollViewDidZoom:(UIScrollView *)ascrollView{ if (ascrollView == scrollView) { CGFloat offsetX = (ascrollView.bounds.size.width > ascrollView.contentSize.width)? (ascrollView.bounds.size.width - ascrollView.contentSize.width) * 0.5 : 0.0; CGFloat offsetY = (ascrollView.bounds.size.height > ascrollView.contentSize.height)? (ascrollView.bounds.size.height - ascrollView.contentSize.height) * 0.5 : 0.0; imageView.center = CGPointMake(ascrollView.contentSize.width * 0.5 + offsetX, ascrollView.contentSize.height * 0.5 + offsetY); } } @end
在项目的使用方法可参见最上面Demo地址写的README.md文件。几个语句即可为你的项目提供图片打开功能。非大神所以代码有改进的地方请多多指教。如果可以请下载Demo的时候顺便帮我Star一下。感激不尽。
相关文章推荐
- 自定义控件---类似添加邮件收件人效果
- WinForm实现类似QQ停靠,显示隐藏过程添加特效效果
- Android GridView做已选图片展示效果(类似写微博写朋友圈)
- xcode4.3.1定制UITableviewCell实现类似微博的分组效果
- 写一个android带动画效果的TabHost(类似微博客户端的切换效果)
- Android进阶:实现android系统自带查看照片动画效果 类似Gallery手势滑动
- 原生js DOM写的类似微博发布的效果
- 如何在一张图片上添加多个链接 ,如何利用js做出靠右侧浮动菜单栏的效果
- Android实现通用的ActivityGroup(效果类似Android微博客户端主界面),强烈建议不要再使用TabActivity
- 类似微博顶置效果
- View添加手势,防止View上点击其他视图触发点击效果
- 用combobox扩展控件(dsCtrlComboBox)做出类似QQ登录界面的效果
- iOS中给webView添加tap手势无效果
- Span使用之利用自定义Span解析Html中特殊标签实现类似微博@效果
- 添加表(类似GridView的效果)
- Android实现通用的ActivityGroup(效果类似Android微博客户端主界面),强烈建议不要再使用TabActivity
- 基于JQuery的类似新浪微博展示信息效果的代码
- 定制UITableviewCell实现类似微博的分组效果
- Android 给View添加重复的文字水印背景 类似钉钉通讯录的背景效果