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缩放不自然。

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