IOS开发之UIScrollView使用总结

忘是亡心i 2022-08-13 11:41 243阅读 0赞

UIScrollView为了显示多于一个屏幕的内容或者超过你能放在内存中的内容，UIScrollView的使用常用于图片的缩放，UIScrollView为你处理缩小放大手势，UIScrollView实现了这些手势，并且替你处理对于它们的探测和回应。其中需要注意的子类有UITableView以及UITextView。还有一个UIWebView，尽管那不是UIScrollView的直接子类，它适用UIScrollView去显示网页内容。UIScrollView拥有许多属性，以下是简单总结

UIScrollView的属性总结

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; border:1px solid silver; color:rgb(0,0,0); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; line-height:19px; background-color:rgb(245,245,245)"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 
    <div style="margin:0px; padding:0px"> 
     <table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; border:1px solid silver"> 
      <tbody style="margin:0px; padding:0px"> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">属性</span></td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <span style="margin:0px; padding:0px">作用</span></td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> CGPoint contentOffSet</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 监控目前<span style="margin:0px; padding:0px">滚动</span>的位置</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> CGSize contentSize</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 滚动范围的大小</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> UIEdgeInsets contentInset</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 视图在scrollView中的位置</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> id&lt;UIScrollerViewDelegate&gt;<br style="margin:0px; padding:0px"> delegate</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 设置协议</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL directionalLockEnabled</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 指定<span style="margin:0px; padding:0px">控件</span>是否只能在一个方向上滚动</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL bounces</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制控件遇到边框是否反弹</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL alwaysBounceVertical</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制垂直方向遇到边框是否反弹</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL alwaysBounceHorizontal</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制水平方向遇到边框是否反弹</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL pagingEnabled</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制控件是否整页翻动</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL scrollEnabled</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制控件是否能滚动</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL showsHorizontalScrollIndicator</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制是否显示水平方向的滚动条</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL<br style="margin:0px; padding:0px"> showsVerticalScrollIndicator</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制是否显示垂直方向的滚动条</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> UIEdgeInsets scrollIndicatorInsets</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 指定滚动条在scrollerView中的位置</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> UIScrollViewIndicatorStyle<br style="margin:0px; padding:0px"> indicatorStyle</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 设定滚动条的样式<br> <span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px; background-color:rgb(245,250,226)">UIScrollViewIndicatorStyleDefault默认样式<br> </span><span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px; background-color:rgb(245,250,226)">UIScrollViewIndicatorStyleBlack黑色样式<br> </span><span style="line-height:19px"><span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px; background-color:rgb(245,250,226)">UIScrollViewIndicatorStyleWhite</span>白色样式</span></td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> float decelerationRate</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 改变scrollerView的减速点位置</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL tracking</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 监控当前目标是否正在被跟踪</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL dragging</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 监控当前目标是否正在被<span style="margin:0px; padding:0px">拖拽</span></td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL decelerating</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 监控当前目标是否正在减速</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL delaysContentTouches</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制视图是否延时调用开始滚动的方法</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL canCancelContentTouches</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制控件是否接触取消touch的<span style="margin:0px; padding:0px">事件</span></td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> float minimumZoomScale</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 缩小的最小比例</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> float maximumZoomScale</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 放大的最大比例</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> float zoomScale</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 设置变化比例</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL bouncesZoom</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制缩放的时候是否会反弹</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL zooming</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 判断控件的大小是否正在改变</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL zoomBouncing</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 判断是否正在进行缩放反弹</td> 
       </tr> 
       <tr style="margin:0px; padding:0px"> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> BOOL scrollsToTop</td> 
        <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 控制控件滚动到<span style="margin:0px; padding:0px">顶部<br style="margin:0px; padding:0px"> <br style="margin:0px; padding:0px"> </span></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

属性contentsize的特比说明

contentsize 包含了width和height 分别表示滚动视图内容的宽度和高度，本质上content size 是一个CGSize，由核心图形所定义的架构，如果定义了滚动视图的宽度和高度，还可以给上下滚动添加额外的区域。有两种方法可以实现，第一种方法是你可以通过添加内容的大小来完成。另外一个比较动态的选择是UIScrollView的另一个属性contentInset，contentInset增加你在contentsize中指定的内容能够滚动的上下左右区域数量contentInset.top以及contentInset.buttom分别表示上面和下面的距离。

