iOS UIScrollView+UIImageView 制作简单的图片浏览器，支持缩放、平移

最新推荐文章于 2018-01-13 10:02:43 发布
原创 最新推荐文章于 2018-01-13 10:02:43 发布 · 877 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ios #uiimageview #uiview #类 #uiimage

这篇博客介绍如何利用UIScrollView的内置功能，配合UIImageView，轻松实现一个支持缩放和平移的简单图片浏览器。博主详细讲解了代码实现过程，包括主界面及详细视图的设置，确保图片在缩放后能够正确居中显示，并处理了平移时的边界问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

首先是主界面代码;

#import "MainViewController.h"

#import "TowViewController.h"

#import "OneViewController.h"   

#import "MyButton.h"

@interface MainViewController ()


@end


@implementation MainViewController

-(void)dealloc

{

    

    [super dealloc];

}

-(instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

{

    self=[super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

    if (self) {

        

    }return self;

}





- (void)viewDidLoad {

    [super viewDidLoad];

    [self.view setBackgroundColor:[UIColor whiteColor]];

    [self cover];


}

-(void)cover

{

    MyButton *aButton=[[MyButton alloc]initWithFrame:CGRectMake(20, 20, self.view.frame.size.width/3, self.view.frame.size.height/4)];

    UIImage *temp=[UIImage imageNamed:@"1.jpg"];

    [aButton setImage:temp forState:UIControlStateNormal];

    [aButton addTarget:self action:@selector(goToshanghai:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:aButton];

    [temp release];

    [aButton release];

    

    MyButton *bButton=[[MyButton alloc]initWithFrame:CGRectMake(20+aButton.frame.size.width,20,250, self.view.frame.size.height/4)];

//    [bButton setBackgroundColor:[UIColor redColor]];

    [bButton setTitle:@"小宝贝我来上海啦" forState:UIControlStateNormal];

    [bButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    bButton.titleLabel.font=[UIFont systemFontOfSize:20];

    [bButton addTarget:self action:@selector(goToshanghai:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:bButton];

    [bButton release];

    

    MyButton *aButton1=[[MyButton alloc]initWithFrame:CGRectMake(20, aButton.frame.size.height+40, self.view.frame.size.width/3, self.view.frame.size.height/4)];

    UIImage *temp1=[UIImage imageNamed:@"2.jpg"];

    [aButton1 setImage:temp1 forState:UIControlStateNormal];

    [aButton1 addTarget:self action:@selector(goToMydalian:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:aButton1];

    [temp1 release];

    [aButton1 release];

    MyButton *bButton1=[[MyButton alloc]initWithFrame:CGRectMake(20+aButton.frame.size.width,aButton.frame.size.height+40,250, self.view.frame.size.height/4)];

//    [bButton1 setBackgroundColor:[UIColor redColor]];

    [bButton1 setTitle:@"小宝贝来了大连啦" forState:UIControlStateNormal ];

    [bButton1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

     bButton1.titleLabel.font=[UIFont systemFontOfSize:20];

    [bButton1 addTarget:self action:@selector(goToMydalian:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:bButton1];

    [bButton1 release];

    MyButton *aButton2=[[MyButton alloc]initWithFrame:CGRectMake(20, aButton1.frame.origin.y+aButton.frame.size.height+20, self.view.frame.size.width/3, self.view.frame.size.height/4)];

    UIImage *temp2=[UIImage imageNamed:@"3.jpg"];

    [aButton2 setImage:temp2 forState:UIControlStateNormal];

    [aButton2 addTarget:self action:@selector(TheCloudOfMissing:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:aButton2];

    [temp2 release];

    [aButton2 release];

    MyButton *bButton2=[[MyButton alloc]initWithFrame:CGRectMake(20+aButton.frame.size.width,aButton1.frame.origin.y+aButton.frame.size.height+20,250, self.view.frame.size.height/4)];

//    [bButton2 setBackgroundColor:[UIColor redColor]];

    [bButton2 setTitle:@"思念描绘的云彩" forState:UIControlStateNormal];

    [bButton2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    bButton2.titleLabel.font=[UIFont systemFontOfSize:25];

    [bButton2 addTarget:self action:@selector(TheCloudOfMissing:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:bButton2];

    [bButton2 release];

    

    

}

-(void)goToshanghai:(id)sender

{

    OneViewController *One=[[OneViewController alloc]init];

    [self presentViewController:One animated:YES completion:^{

        

        

    }];

    [One  release];

}



-(void)goToMydalian:(id)sender

{

   TowViewController *Tow=[[TowViewController alloc]init];

    [self presentViewController:Tow animated:YES completion:^{

        

        

    }];

    [Tow release];

}


然后是进入相册之后进行循环自动播放的代码在另一类中建立的

:

#import "OneViewController.h"

#import "MyButton.h"

@interface OneViewController ()


@end


@implementation OneViewController

-(void)dealloc

{

  

    [super dealloc];

}

-(instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

{

    self=[super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

    if (self) {

        

    }return self;

}

- (void)viewDidLoad {

    [super viewDidLoad];

    [self goToshanghai];

}

-(void)goToshanghai

{

    UIView *aView=[[UIView alloc]initWithFrame:[[UIScreen mainScreen]bounds]];

    [aView setBackgroundColor:[UIColor whiteColor]];

    [self.view addSubview:aView];

    [aView release];

    self.imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 20,aView.frame.size.width, 550)];

    [_imageView setImage:[UIImage imageNamed:@"11.JPG"]];

    _imageView.animationDuration=15;

    [aView addSubview: _imageView];

    _imageView.userInteractionEnabled = YES;

    [_imageView release];

    

    

    MyButton *button  =[[MyButton alloc]initWithFrame:CGRectMake(30, 600, 50,30)];

    button.backgroundColor = [UIColor yellowColor];

    [button setTitle:@"开始" forState:UIControlStateNormal];

    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    button.selected = YES;

    [button addTarget:self action:@selector(startAnimating) forControlEvents:UIControlEventTouchUpInside];

    [aView addSubview:button];

    [button release];

    MyButton *button2 = [[MyButton alloc]initWithFrame:CGRectMake(130,600, 50, 30)];

    button2.backgroundColor = [UIColor yellowColor];

    [button2 setTitle:@"停止" forState:UIControlStateNormal];

    [button2 setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    button2.selected = YES;

    [button2 addTarget:self action:@selector(stopAnimating) forControlEvents:UIControlEventTouchUpInside];

    [aView addSubview: button2];

    [button2 release];

    MyButton *button3 = [[MyButton alloc]initWithFrame:CGRectMake(230,600, 50, 30)];

    button3.backgroundColor = [UIColor yellowColor];

    [button3 setTitle:@"返回" forState:UIControlStateNormal];

    [button3 setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    button3.selected = YES;

    [button3 addTarget:self action:@selector(goToshanghai:) forControlEvents:UIControlEventTouchUpInside];

    [aView addSubview: button3];

    [button3 release];

    

    

    

    NSMutableArray *array = [NSMutableArray array];

    for(int i =1;i< 22;i++){

        NSString *name = [NSString stringWithFormat:@"1%d.JPG",i];

        UIImage *image = [UIImage imageNamed:name];

        [array addObject:image];

        

    }

    _imageView.animationImages = array;

    

}



-(void)sliderAction:(id)sender{

    

    [self.imageView startAnimating];

}



- (void)startAnimating{

    [self.imageView startAnimating];

}

- (void)stopAnimating{

    [self.imageView stopAnimating];

}


- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

-(void)goToshanghai:(id)sander

{

    [self dismissViewControllerAnimated:YES completion:nil];

}


最后是第二个相册的代码内容,是进行手动的翻动照片产生的效果与iPhone手机上的效果基本是一样一样的;
能放大能缩小,能循环翻页;

#import "TowViewController.h"

#import "MyButton.h"

@interface TowViewController ()<UIScrollViewDelegate>

@property(nonatomic ,assign)UIScrollView *aScroll;

@property(nonatomic ,assign)UIPageControl *page;

@end


@implementation TowViewController

-(void)dealloc

{

    [_aScroll release];

    [super dealloc];

}

-(void)loadView

{

    [super loadView];

}

-(instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

{

    self=[super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

    if (self) {

        

    }return self;

}









- (void)viewDidLoad {

    [super viewDidLoad];

    [self MyView];

}

-(void)MyView


{

    

    self.aScroll=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 500)];

    _aScroll.delegate=self;

    [_aScroll setBackgroundColor:[UIColor yellowColor]];

    _aScroll.pagingEnabled=YES;//边界回弹;

    

    

    _aScroll.maximumZoomScale=2.0f;

    _aScroll.minimumZoomScale=0.5f;

    _aScroll.contentOffset=CGPointMake(_aScroll.frame.size.width*0, 0);

    

    [_aScroll setContentSize:CGSizeMake(_aScroll.frame.size.width*14,0)];

    [self.view addSubview:_aScroll];

    

    

    for (int i=1; i<15; i++) {

        NSString *name=[NSString stringWithFormat:@"0%d",i];

        

        NSString *path=[[NSBundle mainBundle]pathForResource:name ofType:@"JPG"];

        UIImage *myimage=[UIImage imageWithContentsOfFile:path];

        

        UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, _aScroll.frame.size.width, _aScroll.frame.size.height)];

        [imageView setImage:myimage];

        UIScrollView *bScroll=[[UIScrollView alloc]initWithFrame:CGRectMake((i-1)*_aScroll.frame.size.width, 0, _aScroll.frame.size.width, _aScroll.frame.size.height)];

        [bScroll setBackgroundColor:[UIColor blackColor]];

        bScroll.maximumZoomScale=2.0f;

        bScroll.minimumZoomScale=0.5f;

        bScroll.delegate=self;

        [_aScroll addSubview:bScroll];

        [bScroll addSubview:imageView];

        [imageView release];

    }

    UIScrollView *cScroll=[[UIScrollView alloc]initWithFrame:CGRectMake(-_aScroll.frame.size.width,0,_aScroll.frame.size.width,_aScroll.frame.size.height)];

    UIImageView *aimage=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, cScroll.frame.size.width, cScroll.frame.size.height)];

    [aimage setImage:[UIImage imageNamed:@"014.JPG"]];

    [_aScroll addSubview:cScroll];

    [cScroll addSubview:aimage];

    UIScrollView *dScroll=[[UIScrollView alloc]initWithFrame:CGRectMake(_aScroll.frame.size.width*14,0,_aScroll.frame.size.width,_aScroll.frame.size.height)];

    UIImageView *bimage=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, cScroll.frame.size.width, dScroll.frame.size.height)];

    [bimage setImage:[UIImage imageNamed:@"01.JPG"]];

    [_aScroll addSubview:dScroll];

    [dScroll addSubview:bimage];

    self.page=[[UIPageControl alloc]initWithFrame:CGRectMake(0, 530, 380, 40)];

    [_page setBackgroundColor:[UIColor blackColor]];

    _page.numberOfPages=14;

    [_page addTarget:self action:@selector(pageAction:) forControlEvents:UIControlEventValueChanged];

    [self.view addSubview:_page];

    [_page release];

    

    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(230,600, 50, 30)];

    button.backgroundColor = [UIColor yellowColor];

    [button setTitle:@"返回" forState:UIControlStateNormal];

    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    button.selected = YES;

    [button addTarget:self action:@selector(loginInterface:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview: button];

    [button release];

   

}


-(void)pageAction:(id)sender

{

    CGFloat value =_page.currentPage* self.view.frame.size.width;

    [_aScroll setContentOffset:CGPointMake(value, 0) animated:YES];

}



-(void)loginInterface:(id)sander

{

    [self dismissViewControllerAnimated:YES completion:nil];

}




- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}






-(void)scrollViewDidScroll:(UIScrollView *)scrollView//正在进行滚动运行

{

    NSLog(@"%s",__func__);

    

    CGPoint str=self.aScroll.contentOffset;

    if (str.x<0 ) {

        [self.aScroll setContentOffset:CGPointMake(self.aScroll.frame.size.width*13, 0) animated:YES];

    }

    if (str.x>13*375) {

        [self.aScroll setContentOffset:CGPointMake(0, 0) animated:YES];

    }

    

}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView//将要开始滚动运行;

{

    

}


-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset//已经结束滚动运行

{

}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate //将要结束滚动运行;

{

    

}

-(UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView

{

    NSArray *array=scrollView.subviews;

    return [array objectAtIndex:0];

}


- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView

{


}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

    CGPoint temp=self.aScroll.contentOffset;

    self.page.currentPage=temp.x/self.aScroll.frame.size.width;

    if (temp.x<0) {

        self.page.currentPage=13;

    }

    if (temp.x>

        375*13) {

        self.page.currentPage=0;

    }


}



GoingHome1207
关注
UIScrollView结合UIImageView实现图片缩放
番薯大佬的专栏
01-10 2100
实现UIImageView的图片缩放功能，需要结合UIScrollView实现。 示例代码 // 定义缩放比例 CGFloat scaleMini = 1.0; CGFloat scaleMax = 3.0; // 主视图 UIScrollView UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.b...
iOS中UIScrollView嵌套UIImageView实现图片滑动浏览、缩放
ericzkx的专栏
04-23 4126
一开始的时候是UIScrollView直接嵌套UIImageView，滑动浏览都是正常的，但是不能伸缩，试了UIScrollVIew自身的zoom方法，也试用了pinch gesture的方法都无果，后来想到了用UIScrollView嵌套UIScrollVIew再嵌套UIImageView的方法实现，然后缩放用的是UIScrollView自身的缩放方法，成功，很棒。 载入图片是用的SDWebI
IOS uiscrollview 实现图片的放大缩小滚动浏览
03-19
通过实现UISCrollview 代理方法来实现图片的浏览，及放大缩小。 使用方法： viewWillAppear中实现 showbigImage=[[ShowBigImageBox alloc]init]; [showbigImage setShowBigImageBoxDelegate:self]; viewWillDisappear中实现：[showbigImage clearBigImageBox];//在页面结束的时候清楚图片显示View 显示图片：[showbigImage showBigImageBox:array]; //array为图片的链接地址
UiScrollView图片浏览器
海阔天空
05-27 911
这是一个用  UI
关于UIScrollView中UIImageView的图片缩放问题
。
11-27 1201
回看以前的代码 发现自己在还没有接触UIGestureRecognizer时就实现过UIScrollView中UIImageView的缩放 发现UIScrollView有一个代理方法可以实现 核心代码:@interface ViewController ()<UIScrollViewDelegate>@property(nonatomic, strong) UIScrollView *mainS
UIScorllView 控件实现图片缩放功能
Bluelich的专栏
09-22 1043
一、缩放 1.简单说明： 有些时候，我们可能要对某些内容进行手势缩放，如下图所示   UIScrollView不仅能滚动显示大量内容，还能对其内容进行缩放处理。也就是说，要完成缩放功能的话，只需要将需要缩放的内容添加到UIScrollView中 2.缩放原理 当用户在UIScrollView身上使用捏合手势时，UIScrollView会给代理发送一条消息，询问代理究竟要缩放自己内部
Swift实现UIScrollView+UIImageView+AutoLayout图片查看功能
资源摘要信息:"ScrollImage-Swift是一个利用Swift语言结合UIScrollView和UIImageView以及AutoLayout来实现图片浏览的项目。它允许用户在一个视图中查看、放大、缩小和移动图片，类似于微博等社交平台上的图片查看...
swift-iOS使用UIScrollView处理图片的缩放(图片浏览器)
08-15
在LLPhotoBrowser-master这个项目中，开发者可能已经实现了一个简单的图片浏览器原型，包括基本的图片显示、缩放和平移功能。你可以通过阅读代码和运行示例来了解具体实现细节，同时也可以根据自己的需求对其进行...
iOS利用UIScrollView实现图片的缩放实例代码
01-04
本文介绍了iOS利用UIScrollView实现图片的缩放实例代码，分享给大家： 第一步：添加scrollView到控制器中 UIScrollView *scrollView = [[UIScrollView alloc] init]; scrollView.frame = CGRectMake(40, 250, 300...
打造iOS图片浏览器：UIScrollView实现图片缩放和平移
资源摘要信息:"在iOS应用开发中，使用UIScrollView来处理图片的缩放和平移是一项常见的功能，尤其适用于图片浏览器的场景。UIScrollView是一个功能强大的视图组件，它可以轻松实现内容的滚动查看。通过与UIImageView...
【iOS】UIScrollView中的UIImageView居中 与 autoLayout
arctan90的专栏
08-27 2736
碰到一个很简单的场景：我想把一张图片居中显示在
UIScrollView实现图片浏览
qq_21453573的博客
08-07 479
一下内容主要讲何如使用UIScrollView建立三个视图来循环显示多个图像信息，默认多个imageView为三个或者三个以上。 以下是代码部分： #import "MainViewController.h" #define kScreenWidth [UIScreen mainScreen].bounds.size.width #define kScreenHeight [UIScree
UIScrollView 图片缩放、拖拽
weixin_30580341的博客
11-19 271
UIScrollView初始化： //滚动视图 _myScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 44)]; _myScrollView.pagingEnabled = ...
iOS 各种手势用法
H_O_W_E的专栏
10-29 1406
原文标题是，IOS UIScrollview UIImageView点击事件处理 原文出自：http://blog.sina.com.cn/s/blog_bd98ffe20101bz7z.html 开发ios应用时我们经常用到多手势来处理事情，如给scrollView增加点击事件，scrollView不能响应view的touch事件,但有时候却要用到多手势事件，那么我们可以
UIScrollView和UIPageControl结合实现简单图片浏览
都是笔记,
11-22 365
定义声明 @interface RootView : UIView @property(nonatomic,retain)UIScrollView *scroll; @property(nonatomic,retain)UIPageControl *page; @end
iOS 编程 利用UIScrollView 编写无缝循环显示图片
woshidaniu的专栏
07-24 653
实现思路： 1、使用UIScrollView来显示图片 2、UIScrollView中使用三个UIImageView左中右来显示 3、UISCollView动画滚动，滚动完毕后立即把三个UIImageview中的图片循环更换 4、重视定时滚动使用NSTime定时器，当然也可以用多线程，实际选用那种方式看情况吧 #import "MyScrollView.h
iOS常用之imageview和scrollView显示长图片
代码解释生活
01-13 4158
-(void)addImageOnViewWithImage:(NSString *)imageStr{    UIScrollView *scroll=[[UIScrollViewalloc]initWithFrame:self.view.frame];    scroll.showsVerticalScrollIndicator=NO;    [self.viewaddSubview:scro...
UIScrollView的滑动原理解析
Zok93
08-06 9626
顾名思义，UIScrollView 就是负责滚动的视图 移动设备的屏幕大小是极其有限的，因此直接展示在用户眼前的内容也相当有限 当展示的内容较多，超出一个屏幕时，用户可通过滚动手势来查看屏幕以外的内容 普通的 UIView 不具备滚动功能，不能显示过多的内容 UIScrollView是一个能够滚动的视图控件，可以用来展示大量的内容，并且可以通过滚动查看所有的内容 iOS 开发中几个重要的控件都继承自
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值