转载请注明出处
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