![0_13159190493C7P.gif][]

在滚轴视图中，有一个叫做ContentOffset的属性跟踪UIScrollView的具体位置，你能够自己获取和设置它，ContentOffset是你当前可视内容在滚轴视图边界的左上角那个点。如图：

![0_1315919183YoK2.gif][]

可以看出，ContentOffset内容中的那个点不是从contentInset的左上角开始的，而是内容的左上角，此时的ContentOffset是正值，但有时也是负值，如下图所示：

![0_1315919237S5S8.gif][]

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以下给出我自己写的实例：

ViewController.h

#import <UIKit/UIKit.h>
    
    @interface BIDViewController : UIViewController
    <UIScrollViewDelegate>
    {
        
    }
    @property(strong,nonatomic)UIImageView *imageview;
    
    @end

ViewController.m

#import "BIDViewController.h"
    
    @interface BIDViewController ()
    
    @end
    
    @implementation BIDViewController
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    	// Do any additional setup after loading the view, typically from a nib.
        
        UIImage *image = [UIImage imageNamed:@"tangwei.png"];
        self.imageview = [[UIImageView alloc]initWithImage:image];
        self.imageview.userInteractionEnabled = YES;
        //self.imageview.center = CGPointMake(200, 200);//控制图片的中心显示位置
        
        CGRect bounds = [[UIScreen mainScreen]applicationFrame];//创建滚动视图
        //CGRect bounds = CGRectMake(0, 0, 200, 200);
        UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:bounds];
        [scrollView addSubview:self.imageview];//将图片视图添加到scrollview
        scrollView.contentSize = self.imageview.frame.size;//给出内容的实际大小，这样滚动视图才知道滚动的范围

scrollView.maximumZoomScale = 4.0;//可以放大到比例

scrollView.minimumZoomScale = 0.25;//可以缩小到比例
      //  scrollView.showsHorizontalScrollIndicator = NO;//<span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; font-size: 14px; line-height: 25px;">滚动时是否显示水平滚动条</span>
      //  scrollView.showsVerticalScrollIndicator = NO;//<span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; font-size: 14px; line-height: 25px;">滚动时是否显示垂直滚动条</span>

scrollView.delegate = self;//将UIScrollViewDelegate委托给ViewController
        
        [self.view addSubview:scrollView];//将ScrollView添加到控制器视图上面去
        
    }
    
    - (void)didReceiveMemoryWarning
    {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    -(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
    {
        return self.imageview;//返回添加到ScrollView上面到视图
    }//<span style="font-family: Arial; font-size: 14px; line-height: 26px;">UIScrollViewDelegate必须实现到一个方法</span>
    @end

以上代码是以屏幕左上角为原点显示一张图片，并可以进行缩放。

可以将上面到属性添加到viewdidload函数中去测试效果。  
  
＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

关于分页效果

设置pagingEnabled=YES即可，UIScrollView会被分割成多个独立页面，用户的滚动体验则变成了页面翻转

一般会配合UIPageControl增强分页效果，UIPageControl常用属性：

NSInteger numberOfPages : 总页数

NSInteger currentPage : 当前的页码

BOOL hidesForSinglePage : 当只有一页的时候，是否要隐藏视图

监听UIPageControl的页面改变：

// 添加监听器

\[pageControl addTarget:self action:@selector(pageChange:)

forControlEvents:UIControlEventValueChanged\];

\- (void)pageChange:(UIPageControl \*)pageControl

关于分页效果，我没有测试，所以相关内容仅供参考

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上内容部分来自以下博客，非常感谢前辈总结的经验：

http://blog.csdn.net/ch\_soft/article/details/6947695

http://blog.csdn.net/iukey/article/details/7319314

http://www.cnblogs.com/woainilsr/archive/2012/03/28/2421881.html

http://jingyan.baidu.com/article/e75aca8551c31a142fdac67a.html

[0_13159190493C7P.gif]: /images/20220810/a53635266fef4f30b7d48589aee6e15a.png
[0_1315919183YoK2.gif]: /images/20220810/ac232fe6ef16449d8735ec60481b5ae9.png
[0_1315919237S5S8.gif]: /images/20220810/11a8124f81ac4d8fbaf4b9a77b8117d6.png