iOS开发学习笔记-UIScrollView的用法

转载地址:http://www.jianshu.com/p/bcaf5cdfaa7e#

UIScrollView是用来在屏幕上显示那些在有限区域内放不下的内容。例如,在手机屏幕上显示内容丰富的网页或者很大的图片。在这种情况下,需要用户对屏幕内容进行拖动或缩放来查看屏幕或窗口区域外的内容。

所以,ScrollView应该首先有一个窗口,用来显示内容,其次,还要有内容本身。这里的这个显示窗口就是UIScrollView,这个窗口 可以是整个手机屏幕,也可以只是手机屏幕的一部分区域(屏幕其他部分可以显示些别的东西)。内容则是你需要查看的图片或者网页等信息视图。通常,其大小会 超过这个屏幕,正因为如此,我们才要使用UIScrollView来查看。

使用方法

建立scrollView

先来看如何使用UIScrollView在小窗口中显示一副大图。

UIScrollView-001.jpg

假定ViewConroller已经设置了属性@property UIScrollView * scrollView;

- (void)viewDidLoad{
[super viewDidLoad];
//1. 建立UIScrollView窗口,我们只打算用手机的上半屏显示图像,(这一步也可以在storyboard里完成)
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320 , 300)];
//2.建立内容视图
UIImageView * view = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tesla.jpg"]];
//3.将内容视图作为scrollView的子视图
[self.scrollView addSubview: view];
//4.当然了,还得把scrollView添加到视图结构中
[self.view addSubview: self.scrollView];
}

运行一下看看,发现窗口正常显示了图片的左上角。但是根本拖不动,看不了图片的其他部分。这是怎么回事呢?因为我们没有为scrollView设置要显示的内容大小。而scrollView的contenSize大小默认是0。

内容展示:contentSize contentOffset contentInset

contentSize描述了有多大范围的内容需要使用scrollView的窗口来显示,其默认值为CGSizeZero,也就是一个宽和高都是0的范围。

当contentSize小于当前scrollView的大小时,意味着用户要显示的内容在窗口范围内是可以全部显示的,这个时候,通常内 容视图是拖不动的(有内容没有显示出来才要拖嘛,都显示得出来)。之所以说是“通常”,是因为通过某些设置,还是可以拖得动的,后边回弹机制里会解释。所 以要让视图可以拖动,我们得设置一个contentSize。在前面这个简单的这个例子里,我们当然就设置成imageView的大小就好了啊。所以在第 2步之后添加一句:

self.scrollView.contentSize = view.bounds.size;

这样,就可以显示图片的全部内容。
但是如果你只想在窗口显示图片的的一部分,也是可以的,就把contentSize设置得小一点就好了。除了contentSize,还有contentOffsetcontentInset也可以结合起来使用。需要注意的是,contentSize的范围是以scrollView的位置为基准的。所以,如果内容视图的frame.origin不是(0,0),则需要仔细计算内容视图能被显示的范围。

  • contentOffset: 描述了内容视图相对于scrollView窗口的位置(当然是向上向左的偏移量咯)。默认值是CGPointZero,也就是(0,0)。当视图被拖动时,系统会不断修改该值。也可以通过setContentOffset:animated:方法让图片到达某个指定的位置。

  • scrollRectToVisible:animated:setContentOffset:animated:类似,只不过是将scrollView坐标系内的一块指定区域移到scrollView的窗口中,如果这部分已经存在于窗口中,则什么也不做。

  • contentInset: 表示scrollView的内边距,也就是内容视图边缘和scrollView的边缘的留空距离,默认值是UIEdgeInsetsZero,也就是没间距。这个属性用的不多,通常在需要刷新内容时才用得到。

好了,图片现在可以拖动了。为了更清楚的进行描述,我们换一张图片。大小为550*350的网格。

我们发现,当将图片拖到边缘的时候,图片还是可以继续被拖动的,会显示contenSize之外的内容。

  • 如果contentSize设置为图片的大小,拖动到边缘后仍然可以继续拖动,视图显示出一定的弹性,显示出空白,一旦松手,内容视图会回弹,空白不会显示在scrollView窗口中。
  • 如果contentSize设置得比图片的大小还小,拖动到contentSize指定的大小后仍然可以继续拖动,显示内容视图的更多部分,但一旦松手,内容视图也会回弹,超过contentSize的那部分不会显示在scrollView窗口中。
  • 如果contentSize设置得比图片的大小更大,拖动到图片的边缘后仍然可以继续拖动,显示空白,直到超过contentSize的范围,才
    会产生弹性,松手后,视图回弹,静止状态下我们可以看到scrollView可以显示出contentSize范围内图片范围外的空白。

也就是说scrollView窗口在手指释放的时候后的静止状态下,只会显示contentSize范围内的内容。

UIScrollView-002.jpg

scrollView的这种回弹机制,是可以设置的,相关的属性为:bouncesalwaysBounceHorizontalalwaysBounceVerticaldecelerationRate

在拖动的过程中,我们还发现水平方向和垂直方向还显示出状态条,状态条的显示也是可以设置的。相关属性为:indicatorStyle showsHorizontalScrollIndicator showsVerticalScrollIndicator scrollIndicatorInsets flashScrollIndicators

