您的位置:首页 > 产品设计 > UI/UE

UIScrollView 介绍

2016-01-10 22:00 453 查看
一、UIScrollView 的基本概念
UIScrollView是iOS中的滑动控件,可以实现”滚动”和”缩放”,用来解决当前要显示的内容超出视图的范围时,可以通过滑动方式查看视图的所有内容的问题。

二、UIScrollView 的常见属性

1、、[b]contentSize[/b]
// default CGSizeZero
@property(nonatomic)
 CGSize  contentSize;

1.1
contentSize 的含义:

告诉 UIScrollView 要展示的内容实际有多大,也就是告诉UIScrollView滚动的范围。
1.2

如果UIScrollView无法滚动,可能是以下原因:

1)没有设置contentSize;

2)scrollEnabled = NO;

3)没有接收到触摸事件:userInteractionEnabled = NO。

1.3

UIScrollView的 frame.size 与  contentSize 的区别?

frame.size  指的是: UIScrollView 的可视区域的大小, UIScrollView本身的大小。

contentSize 指的是: UIScrollView 中所包含的子控件的大小(要滚动的实际内容的大小)。
如果需要滚动, contentSize 要比 frame.size 大。

2、、[b]contentOffset[/b]
// default CGPointZero
@property(nonatomic) 
CGPoint  contentOffset; 

2.1
contentOffset 的含义:
当UIScrollView内部的内容滚动时, 内容相对于UIScrollView左上角的偏移,也就是内容滚动到了什么位置。
2.2
可以通过代码来设置这个属性的值,来实现滚动。同时可以使用下面的这个方法增加动画效果的滚动。
// animate at constant velocity to new offset
- (void)setContentOffset:(CGPoint)contentOffset
animated:(BOOL)animated; 

3、、
[b]contentInset
[/b]
// default UIEdgeInsetsZero. add additional scroll area around content
@property(nonatomic)
UIEdgeInsets  contentInset;

3.1 
contentInset 的含义:
UIScrollView 的内容的内边距,即内容距离UIScrollView的内边距。
如下图所示,黄色区域为控制器的 view,蓝色区域为 UIScrollView,灰色区域是一张大图,滚动大图的左上角的地方,显示出距离为 20 的蓝色区域就是设置了内边距的效果。
self.scrollView.contentInset
=
UIEdgeInsetsMake(20, 20, 20, 20);

4、、总结
下面一张图总结 UIScrollView 的属性:

4、、其他常用属性
// 弹簧效果 default YES. if YES, bounces past edge of content and back again
@property(nonatomic)
BOOL  bounces;

// 是否能滚动 default YES. turn off any dragging temporarily

@property(nonatomic,getter=isScrollEnabled)
BOOL
scrollEnabled;
// 是否显示水平滚动条 default YES. show indicator while we are tracking. fades out after tracking
@property(nonatomic) BOOLshowsHorizontalScrollIndicator;
// 是否显示垂直滚动条 default YES. show indicator while we are tracking. fades out after tracking
@property(nonatomic)
BOOL
showsVerticalScrollIndicator;

三、UIScrollView 的代理

1、、代理可以干什么?
当 UIScrollView 进行滚动操作时,会自动通知它的代理(delegate)对象,给它的代理发送相应的消息,让代理得知它的滚动情况。通过代理我们可以获取当前滚动的位置:scrollView.contentOffset;也可以监听滚动事件。

2、、代理方法

// any offset changes

//
只要 scrollView 滑动就会触发 ( 会触发多次 )

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

// called on start of dragging (may require some time and or distance to move)

//
当将要拖拽 scrollView 时触发 , 手指接触 scrollView 并且将要滑动时触发

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

// called on finger up if the user dragged. velocity is in points/millisecond. targetContentOffset may be changed
to adjust where the scroll view comes to rest

//
当结束拖拽时触发 ( 手指将要离开屏幕 )

- (void)scrollViewWillEndDragging:(UIScrollView
*)scrollView withVelocity:(CGPoint)velocity
targetContentOffset:(inout
CGPoint
*)targetContentOffset
NS_AVAILABLE_IOS(5_0);

// called on finger up if the user dragged. decelerate is true if it will continue moving afterwards

//
当结束拖拽时触发 ( 手指已经离开屏幕 )

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

// called on finger up as we are moving

//
当 scrollView 滑动将要减速时触发 ( 将要停止 )

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

// called when scroll view grinds to a halt
 

//
当 scrollView 结束减速时触发 ( 停止滑动 )

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

// called when setContentOffset/scrollRectVisible:animated: finishes. not called if not animating

//
当设置 scrollView, 有动画效果时触发

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

// return a yes if you want to scroll to the top. if not defined, assumes YES

//
只有当 scrollsToTop 属性设置为 YES 时 , 该方法才会触发 , 进一步询问点击状态条是否有效

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

// called when scrolling animation finished. may be called immediately if already at
top

//
当点击状态条并且 scrollView 滑动到顶端时触发 

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

下面是跟缩放有关的代理方法:

// return a view that will be scaled. if delegate returns nil, nothing happens
// 

返回要缩放的view
, 只能是子视图 , 不能是 scrollView 本身

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

// called before the scroll view begins zooming its content
//
当将要开始缩放时触发
- (void)scrollViewWillBeginZooming:(UIScrollView
*)scrollView withView:(nullableUIView
*)view
NS_AVAILABLE_IOS(3_2); 
// scale between minimum and maximum. called after any 'bounce' animations
//
当结束缩放时触发

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

// any zoom scale changes
//
只要 scrollView 缩放就会触发

- (void)scrollViewDidZoom:(UIScrollView
*)scrollView
NS_AVAILABLE_IOS(3_2); 

3、、UIScrollView 的缩放
3.1 设置最大放大倍数和最小缩小倍数
self.scrollView.maximumZoomScale
= 3;
self.scrollView.minimumZoomScale
= 0.3;
3.2 UIScrollView 的缩放原理
当用户在UIScrollView身上使用捏合手势时,UIScrollView会调用代理的viewForZoomingInScrollView:方法,这个方法返回的控件就是需要进行缩放的控件。需要注意的是:UIScrollView
一次只能缩放一个子控件。

四、UIScrollView 实现无限循环图片轮播器

这里提供一个 HenryZ 写的一个可以一直向右无限循环的图片轮播器源码仅供参考。
源码地址:https://github.com/hongyuzhang/YUCyclePictures.git
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息