029-UIScrollView-iOS笔记

学习目标

1.【理解】UIScrollView实现大图滚动

2.【理解】UIScrollView实现电台界面

3.【理解】UIScrollView的代理

4.【理解】常用属性、方法整理

5.【理解】UIScrollView实现缩放功能

6.【理解】无限循环的图片浏览器(转载内容)

一、UIScrollView实现大图滚动

移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限。当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容,普通的UIView不具备滚动功能,不能显示过多的内容。

UIScrollView是一个能够滚动的视图控件,可以用来展示大量的内容(要显示的内容超过屏幕大小的时候),并且可以通过滚动查看所有的内容。

创建项目,拖拽一个UIScrollView控件拉满整个屏幕,然后再拖拽一个子控件UIImageView到这个控件上并设置图片和图片原始尺寸,这样我们只能通过屏幕看到一部分的图片内容。

029-UIScrollView-iOS笔记

将两个控件进行属性连线,并为UIScrollView设置必要属性,就可以实现大图滚动效果了。

ViewController.m文件

最终实现效果

029-UIScrollView-iOS笔记

值得注意的是需要展示的内容必须添加到UIScrollView中(是他的子控件),而且必须为UIScrollView的contentSize属性设置一个超过UIScrollView本身尺寸的尺寸,才能实现滚动效果。

二、UIScrollView实现电台界面

029-UIScrollView-iOS笔记

UIScrollView必须熟悉的三个属性

根据这三个属性,来实现一个简单的电台界面,首先创建项目,拖拽UIScrollView拉满屏幕,并添加一堆子控件最终让子控件超出UIScrollView范围。

029-UIScrollView-iOS笔记

设置好子控件的图片,并进行属性连线操作,主要UIImageView就连最底部一个就行。

029-UIScrollView-iOS笔记

拖拽两个UIViewUIScrollView同级,分别放置到顶部和底部,设置高度和透明度。为了效果明显,给UIView设置背景色。

029-UIScrollView-iOS笔记

ViewController.m文件

最终实现效果

029-UIScrollView-iOS笔记

三、UIScrollView的代理

在UIScrollView正在滚动或滚动到某个位置或者停止滚动时做一些特定的操作,需要为UIScrollView设置一个代理对象,监听UIScrollView的整个滚动过程。当UIScrollView发生一系列的滚动操作时, 会自动通知它的代理(delegate)对象,给它的代理发送相应的消息,让代理得知它的滚动情况,并做一些操作。

029-UIScrollView-iOS笔记

实现监听UIScrollView的步骤

1.遵守代理协议<UIScrollViewDelegate>

2.实现代理方法

3.为UIScrollView设置代理对象

以第一个案例为例,监听UIScrollView的各种状态

拖动一次滚动效果如下

029-UIScrollView-iOS笔记

四、常用属性、方法整理

常用属性

常用方法

常用代理方法

五、UIScrollView实现缩放功能

UIScrollView不仅能滚动显示大量内容,还能对其内容进行缩放处理。也就是说,要完成缩放功能的话,只需要将需要缩放的内容添加到UIScrollView中。还是以第一个案例为例来演示实现图片的缩放。

029-UIScrollView-iOS笔记

 实现缩放的基本步骤

1.遵守代理协议<UIScrollViewDelegate>。

2.实现代理方法,返回需要被缩放的控件。

3.设置缩放的最小、最大比例。

4.为UIScrollView设置代理对象。

缩放过程中调用的代理方法

实现代码

效果如下图

029-UIScrollView-iOS笔记

 

六、无限循环的图片浏览器(转载内容)

如何无限循环?

我们知道在UIScrollView中如果放置其他控件后,只要设置contentSize之后这些图片就可以滚动。如果要让图片无限循环那么只有两种办法,一种是无限循环叠加图片,另一种就是如果最后一张图片浏览完立即显示第一张图片。很明显第一种方法是不现实的,我们考虑使用第二种方式。其实使用第二种方式实现原理比较简单,只要在图片前后各放一张图片即可(此时共有n+2个图片在UIScrollView中)。例如我们有5张图片,只要使用7个UIImageView依次存放:图片5,图片1,图片2,图片3,图片4,图片5,图片1。当从图片1滚动到图片5时由于最后一张是图片1就给用户一种无限循环的感觉,当这张图完全显示后我们迅速将UIScrollView的contentOffset设置到第二个UIImageView,也就是图片1,接着用户可以继续向后滚动。当然向前滚动原理完全一样,当滚动到第一张图片(图片5)就迅速设置UIScrollView的contentOffset显示第6张图(图片5)。为了方便说明请看下面的示意图(注意示意图由于宽度有限只描述了3张图片显示的情景):

029-UIScrollView-iOS笔记

如何优化性能?

无限循环实现了,但是我们知道如果图片过多这些图片势必全部加载到内存,这是我们不愿意看到的,此时我们需要优化上面的方案。其实从上面的方案我们也可以看出端倪,我们完全没必要创建n+2个UIImageView,其实3个已经足够(事实上也可以用两个实现,大家不妨自己思考一下),只要一直保持显示中间的UIImageView,滚动时动态更改三个UIImageView的图片即可。例如三个UIImageView默认放图片5、图片1、图片2,当前显示中间的UIImageView,也就是图片1,。如果向后滚动那么就会显示图片2,当图片2显示完整后迅速重新设置三个UIImageView的内容为图片1、图片2、图片3,然后通过contentOffset设置显示中间的UIImageView,也就是图片2。继续向后看到图片3,当图片3滚动完成迅速重新设置3个UIImageView的内容为图片2、图片3、图片4,然后设置contentOffset显示中间的UIImageView,也就是图片3。当然,向前滚动原理完全一样,如此就给用户一种循环错觉,而且不占用过多内存。

下面给出具体的实现,在这个程序中除了UIscrollView我们还可以看到UIPageControl的使用,实现并不复杂。首先我们需要将图片信息存储到plist文件中(日后方便扩展),并且设置plist的key表示图片的名称,value代表对应的图片描述,这个描述我们需要展示在界面上方。具体内容如下:

imageInfo.plist

在程序中我们需要读取plist文件并加载对应的图片,这里我们将图片按顺序依次命名:0.jpg、1.jpg…8.jpg。我们的程序主要集中于自定义的KCMainViewController.m中,在这里我们声明1个UIScrollView和3个UIImageView用于显示图片,同时声明一个UILable显示图片描述信息,声明一个UIPageControl来显示当前图片页数,具体代码如下:

KCMainViewController.m

在上面的代码中需要提醒大家的是一定要谨慎在滚动时进行相关操作,前面我们说过滚动事件会循环执行十分消耗性能,因此如果能不在其中操作的话尽可能不要在这个方法中进行相关操作,例如在上面的代码中我们的核心逻辑主要集中在滚动停止事件中,这个事件在一次滚动操作中只需要执行一次。

运行效果

029-UIScrollView-iOS笔记

六阿哥

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: