IOS 怎么用UIScrollView来滚动和缩放他的内容第一篇

本篇文章来自于互联网资料翻译

UIScrollView是在IOS最有用的控件之一。他是一个来展示超过一个屏幕的内容的很好的方式。下面有不少的技巧来使用他。

这篇文章就是关于UIScrollView的，深刻浅出，看看咱们接下来学习的内容：

1：怎么用UIScrollView来展一个比较大的图片

2：当UIScrollView缩放的时候怎么一直保持在中间

3：在UIScrollView里面怎么嵌入一个复杂的视图层次

4：UIScrollView的特性怎么和UIPageControl一块儿来浏览多个页面的内容

5：建立一个UIScrollView滚动视图在上面能看到下一页和上一页的一部分而且还能看到当前页面。这就像appstore的一个浏览app的一个效果。

这篇文章是IOS5.0以上 xcode4.5的环境

咱们开始建立一个项目以下图：

咱们填上项目的名字还有你建立appid时候写的公司标识，还有类名字的前缀，设置咱们的设备是iPhone咱们暂时只支持iPhone的模式，选择单视图模版。选择下一步而且选择保存位置。

因为咱们介绍UIScrollView的4个效果，所以咱们建立一个tableView，每一个cell会出现一个新的视图控制器而且展示一个效果。

上面这个图显示如今你的storyboard是什么样的当你完成的时候。

咱们编译UITableView的导航，接下来咱们要作的是：

1：打开MainStroyboard.storyboard而且点击系统模版给咱们建立的第一个初始化场景。

2：而后咱们添加一个UITableViewController从对象库而后放到storyboard。

3：如今选择tableView你刚才添加的而后选择Editor，而后Embed in，NavigationController。

4：选择tableViewController的tableView，而且设置他的cell类型是静态类型的在属性检查器。

5：最后，设置tableView的section是一个，有4个cell，设置cell是basic类型。而后把他们的lables改成Image scroll，Custom View scroll，paged paged with peeking

保存这个storyboard ，而且编译运行。你应该看到你的tableView。以下图：

滚动缩放一个大图片：

咱们接下来要作的是学习怎么用UIScrollView来缩放和滚动一个大的图片。

第一步你须要设置这个Viewcontroller，选择ViewController.h 而且添加一个UIScrollView的outlet。让你的Controller符合UIScrollView的UIScrollViewDelegate协议以下

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController <UIScrollViewDelegate>
 
@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
 
@end

而后在在ViewController.m设置实现属性

@synthesize scrollView = _scrollView;

回到storyboard，从对象库拖拽一个Viewcontroller而且设置他的类是Viewcontroller。

点击tableview的Cell  crl+点击鼠标左键向一个新的Viewcontroller拖拽，而且弹出一个storyboard segues而且选择push效果。

从对象库拖拽一个UIScrollView到Viewcontroller上而且填充。

而后而后把UIScrollView的输出口连上还有设置Viewcontroller做为UIScrollView的代理。以下图：

如今在Viewcontroller.m中的延展中添加属性和方法。这些属性方法是私有的。

而后添加

@synthesize imageView = _imageView;

如今咱们开始设置咱们的UIScrollView了在viewDidLoad和viewVillAppear

用下面代码：

- (void)viewDidLoad {
    [super viewDidLoad];
 
    // 1
    UIImage *image = [UIImage imageNamed:@"photo1.png"];
    self.imageView = [[UIImageView alloc] initWithImage:image];
    self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=image.size};
    [self.scrollView addSubview:self.imageView];
 
    // 2
    self.scrollView.contentSize = image.size;
 
    // 3
    UITapGestureRecognizer *doubleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewDoubleTapped:)];
    doubleTapRecognizer.numberOfTapsRequired = 2;
    doubleTapRecognizer.numberOfTouchesRequired = 1;
    [self.scrollView addGestureRecognizer:doubleTapRecognizer];
 
    UITapGestureRecognizer *twoFingerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewTwoFingerTapped:)];
    twoFingerTapRecognizer.numberOfTapsRequired = 1;
    twoFingerTapRecognizer.numberOfTouchesRequired = 2;
    [self.scrollView addGestureRecognizer:twoFingerTapRecognizer];
}
 
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
 
    // 4
    CGRect scrollViewFrame = self.scrollView.frame;
    CGFloat scaleWidth = scrollViewFrame.size.width / self.scrollView.contentSize.width;
    CGFloat scaleHeight = scrollViewFrame.size.height / self.scrollView.contentSize.height;
    CGFloat minScale = MIN(scaleWidth, scaleHeight);
    self.scrollView.minimumZoomScale = minScale;
 
    // 5
    self.scrollView.maximumZoomScale = 1.0f;
    self.scrollView.zoomScale = minScale;
 
    // 6
    [self centerScrollViewContents];
}

