UIScrollerview详解，配合UIPageControl

最新推荐文章于 2024-11-12 11:00:33 发布

xiaoyangxavier

最新推荐文章于 2024-11-12 11:00:33 发布

阅读量583

点赞数

分类专栏： IOS 文章标签： ios uiscrollview

本文链接：https://blog.csdn.net/xiaoyangsavvy/article/details/44057621

版权

IOS 专栏收录该内容

98 篇文章 0 订阅

订阅专栏

移动的设备的屏幕大小有限，当一个视图要显示的内容大于屏幕尺寸的时候就要用到滚动视图，比如一个网页的内容通常比屏幕尺寸大，那么浏览器就使用了滚动视图。

UIScrollView有一个contentSize属性，声明如下：

@property(nonatomic)         CGSize                       contentSize;

这个属性表示滚动视图的内容有多大。

创建滚动视图实例：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIScrollView *sv = [[UIScrollView alloc] initWithFrame:self.view.frame];
    sv.contentSize = CGSizeMake(1000, 1000);
    sv.backgroundColor = [UIColor redColor];
    [self.view addSubview:sv];
}

效果图：

contentSize 属性为{1000,1000}，可以很明显的看到横向和纵向滚动条。

1. 滚动

视图的滚动也没什么好说的，主要是设置一些属性：

scrollEnabled 是否开启滚动

scrollsToTop 默认为YES，用户可以单击状态栏滚动至顶部

bounces 默认为YES，当滚动至边界时还可以进一步滚动，松开时迅速弹回至原位

directionalLockEnabled 如果为YES,仅可以同时在一个方向上滚动

decelerationRate 在轻弹屏幕后，滚动的速度逐渐衰减，较低的值衰减越快

showsHorizontalScrollIndicator、showsVerticalScrollIndicator 默认为YES，滚动时滚动指示条可见

indicatorStyle 滚动条的样式（UIScrollViewIndicatorStyleBlack,UIScrollViewIndicatorStyleDefaultUIScrollViewIndicatorStyleWhite）

contentInset 指定内容四周的余量（上左下右的顺序）

scrollIndicatorInsets 指定了滚动指示条在位置的切换

contentOffset 内容的定位点，当前显示内容的左上角

tracking 当 touch 后还没有拖动的时候值是YES，否则NO

zoomBouncing 当内容放大到最大或者最小的时候值是 YES，否则 NO

zooming 当正在缩放的时候值是 YES，否则 NO

decelerating 当滚动后，手指放开但是还在继续滚动中。这个时候是 YES，其它时候是 NO

decelerationRate 设置手指放开后的减速率

maximumZoomScale 一个浮点数，表示能放最大的倍数

minimumZoomScale 一个浮点数，表示能缩最小的倍数

pagingEnabled 当值是 YES 会自动滚动到 subview 的边界。默认是NO

scrollEnabled 决定是否可以滚动

delaysContentTouches 是个布尔值，当值是 YES 的时候，用户触碰开始，scroll view要延迟一会，看看是否用户有意图滚动。假如滚动了，那么捕捉 touch-down 事件，否则就不捕捉。假如值是NO，当用户触碰， scroll view 会立即触发 touchesShouldBegin:withEvent:inContentView:，默认是 YES

canCancelContentTouches 当值是 YES 的时候，用户触碰后，然后在一定时间内没有移动，scrollView 发送 tracking events，然后用户移动手指足够长度触发滚动事件，这个时候，scrollView 发送了 touchesCancelled:withEvent: 到 subview，然后 scroView 开始滚动。假如值是 NO，scrollView 发送 tracking events 后，就算用户移动手指，scrollView 也不会滚动。

contentSize 里面内容的大小，也就是可以滚动的大小，默认是0，没有滚动效果。

showsHorizontalScrollIndicator 滚动时是否显示水平滚动条

showsVerticalScrollIndicator 滚动时是否显示垂直滚动条

bounces 默认是 yes，就是滚动超过边界会反弹有反弹回来的效果。假如是 NO，那么滚动到达边界会立刻停止。

bouncesZoom 和 bounces 类似,区别在于：这个效果反映在缩放上面，假如缩放超过最大缩放，那么会反弹效果；假如是 NO，则到达最大或者最小的时候立即停止。

directionalLockEnabled 默认是 NO，可以在垂直和水平方向同时运动。当值是 YES 时，假如一开始是垂直或者是水平运动，那么接下来会锁定另外一个方向的滚动。假如一开始是对角方向滚动，则不会禁止某个方向

indicatorStyle 滚动条的样式，基本只是设置颜色。总共3个颜色：默认、黑、白

scrollIndicatorInsets 设置滚动条的位置

2. 分页

当内容大于屏幕时就可以分页，设置pagingEnabled属性为YES，滚动视图就不允许用户自由滑动，只能通过滑动至相邻的部分。

3. 缩放

使滚动视图可以缩放需要时设置minimumZoomScale和maximumZoomScale两个属性的值（默认为1），还需要在滚动视图的委托中实现viewForZoomingInScrollView:方法，该方法返回滚动视图中哪个子视图是可以缩放的，如果滚动视图有多个子视图，但是通常我们需要缩放整个滚动视图的内容，那么将多个视图放在一个视图即可，在将这个视图成为滚动视图的子视图。

滚动视图通过对捏合手势的响应进行缩放，如果缩放超出了我们设置的限制，当手势结束时，尺寸退回到我们设置的限制。如果想要严格的限制缩放不超过我们设置的限制，将bouncesZoom设置为NO就可以了。

