当前位置:   article > 正文

ios--解决方案--图片浏览(带缩放+平移)_ios 图片浏览器缩放效果

ios 图片浏览器缩放效果

原文转自:http://wangsheng2008love.blog.163.com/blog/static/78201689201273011515130/


最近想做一个简单的图片浏览器,支持缩放、平移。本想自己用手势处理图片的缩放和平移,但经过搜索引擎一搜索,发现可以借助UIScrollView的缩放功能,完美实现图片的缩放和平移。当前,中途也遇到缩放后图片没有居中显示,或者即使居中显示了,但是平移时发现图片一边到不了边,另一边却留很多空隙。经过再一次搜索,找到了答案。下面我整理了下代码,发布出来。(我的开发环境:XCode4.4,iOS SDK:5.1)


一、工程结构截图
iOS UIScrollView+UIImageView 制作简单的图片浏览器,支持缩放、平移 - 齐博云天 - 思想的自由是最高的独立
 
二、用到的类
1、ImageViewController.h
    
  1. #import <UIKit/UIKit.h>
  2. @interface ImageViewerController : UIViewController <UIScrollViewDelegate>
  3. @property (strong, nonatomic) IBOutlet UIScrollView *sv;
  4. @property (strong, nonatomic) IBOutlet UIImageView *iv;
  5. @property (strong, nonatomic) IBOutlet UIView *loadingView;
  6. - (void)loadImage:(NSString *)imageURL;
  7. @end
   
2、ImageViewController.m
  1. #import "ImageViewerController.h"
  2. @interface ImageViewerController ()
  3. @end
  4. @implementation ImageViewerController
  5. @synthesize sv;
  6. @synthesize iv;
  7. @synthesize loadingView;
  8. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
  9. {
  10. self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
  11. if (self) {
  12. // Custom initialization
  13. }
  14. return self;
  15. }
  16. - (void)viewDidLoad
  17. {
  18. [super viewDidLoad];
  19. // Do any additional setup after loading the view from its nib.
  20. self.view.backgroundColor = [UIColor blackColor];
  21. [self.view addSubview:loadingView];
  22. self.sv.delegate = self;
  23. [self loadImage:@"http://b218.photo.store.qq.com/psb?/V14b2MUB2EAmtl/kbZCrL7A9u.GV4SWP.1EHsReqMEspo1uv5aKcDn*.8c!/b/Yas484HnBAAAYjY684GiBAAA&bo=fAIgA3s!"];
  24. }
  25. // 加载图片
  26. - (void)loadImage:(NSString *)imageURL
  27. {
  28. NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:imageURL]];
  29. [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue currentQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *error){
  30. if([data length] > 0 && error==nil){
  31. NSString *result = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
  32. NSRange range = [result rangeOfString:@"404 Not Found"];
  33. if(range.location != 0){
  34. [self showLoadFailedAlert];
  35. [UIView animateWithDuration:0.3 delay:0.3 options:UIViewAnimationCurveLinear animations:^ {
  36. self.loadingView.alpha = 0;
  37. } completion:^(BOOL finished){
  38. [self.loadingView setHidden:YES];
  39. }];
  40. return;
  41. }
  42. UIImage *image = [UIImage imageWithData:data];
  43. // 重置UIImageView的Frame,让图片居中显示
  44. CGFloat origin_x = abs(sv.frame.size.width - image.size.width)/2.0;
  45. CGFloat origin_y = abs(sv.frame.size.height - image.size.height)/2.0;
  46. self.iv.frame = CGRectMake(origin_x, origin_y, sv.frame.size.width, sv.frame.size.width*image.size.height/image.size.width);
  47. [self.iv setImage:image];
  48. CGSize maxSize = sv.frame.size;
  49. CGFloat widthRatio = maxSize.width/image.size.width;
  50. CGFloat heightRatio = maxSize.height/image.size.height;
  51. CGFloat initialZoom = (widthRatio > heightRatio) ? heightRatio : widthRatio;
  52. /*
  53. ** 设置UIScrollView的最大和最小放大级别(注意如果MinimumZoomScale == MaximumZoomScale,
  54. ** 那么UIScrllView就缩放不了了
  55. */
  56. [sv setMinimumZoomScale:initialZoom];
  57. [sv setMaximumZoomScale:5];
  58. // 设置UIScrollView初始化缩放级别
  59. [sv setZoomScale:initialZoom];
  60. // 动态隐藏加载界面,从而显示图片
  61. [UIView animateWithDuration:0.3 delay:0.3 options:UIViewAnimationCurveLinear animations:^{
  62. self.loadingView.alpha = 0;
  63. } completion:^(BOOL finished){
  64. [self.loadingView setHidden:YES];
  65. }];
  66. }else{
  67. [self showLoadFailedAlert];
  68. }
  69. }];
  70. }
  71. // 设置UIScrollView中要缩放的视图
  72. - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
  73. {
  74. return self.iv;
  75. }
  76. // 让UIImageView在UIScrollView缩放后居中显示
  77. - (void)scrollViewDidZoom:(UIScrollView *)scrollView
  78. {
  79. CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?
  80. (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;
  81. CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?
  82. (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;
  83. iv.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
  84. scrollView.contentSize.height * 0.5 + offsetY);
  85. }
  86. // 显示加载失败的提示对话框
  87. - (void)showLoadFailedAlert
  88. {
  89. UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示"
  90. message:@"加载图片失败"
  91. delegate:nil
  92. cancelButtonTitle:@"确定"
  93. otherButtonTitles:nil];
  94. [alert show];
  95. }
  96. - (void)viewDidUnload
  97. {
  98. [super viewDidUnload];
  99. // Release any retained subviews of the main view.
  100. // e.g. self.myOutlet = nil;
  101. }
  102. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
  103. {
  104. return (interfaceOrientation == UIInterfaceOrientationPortrait);
  105. }
  106. @end
3、 ImageViewController.xib



三、效果图
至此,一个简单的图片浏览器已做完。下面晒几张效果图。
iOS UIScrollView+UIImageView 制作简单的图片浏览器,支持缩放、平移 - 齐博云天 - 思想的自由是最高的独立                         iOS UIScrollView+UIImageView 制作简单的图片浏览器,支持缩放、平移 - 齐博云天 - 思想的自由是最高的独立
 
  iOS UIScrollView+UIImageView 制作简单的图片浏览器,支持缩放、平移 - 齐博云天 - 思想的自由是最高的独立                         iOS UIScrollView+UIImageView 制作简单的图片浏览器,支持缩放、平移 - 齐博云天 - 思想的自由是最高的独立


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/算法优化者/article/detail/60257
推荐阅读
相关标签
  

闽ICP备14008679号