上面的代码看起来有点复杂。所以咱们停下来一步步的分析下。

1：第一步，你须要建立一个UIImageView，设置他的Image属性，而后设置UIImageView的坐标，而且添加到UIScrollView上

2：而后咱们设置UIScrollView的contentSize，这样作的目的是让UIScrollView知道他本身能向横方向和竖方向滚动多远或者说多少像素。

3：而后向UIScrollView上面添加了两个手势:一个是双击手势来缩小，另外一个两个手指单击来放大。

4：接下来咱们须要计算UIScrollView的最小缩放比例。缩放比例是1意味着UIScrollView的内容是正常大小展现。小于1，展现内容放大，当

大于1说明内容缩小。为了获得最小缩放比例，你须要计算你缩放多少才能让图片温馨的展现到UIScrollView里根据他的宽度。而后你根据他的高度作相同的计算。最后比较这两个缩放比例的最小的一个设置为UIScrollView最小缩放比例。给你一个缩放比例而后你能够看到整张图片当放大的时候。

5:你设置最大缩放比例为1，由于缩放的比图片分辨率大你看图片会模糊。你设置初始缩放为最小缩放比例。所以这个图片能够开始充分放大。

6：让你的图片永远在UIScrollView中间当缩放时候。

- (void)centerScrollViewContents {
    CGSize boundsSize = self.scrollView.bounds.size;
    CGRect contentsFrame = self.imageView.frame;
 
    if (contentsFrame.size.width < boundsSize.width) {
        contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
    } else {
        contentsFrame.origin.x = 0.0f;
    }
 
    if (contentsFrame.size.height < boundsSize.height) {
        contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
    } else {
        contentsFrame.origin.y = 0.0f;
    }
 
    self.imageView.frame = contentsFrame;
}若是UIScrollView的bounds大小大于UIImageView图片frame的大小，那么图片的坐标就是条件为真时计算的结果，相反就是原始坐标。- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer {
    // 1
    CGPoint pointInView = [recognizer locationInView:self.imageView];
 
    // 2
    CGFloat newZoomScale = self.scrollView.zoomScale * 1.5f;
    newZoomScale = MIN(newZoomScale, self.scrollView.maximumZoomScale);
 
    // 3
    CGSize scrollViewSize = self.scrollView.bounds.size;
 
    CGFloat w = scrollViewSize.width / newZoomScale;
    CGFloat h = scrollViewSize.height / newZoomScale;
    CGFloat x = pointInView.x - (w / 2.0f);
    CGFloat y = pointInView.y - (h / 2.0f);
 
    CGRect rectToZoomTo = CGRectMake(x, y, w, h);
 
    // 4
    [self.scrollView zoomToRect:rectToZoomTo animated:YES];
}

1：得到你点击图片的坐标位置.

2:接下来计算缩放比例缩放150%，可是必须限制最大缩放比例

3：而后用第一步计算的位置计算你想要缩放的位置大小。

4：最后，你须要告诉UIScrollView缩放的frame而且加上动画。

- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer {
    // Zoom out slightly, capping at the minimum zoom scale specified by the scroll view
    CGFloat newZoomScale = self.scrollView.zoomScale / 1.5f;
    newZoomScale = MAX(newZoomScale, self.scrollView.minimumZoomScale);
    [self.scrollView setZoomScale:newZoomScale animated:YES];
}

这相似放大的方式。

- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    // Return the view that you want to zoom
    return self.imageView;
}

这是UIScrollView缩放机制的灵魂地方。当UIScrollView完成缩放时候你告诉他是哪一个视图在UIScrollView里面实现了缩放。

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    // The scroll view has zoomed, so you need to re-center the contents
    [self centerScrollViewContents];
}

这个方法是当UIScrollView完成缩放时候，你须要通知视图在UIScrollView中间，不然UIScrollView缩放不天然。

编译运行项目出现上图效果，你能够试着放大缩小滚动。