在某种情况下，比如我们双击需要进行缩放的时候，就要用代码进行缩放，使用下面两个方法：

- (void)setZoomScale:(CGFloat)scale animated:(BOOL)animated NS_AVAILABLE_IOS(3_0);
- (void)zoomToRect:(CGRect)rect animated:(BOOL)animated NS_AVAILABLE_IOS(3_0);

setZoomScale：animated：根据比例缩放

zoomToRect：animated：给定矩形的大小进行缩放

1.代码示例：

 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController () <UIScrollViewDelegate>
 4 {
 5     UIScrollView *_scrollview;
 6     UIImageView *_imageview;
 7 }
 8 @end
 9 
10 @implementation YYViewController
11 
12 - (void)viewDidLoad
13 {
14     [super viewDidLoad];
15     
16     //1添加 UIScrollView
17     //设置 UIScrollView的位置与屏幕大小相同
18     _scrollview=[[UIScrollView alloc]initWithFrame:self.view.bounds];
19     [self.view addSubview:_scrollview];
20     
21     //2添加图片
22     //有两种方式
23     //(1)一般方式
24 //    UIImageView  *imageview=[[UIImageView alloc]init];
25 //    UIImage *image=[UIImage imageNamed:@"minion"];
26 //    imageview.image=image;
27 //    imageview.frame=CGRectMake(0, 0, image.size.width, image.size.height);
28     
29     //(2)使用构造方法
30     UIImage *image=[UIImage imageNamed:@"minion"];
31     _imageview=[[UIImageView alloc]initWithImage:image];
32     //调用initWithImage:方法，它创建出来的imageview的宽高和图片的宽高一样
33     [_scrollview addSubview:_imageview];
34     
35     //设置UIScrollView的滚动范围和图片的真实尺寸一致
36     _scrollview.contentSize=image.size;
37     
38     
39     //设置实现缩放
40     //设置代理scrollview的代理对象
41     _scrollview.delegate=self;
42     //设置最大伸缩比例
43     _scrollview.maximumZoomScale=2.0;
44     //设置最小伸缩比例
45     _scrollview.minimumZoomScale=0.5;
46      //canCancelContentTouches:YES-移动手指足够长度触发滚动事件,NO-scrollView发送 tracking events 后，就算用户移动手指，scrollView也不会滚动。
   scrollview.canCancelContentTouches=NO;
    
    //当值是 YES的时候，用户触碰开始.要延迟一会，看看是否用户有意图滚动。假如滚动了，那么捕捉 touch-down事件，否则就不捕捉。假如值是NO，当用户触碰， scroll view会立即触发
   scrollview.delaysContentTouches=YES;
47 }
48 
49 //告诉scrollview要缩放的是哪个子控件
50 -(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
51 {
52     return _imageview;
53 }
54 
55 @end

4. 委托

UIScrollViewDelegate可以接收大量消息开帮助你跟踪滚动视图的工作

下面是协议的定义

#pragma mark UIScrollViewDelegate

//只要滚动了就会触发

- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

{

// NSLog(@" scrollViewDidScroll");

NSLog(@"ContentOffset x is %f,yis %f",scrollView.contentOffset.x,scrollView.contentOffset.y);

}

//开始拖拽视图

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewWillBeginDragging");

}

//完成拖拽

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

{

NSLog(@"scrollViewDidEndDragging");

}

//将开始降速时

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewWillBeginDecelerating");

}

//减速停止了时执行，手触摸时执行执行

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewDidEndDecelerating");

}

//滚动动画停止时执行,代码改变时出发,也就是setContentOffset改变时

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewDidEndScrollingAnimation");

}

//设置放大缩小的视图，要是uiscrollview的subview

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

{

NSLog(@"viewForZoomingInScrollView");

return viewA;

}

//完成放大缩小时调用

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale;

{

viewA.frame=CGRectMake(50,0,100,400);

NSLog(@"scale between minimum and maximum. called after any 'bounce' animations");

}// scale between minimum and maximum. called after any 'bounce' animations

//如果你不是完全滚动到滚轴视图的顶部，你可以轻点状态栏，那个可视的滚轴视图会一直滚动到顶部，那是默认行为，你可以通过该方法返回NO来关闭它

- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewShouldScrollToTop");

returnYES;

}

- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;

{

NSLog(@"scrollViewDidScrollToTop");

}

//初始化 UIPageControl 和 _scrollView 显示在同一个页面中

UIPageControl *pageConteol = [[UIPageControl alloc] initWithFrame:CGRectMake(140, self.view.frame.size.height - 60, 50, 40)];

pageConteol.numberOfPages = 4;//设置pageConteol 的page 和 _scrollView 上的图片一样多

pageConteol.tag = 201;

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

// 记录scrollView 的当前位置，因为已经设置了分页效果，所以：位置/屏幕大小 = 第几页

int current = scrollView.contentOffset.x/[UIScreen mainScreen].bounds.size.width;

//根据scrollView 的位置对page 的当前页赋值

UIPageControl *page = (UIPageControl *)[self.view viewWithTag:201];

page.currentPage = current;

//当显示到最后一页时，让滑动图消失

if (page.currentPage == 3) {

//调用方法，使滑动图消失

[self scrollViewDisappear];

}

xiaoyangxavier

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录