GeekBand.iOS-UIScrollView的使用

2016/4/12 posted in  iOS学习笔记  

在日常开发过程中,我们需要展示的东西很有可能比手机的屏幕长,或者比屏幕宽,在这个时候如何展示?以及在有些情况下,我们应该允许用户对照片等view进行缩放操作。这些又如何实现呢?答案就是使用本文的主角UIScrollView。

什么是ScrollView

能Scroll的View。即UIScrollView可以用于显示多于一个屏幕的内容,超出屏幕范围的内容可以通过滑动进行查看。效果如图所示:

UIScrollView的创建方式

  1. 在Interface Builder里面拖
  2. 使用代码创建:scrollView = [[UIScrollView alloc] initWithFrame:rect];

UIScrollView的尺寸

  1. ScrollView自身的size,也就是自身的Frame,这个和其它View一样。
  2. ScrollView有一个特殊的size属性,称之为contentSize,也是它的内容的大小,这个是必须指定的一个属性,否则ScrollView无法进行滑动等操作。指定contentSize的方式也有两种:
    1. 使用代码指定scrollView.contentSize = CGSizeMake(<#CGFloat width#>, <#CGFloat height#>);
    2. 使用AutoLayout,约束必须可以计算出contentSize的大小才可以正常的往其内部添加子View。可以参考Storyboard中的UIScrollView使用自动布局,使其能够滚动

UIScrollView的滚动

设置完成ScrollView之后,我们的ScrollView就可以进行滚动。与滚动有几个相关的属性或方法,介绍如下:

  1. BOOL scrollEnable是否可以滚动
  2. BOOL bounces是否显示回弹效果
  3. BOOL showsHorizontalScrollIndicator 是否显示垂直滚动条
  4. BOOL showsVerticalScrollIndicator 是否显示水平滚动条
  5. .contentOffset是一个CGPoint,表示偏移的点

监听滚动

监听滚动需要对应的监听对象实现UIScrollViewDelegate协议。
具体的监听方法如下:

// 只要 scrollView 滑动就会触发 ( 会触发多次 )
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;                                               

//只要 scrollView 缩放就会触发
- (void)scrollViewDidZoom:(UIScrollView *)scrollView 

// 当将要拖拽 scrollView 时触发 , 手指接触 scrollView 并且将要滑动时触发
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
// 当结束拖拽时触发 ( 手指将要离开屏幕 )
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset NS_AVAILABLE_IOS(5_0);

// 当结束拖拽时触发 ( 手指已经离开屏幕 )
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

//当 scrollView 滑动将要减速时触发 ( 将要停止 )
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;   
//当 scrollView 结束减速时触发 ( 停止滑动 )
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;    
//当设置 scrollView的setContentOffset, 有一个动画效果时触发
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView; 
//设置要缩放的 scrollView 上面的哪一个子视图 , 只能是子视图 , 不能是 scrollView 本身
- (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;     
//当将要开始缩放时触发
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2); 
//当结束缩放时触发
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale; 
//只有当 scrollsToTop 属性设置为 YES 时 , 该方法才会触发 , 进一步询问点击状态条是否有效
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;  
//当点击状态条并且 scrollView 滑动到顶端时触发
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;      

ScrollView缩放

除了要指定那个View具有缩放的效果,还需要指定两个属性,scrollView.minimumZoomScalescrollView.maximumZoomScale。直接Zoom是位图缩放而非重绘

ScrollView分页滚动

通过设置.pageEnable属性可以控制是否开启分页滚动,当开启后,scrollView不再显示滚动条,并整页切换显示内容。
页面来源:

  • 一个巨大的View,简单但是浪费资源
  • 每页一个View,通过Delegate实现View的复用

ScrollView和PageControl结合

这两个View结合起来可以实现图片轮播的效果,通过实现PageControl的delegate可以控制currentPage属性进行显示

无限轮播

为了保证轮播图像首尾相接,无限循环,有两个思路:
1. 在第一张图片前加最后一张图片,在最后一张图片后加第一张图片,在delegate中判断,如果到达这两个特殊位置,在程序中进行跳转。举例:

如果到达位置0,就跳到位置3。如果到达位置4,就跳到位置1。这样就实现了无限轮播。
2. 设置三个View,左中右。当滑动结束后,用目标位置的View替换中部的View,然后再跳回中部,更新左右两个View,缺点实现复杂,优点消耗资源少。