UIScrollView-003.jpg

回弹机制:bounces alwaysBounceHorizontal alwaysBounceVertical

  • bounces:描述的当scrollview的显示超过内容区域的边缘以及返回时,是否有弹性,默认值为YES。值为YES
    的时候,意味着到达contentSize所描绘的的边界的时候,拖动会产生弹性。值为No的时候,拖动到达边界时,会立即停止。所以,如果在上面的例子
    当中,将bounces设置为NO时,窗口中是不会显示contentSize范围外的内容的。
  • alwaysBounceHorizontal:默认值为NO,如果该值设为YES,并且bounces也设置为YES,那么,即使设置的contentSize比scrollView的size小,那么也是可以拖动的。
  • alwaysBounceVertical:默认值为NO,如果该值设为YES,并且bounces也设置为YES,那么,即使设置的contentSize比scrollView的size小,那么也是可以拖动的。

状态条显示indicatorStyle showsHorizontalScrollIndicator showsVerticalScrollIndicator scrollIndicatorInsets flashScrollIndicators

根据我们的实际需要,我们可以对状态条进行各种设置。

  • indicatorStyle:
    状态条的风格,默认值为UIScrollViewIndicatorStyleDefault。除此之外,还有
    UIScrollViewIndicatorStyleBlack,
    UIScrollViewIndicatorStyleWhite两种其他风格。可以用来和环境配色。
  • showsHorizontalScrollIndicator : 当处于跟踪状态(tracking)时是否显示水平状态条,默认值为YES。下一节说明什么是跟踪状态。
  • showsVerticalScrollIndicator : 当处于跟踪状态(tracking)时是否显示垂直状态条,默认值为YES。
  • scrollIndicatorInsets : 状态条和scrollView边距的距离(暂时还没想明白为什么要有这个)。
  • flashScrollIndicators: 短暂的显示一下状态条,当你将scrollView调整到最上面时,需要调用一下该方法。

状态跟踪

之前提到过跟踪状态(tracking)。相关的属性有三个:tracking dragging decelerate,这三个属性表明了当前视图的滚动状态。

  • tracking: 只读,一旦用户开始触摸视图(也许还没有开始拖动),该属性值为YES
  • dragging: 只读,当用户开始拖动(手指已经在屏幕上滑动一段距离了),该属性值为YES
  • decelerate: 只读,当用户松开手指,但视图仍在滚动时,该值返回YES
  • zooming: 只读,用户是否正在进行缩放手势。
  • zoomBouncing:只读,当缩放超过最大或者最小范围的时候,回弹到最大最小范围的过程中,该值返回YES。

缩放

上一节我们看到了zooming属性,scrollView除了支持拖动之外,还支持缩放。

  • maximumZoomScale: 最大放大比例,默认值为1,不得小于minimumZoomScale
  • minimumZoomScale: 最小放大比例,默认值为1,不得大于maxmumZoomScale
  • bouncesZoom: 描述在缩放超过缩放比例时,是否bounce,默认值为YES。如果值为NO,则达到最大或最小缩放比例时会立即停止缩放。否则,产生弹簧效果。
  • zoomScale: 当前的缩放比例。系统会根据缩放过程调整此值。
  • setZoomScale:animated:: 程序设置缩放大小。
  • zoomToRect:animated: 将内容视图缩放到指定的Rect中。
  • panGestureRecognizer
  • pinchGestureRecognizer

其他设置

  • delegate: scrollView的委托对象,该委托对象必须实现UIScrollViewDelegate协议,这些方法会在合适的时候被调用。
  • scrollEnabled:视图是否可被拖动,默认值为YES。一旦该值设置为NO,则scrollView不再接受触屏事件,会直接传递响应链。
  • scrollToTop:是否启动“滚动至顶端”手势,默认值为YES。当用户使用了“滚动至顶端”手势(轻击状态栏)时,系统会要求离状态栏最近的scrollView滚动到顶端,如果scrollToTop设置为NO,则该scrollView的delegate的scrollViewShouldScrollToTop:
    法会返回NO,不会滚动到顶端。否则,则会滚动到顶端。滚动到顶端之后,会给delegate发送scrollViewDidScrollToTop:消
    息。需要注意的是,在iphone上,如果有多个scrollview的scrollToTop参数设置为YES的时候,“滚动至顶端”手势会失效。
  • delaysContentTouches:是否推迟触屏手势处理,默认值为YES。设置为YES的时候,系统在确定是否发生scroll事件之后,才会处理触屏手势,否则,则会立即调用touchesShouldBegin:withEvent:inContentView:方法。
  • directionalLockEnabled:是否锁定某个特定方向的滚动,默认值为NO。设置为YES时,一旦用户向水平或竖直方向拽动时,另一个方向的滚动则被锁定了。但是如果首次拽动是斜着的,那么则不会锁定方向。
  • keyboardDismissMode: 当拖动发生时,键盘的消失模式,默认值是不消失。
  • pagingEnabled:是否使用分页机制,默认值为NO。当设置为YES时,会按照scrollView的宽度对内容视图进行分页。
  • decelerationRate: 手指滑动后抬起,页面的减速速率。可以使用UIScrollViewDecelerationRateNormalUIScrollViewDecelerationRateFast常量值来设置合理的减速速率。

