最终效果图:
BeyondViewController.h
// // BeyondViewController.h // 7_scrollView大图展示 // // Created by beyond on 14-7-24. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> @interface BeyondViewController : UIViewController - (IBAction)upBtnClick:(id)sender; @end
BeyondViewController.m
// // BeyondViewController.m // 7_scrollView大图展示 // // Created by beyond on 14-7-24. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import "BeyondViewController.h" @interface BeyondViewController ()<UIScrollViewDelegate> { UIScrollView *_scrollView; // 要缩放的是内部的哪一个控件 UIImageView *_imgView; } @end @implementation BeyondViewController - (void)viewDidLoad { [super viewDidLoad]; // UIImageView // 1,类方法创建控件 // UIImageView *imgView = [[UIImageView alloc]init]; // 2,控件细节 // NSString *imgName = [NSString stringWithFormat:@"HD.jpg"]; // imgView.image = [UIImage imageNamed:imgName]; // CGFloat imgW = imgView.image.size.width; // CGFloat imgH = imgView.image.size.height; // imgView.frame = CGRectMake(0, 0, imgW, imgH); // 或者快速创建,一句顶上面的6句代码 _imgView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"HD.jpg"]]; // 1,实例化UIScrollView _scrollView = [[UIScrollView alloc]init]; // 2,设置scrollView的可视大小,内容大小,等属性 // _scrollView.frame = CGRectMake(0, 0, 320, 480); _scrollView.frame = self.view.bounds; _scrollView.contentSize = _imgView.image.size; // 这个最重要,是滚动区域 _scrollView.showsHorizontalScrollIndicator = NO; _scrollView.showsVerticalScrollIndicator = NO; _scrollView.bouncesZoom = NO; _scrollView.bounces = YES; // scrollView.contentOffset是个点,x(左)和y(上),值是scrollView里面的大图片拖拽的位移,相对于scrollView的显示窗口的最左上角 // 上左下右 逆时针 到边界之后,回不去了,多出来的距离 // scrollView.contentInset = UIEdgeInsetsMake(5, 10, 20, 40); // 3,将imgeView添加到scrollView [_scrollView addSubview:_imgView]; // 4,将scrollView添加到self.view // [self.view addSubview:_scrollView]; // 小bug解决,界面上的按钮被完全遮挡了 [self.view insertSubview:_scrollView atIndex:0]; /* 4.scrollView实现缩放(捏合手势)四步曲 1,设置代理 为 当前控制器 2,代理 尊守 协议 <UIScrollViewDelegate> 3,代理 实现 协议中的方法 viewForZoomingInScrollView,告诉scrollView要缩放的是它内部的哪一个控件 4,scrollView设置最大最小缩放比 即可 */ _scrollView.delegate = self; _scrollView.minimumZoomScale = 0.3; _scrollView.maximumZoomScale = 2.0; } // 代理 实现 协议中的方法,告诉scrollView要缩放的是它内部的哪一个控件 -(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { return _imgView; } - (IBAction)upBtnClick:(id)sender { // scrollView.contentOffset是个点,x(左)和y(上),值是scrollView里面的大图片拖拽的位移,相对于scrollView的显示窗口的最左上角 [UIView animateWithDuration:0.3 animations:^{ // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量 CGPoint offset = _scrollView.contentOffset; if (offset.y + 80 >= _scrollView.contentSize.height - _scrollView.frame.size.height) { return; } offset.y += 80; _scrollView.contentOffset = offset; }]; } @end
scrollView的contentOffset
scrollView原理是通过拖拽其内部的大图片