UIScrollView 的基本用法

本文介绍如何在iOS应用中实现UIScrollView的分页滚动效果。通过设置UIScrollView的关键属性,如contentSize和pagingEnabled,以及添加不同颜色的UIView,演示了UIScrollView如何承载多个视图并实现平滑翻页。

本文转自:隔叶黄莺 Unmi Blog


iPhone/iPad中UIScrollView还是经常要用到的,这里作了一个使用它最简单的例子,一个ScrollView中放了三个UIView。这三个 UIView分别设置了不同的背景色,它们在 ScrollView中可以一页一页的滚动。

这段代码放在 UIViewController的viewDidLoad方法中执行的,请注意每个Frame和ScrollView的关键属性,如contentSize。ScrollView中按页滚动时每次走动一个ScrollView的宽度(横向时)或高度(纵向时)。看下面两张图:

第一张图是用属性 contentOffset设置的第二个View为起努View,中间例如为向左滚动时,默认出现滚动条,第三张图为滚动到了红色面板,注意每个View间的缝隙,也是用来作为View周围边距的。

上面效果的代码如下,已加上了详细的注释:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
- ( void )viewDidLoad
{
[ super viewDidLoad];
//设定 ScrollView 的 Frame,逐页滚动时,如果横向滚动,按宽度为一个单位滚动,纵向时,按高度为一个单位滚动
UIScrollView *scrollView = [[ UIScrollView alloc] initWithFrame:CGRectMake(50, 0, 210, 100)];
scrollView.backgroundColor = [ UIColor grayColor]; // ScrollView 背景色,即 View 间的填充色
//向 ScrollView 中加入第一个 View,View 的宽度 200 加上两边的空隙 5 等于 ScrollView 的宽度
UIView *view1 = [[ UIView alloc] initWithFrame:CGRectMake(5,5,200,90)];
view1.backgroundColor = [ UIColor redColor];
[scrollView addSubview:view1];
//第二个 View,它的宽度加上两边的空隙 5 等于 ScrollView 的宽度,两个 View 间有 10 的间距
UIView *view2 = [[ UIView alloc] initWithFrame:CGRectMake(215,5,200,90)];
view2.backgroundColor = [ UIColor greenColor];
[scrollView addSubview:view2];
//第三个 View
UIView *view3 = [[ UIView alloc] initWithFrame:CGRectMake(425,5,200,90)];
view3.backgroundColor = [ UIColor blueColor];
[scrollView addSubview:view3];
[ self .view addSubview:scrollView];
//这个属性很重要,它可以决定是横向还是纵向滚动,一般来说也是其中的 View 的总宽度,和总的高度
//这里同时考虑到每个 View 间的空隙,所以宽度是 200x3+5+10+10+5=630
//高度上与 ScrollView 相同,只在横向扩展,所以只要在横向上滚动
scrollView.contentSize = CGSizeMake(630, 100);
//用它指定 ScrollView 中内容的当前位置,即相对于 ScrollView 的左上顶点的偏移
scrollView.contentOffset = CGPointMake(210, 0);
//按页滚动,总是一次一个宽度,或一个高度单位的滚动
scrollView.pagingEnabled = YES ;
}

不像UIView有相应的UIViewController,UIScrollView没有相对应的 UIScrollViewController,但UIScrollView也有事件,只是您需要自己来指定UIScrollView的Delegate才行,这个Delegate要应用协议UIScrollViewDelegate的方法。

关于ScrollView的一些属性可以在Xcode代码提示中看到,也可以在InterfaceBuilder中看到,以及每一个属性的默认取值是什么也一目发然,如下图为Xib中某个ScrollView的属性面板:

参考:1.UIScrollView 原理详解

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值