深入理解IOS中的UIScrollView（附测试代码）

本文主要是介绍深入理解IOS中的UIScrollView（附测试代码），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先了解一下UIKit中的坐标系是怎么工作的。如果你只对滚动试图的代码实现感兴趣可以放心跳过下一小节。UIKit坐标系每一个View都定义了他自己的坐标系统。如下图所示，x轴指向右方，y轴指向下方：

注意这个逻辑坐标系并不关注包含在其中View的宽度和高度。整个坐标系没有边界向四周无限延伸.我们在坐标系中放置四个子View。每一次色块代表一个View：

添加View的代码实现如下：

1. UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 100, 100)]; 
2. redView.backgroundColor = [UIColor colorWithRed:0.815 green:0.007 
3.     blue:0.105 alpha:1]; 
4.   
5. UIView *greenView = [[UIView alloc] initWithFrame:CGRectMake(150, 160, 150, 200)]; 
6. greenView.backgroundColor = [UIColor colorWithRed:0.494 green:0.827 
7.     blue:0.129 alpha:1]; 
8.   
9. UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(40, 400, 200, 150)]; 
10. blueView.backgroundColor = [UIColor colorWithRed:0.29 green:0.564 
11.     blue:0.886 alpha:1]; 
12.   
13. UIView *yellowView = [[UIView alloc] initWithFrame:CGRectMake(100, 600, 180, 150)]; 
14. yellowView.backgroundColor = [UIColor colorWithRed:0.972 green:0.905 
15.     blue:0.109 alpha:1]; 
16.   
17. [mainView addSubview:redView]; 
18. [mainView addSubview:greenView]; 
19. [mainView addSubview:blueView]; 
20. [mainView addSubview:yellowView]; 

bounds

Apple关于UIView的文档中是这样描述bounds属性的：

bounds矩形…描述了该视图在其自身坐标系中的位置和大小。

一个View可以被看作是定义在其所在坐标系平面上的一扇窗户或者说是一个矩形的可视区域。View的边界表明了这个矩形可视区域的位置和大小。

假设我们的View宽320像素，高480像素，原点在（0，0）。那么这个View就变成了整个坐标系平面的观察口，它展示的只是整个平面的一小部分。位于该View边界外的区域依然存在，只是被隐藏起来了。

一个View提供了其所在平面的一个观察口。View的bounds矩形描述了这个可是区域的位置和大小。

Frame

接下来我们来试着修改bounds的原点坐标：

1. CGRect bounds = mainView.bounds; 
2. bounds.origin = CGPointMake(0, 100); 
3. mainView.bounds = bounds; 

当我们把bound原点设为（0，100）后，整个画面看起来就像这样：

修改bounds的原点就相当与在平面上移动这个可视区域。

看起来好像是这个View向下移动了100像素，在这个View自己的坐标系中这确实没错。不过这个View真正位于屏幕上的位置（更准确的说在其父View上的位置）其实没有改变，因为这是由View的frame属性决定的，它并没有改变：

frame矩形…定义了这个View在其父View坐标系中的位置和大小。

由于View的位置是相对固定的，你可以把整个坐标平面想象成我们可以上下拖动的透明幕布，把这个View想象成我们观察坐标平面的窗口。调整View的Bounds属性就相当于拖动这个幕布，那么下方的内容就能在我们View中被观察到：

Since the view’s position is fixed (from its own perspective), think of the coordinate system plane as a piece of transparent film we can drag around, and of the view as a fixed window we are looking through. Adjusting thebounds’s origin is equivalent to moving the transparent film such that another part of it becomes visible through the view:

修改bounds的原点坐标也相当于把整个坐标系向上拖动，因为View的frame没由变过，所以它相对于父View的位置没有变化过。

其实这就是UIScrollView滑动时所发生的事情。注意从一个用户的角度来看，他以为时这个View中的子View在移动，其实他们的在坐标系中位置（他们的frame）没有发生过变化。

UIScrollView的滑动纵轴范围为(-contentInset.top, contentSize.height+contentInset.bottom)，水平方向范围也类似。

• 常见属性
  CGSize contentSize ：设置UIScrollView的滚动范围
  CGPoint contentOffset ：UIScrollView当前滚动的位置
  UIEdgeInsets contentInset ：这个属性可以在四周增加滚动范围
  
  
• 其他属性
• BOOL bounces 是否有弹簧效果
• BOOL scrollEnabled 是否能滚动
  BOOL showsHorizontalScrollIndicator 是否显示水平方向的滚动条
  BOOL showsVerticalScrollIndicator     是否显示垂直方向的滚动条
  UIScrollViewIndicatorStyle indicatorStyle  设定滚动条的样式
  BOOL dragging 是否正在被拖拽
  BOOL tracking  当touch后还没有拖动的时候值是YES，否则NO
  BOOL decelerating 是否正在减速
  BOOL zooming 是否正在缩放
  
• 3
  手势缩放
  设置UIScrollView的id<UISCrollViewDelegate> delegate代理对象
  设置minimumZoomScale ：缩小的最小比例
  设置maximumZoomScale ：放大的最大比例
  让代理对象实现下面的方法，返回需要缩放的视图控件
  - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
  跟缩放相关的常用方法还有
  正在缩放的时候调用
  -(void)scrollViewDidZoom:(UIScrollView *)scrollView
  缩放完毕的时候调用
  -(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
  
  
• 
  
  
  
• 4
  分页效果
  设置pagingEnabled=YES即可，UIScrollView会被分割成多个独立页面，用户的滚动体验则变成了页面翻转
  一般会配合UIPageControl增强分页效果，UIPageControl常用属性：
  NSInteger numberOfPages : 总页数
  NSInteger currentPage : 当前的页码
  BOOL hidesForSinglePage : 当只有一页的时候，是否要隐藏视图
  监听UIPageControl的页面改变：
  // 添加监听器
  [pageControl addTarget:self action:@selector(pageChange:) 
  forControlEvents:UIControlEventValueChanged];
  // 监听方法
  - (void)pageChange:(UIPageControl *)pageControl 
  {  
  }
  
• 5
  

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");

    returnviewA;

}

//完成放大缩小时调用

- (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");

}

测试应用代码，UIScrollView大小为280*280，在屏幕中居中显示，里面含有等比例缩放后大小为280*373的图片，该图片可以上下滚动，同时也可以响应旋转，放大缩小手势。

源代码见路径：https://github.com/realyezi/TestCode/tree/master/HelloWorld2

这篇关于深入理解IOS中的UIScrollView（附测试代码）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---