特殊的ScrollView

除了这些基本的ScrollView,我们常常使用的新闻客户端或者待办事项软件,都会有列表视图,也就是UITableView,也是一种
ScrollView,它继承了UIScrollView的特性,又有自己的独特性。除了列表视图,还有瀑布流视图UICollectionView,也
类似,未来再详细剖析。

 
 

UIScrollView的用法,属性的更多相关文章

  1. UIScrollView的常用属性

    UIScrollView的常用属性

  2. 学习笔记之-------UIScrollView 基本用法 代理使用

    //contentSize.contentInset和contentOffset 是 scrollView三个基本的属性. // 滚动 self.ScrollView.contentSize =sel ...

  3. UIScrollView的常见属性

    @property(nonatomic) CGPoint contentOffset; 这个属性用来表示UIScrollView滚动的位置 (其实就是内容左上角与scrollView左上角的间距值) ...

  4. UIScrollView的相关属性说明

    _scrollView = [[UIScrollView alloc] init]; //height = 0:禁止垂直方向滚动 _scrollView.contentSize = CGSizeMak ...

  5. UIScrollView常见属性

    什么是UIScrollView •设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限 • •当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容 • •普通的UIV ...

  6. ios开发UI篇—UIScrollView属性及其代理方法

    一.UIScrollView是什么? 1.UIScrollView是滚动的view,UIView本身不能滚动,子类UIScrollview拓展了滚动方面的功能. 2.UIScrollView是所有滚动 ...

  7. iOS边练边学--UIScrollView的属性简单使用,代理的简单介绍以及内容缩放

    一.什么是UIScrollView *移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也是相当有限 *当展示的内容较多,超出一个屏幕时,用户可通过滚动收拾来查看屏幕以外的内容 *普通的UI ...

  8. Objective-C的属性和成员变量用法及关系浅析

    在使用Objective-C语言进行了一段时间的iOS开发之后,发现自己的语言基础相对薄弱,于是开始弥补自己的短处.我发现在用过一种语言之后,再回过头来看它的很多原理会发现有更加深刻的理解.下面就对一 ...

  9. UIScrollView控件及其三个常用属性:contentSize、contentInset和contentOffset

    如果您对UIScrollView控件感到难以理解,下面是本人自己对UIScrollView控件的理解方式,按照我的思路,理解UIScrollView控件非常容易! 我对UIScrollView的构成理 ...

随机推荐

  1. C的面向对象编程

    C语言并不支持类这样的概念,但是C仍旧可以使用面向对象的概念. C++中的类,关键在于它的虚函数表.因此,我们要模拟一个能够支持虚函数表的类. 使用C的struct结构,可以模拟类和虚函数. 比如,我 ...

  2. Required field 'client_protocol' is unset! Struct:TOpenSessionReq(client_protocol:null, configuration:{use:database=default}) (state=08S01,code=0)

    sparksql 2.和hive2.1.1 由于sparksql中的hive-cli 等包的版本是1.2的需要自己下载,下载替换之后不报错,替换之前做好备份

  3. Linux 下 ps 命令

    简述 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,动态的显示进程信息 ...

  4. 【UE4】如何获取/下载虚幻4(Unreal Engine4)源码

    在官网中点击[获取虚幻引擎]可以看到,虚幻4完整源代码已经放在Github上,所以与其用百度搜别人的资源,当然是直接上Github下啊. 主要步骤如下: 注册一个Github帐号,这个没啥值得说的. ...

  5. C语言 · 淘淘的名单

    算法提高 淘淘的名单   时间限制:100ms   内存限制:8.0MB      问题描述 by ZBY... :) 淘淘拿到了一份名单,他想对上面的名字进行处理,挑出一些特殊的名字,他请你来帮忙. ...

  6. 一站式学习Wireshark(六):狙击网络高延时点

    在某些情况下,丢包可能并不是造成延时的原因.你可能会发现尽管两台主机之间通讯速度很慢,但这种慢速并没有伴随着TCP重传或是重复ACK的征兆.在这种情况下,需要使用另一种方式来定位高延时点. 查找高延时 ...

  7. oracle数据库表空间的创建与使用

     以下操作请使用sys系统账号操作! 1. 查询物理存储的位置 SELECT tablespace_name, file_id, file_name, round(bytes / (1024 * 10 ...

  8. [Django学习]Ajax访问静态页面

    Web开发中常用的一种开发方式是:通过Ajax进行系统的交互,采用Ajax进行交互的时候,更多的时候传输的是JSON格式的数据. 所以开发中我们需要将数据格式转化成JSON,请参见:https://w ...

  9. Log4j,Log4j2,logback,slf4j日志学习

    日志学习笔记 Log4j Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.数据库等:我们也可以控制每一条日志的输出格式:通过定义每一条 ...

  10. 【转】ImageView的Scaletype参数设置

    ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分,等等. 设置的方式包括: 1. 在layout xml中定义Android:s ...