转载请注明出处

http://blog.csdn.net/pony_maggie/article/details/37370159

作者:小马

这节课讲视图的生命周期，网络视图，图像视图以及 滚动视图这些概念以及相关的demo演示。前两个概念比较简单，看一看就明白，我这里只是写图像视图以及 滚动视图的课程笔记。

 UIImageView用来显示图片。在下面的代码示例中，会有详细的步骤说明，有时候一些简单的应用，可以直接通过xcode设置，甚至不需要写代码。

这幅图向我们展示了scroll view的工作原理，首先我们把一个可能大过屏幕的显示区域视图(这里是imageView)作为scroll view的子视图加进来。然后指定scroll view的content size属性，这是告诉scroll view应该准备多大的空间来处理这个显示区域。正如下面的代码这样:

self.scrollView.contentSize = self.imageView.image.size;
self.imageView.frame = CGRectMake(0,0, self.imageView.image.size.width, self.imageView.image.size.height);
    

之所以指定imageView的frame属性，是因为我们希望图片能在imageView的坐标系里左上角对齐

这里讲如何创建scroll view, 最直接的方式还是直接在storyboard里拖进来。然后是如何为scrollview添加子视图，下面的示例不会用代码的形式，而是告诉你如何操作xcode来完成这个事情。

最后一张ppt向我们展示了如何设置缩放功能，代码很简单，下面的示例演示我们设置缩放比例甚至不用代码，直接在inspector里做了。另外一点就是代理，scroll view需要通过代理获取需要缩放的视图信息，所以我们会把当前的view controller作为代理并实现方法。代码如下:

self.scrollView.delegate = self;//设置代理
//通过这个代理方法告诉scroll view我们要缩放如个视图

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}

下面是代码演示部分，不过我不分析代码了，核心的前面都已经涉及到。这里只说明几个storyboard或xcode相关的操作。

还是新建一个single view的视图工程，然后拖进来一个imageView的控件。给image view选一个图片，如下所示，当然这个图片是事先已经加到工程里来的。

注意红色框里的mode, 这里我们用top left, 表示开始时显示图片的左上部分，因为图片很大，屏幕很小，我们只显示它的一部分，然后通过scrollview来查看其它部分。

如果选了其它mode,比如说scaleto fill, 图片会被压缩铺满屏幕，如下所示：

这种不是我们demo需要的效果，我们是希望图片还是它本身的大小，然后通过滚动条来查看。（也许一些启动界面的显示，用scaleto fill不错？！）

接着我们就要上scroll view了，选中imageview,在如下的菜单里操作，这样就嵌入了一个scroll view了。

注意这是把image view嵌入到scrollview里，不要搞反概念了。

为方便操作，需要给image view和scrollview绑定一个outlet, 方法以前的文章讲过。视图嵌进来之后，还要设置它的contentsize，这是告诉scroll view它要处理这个图片(或者其它)实际大小是多少，这样它才知道要分配多少空间，进度条应该有多少等信息。设置的代码前面已经说过了。

似乎一切就绪, 可以运行了，试一下发现不行，不能滚动，但是所有的步骤都和课程上是一样的，为什么？这就是ios6与ios5的区别，view controller 有个auto layout属性，就是它在起作用。把这个选项去掉，发现可以滚动了。

如果我想保持auto layout,怎么实现滚动呢？摸索了一下，发现加上四个约束就可以了，如下:

我猜想默认没有约束的情况下，imageview相对其父视图(scroll view)不变的，所以不能滚动。

最后我们实现缩放功能。要注意缩放是scrollview的功能属性，不是image view的，这个很容易产生误解。首先要设置缩放比例，很简单，如下图:

然后要设置代理，并实现代理中的一个方法,这个代码前面已经讲过。可以运行看看效果，在模拟器可以用alt键+鼠标模拟两点触摸。

代码下载地址

http://download.csdn.net/detail/pony_maggie/7600081

或

https://github.com/pony-maggie/Imaginarium