前言

	NS_CLASS_AVAILABLE_IOS(2_0) @interface UIScrollView : UIView <NSCoding>
@available(iOS 2.0, *) public class UIScrollView : UIView, NSCoding
  • 移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限。当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容。普通的 UIView 不具备滚动功能,不适合显示过多的内容,UIScrollView 是一个能够滚动的视图控件,可以用来展示大量的内容,并且可以通过滚动查看所有的内容。

  • UIScrollView 的用法很简单,将需要展示的内容添加到 UIScrollView 中,设置 UIScrollView 的 contentSize 属性,告诉 UIScrollView 所有内容的尺寸,也就是告诉它滚动的范围。超出 UIScrollView 边框的内容会被自动隐藏,用户可以用过手势拖动来查看超出边框并被隐藏的内容。

  • UIScrollView 不仅能滚动显示大量内容,还能对其内容进行缩放处理,也就是说,要完成缩放功能的话,只需要将需要缩放的内容添加到 UIScrollView 中。

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

    • 没有设置 contentSize
    • scrollEnabled = NO
    • 没有接收到触摸事件 userInteractionEnabled = NO
  • UIScrollView 的各种尺寸

1、UIScrollView 的创建

  • Objective-C

    	UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(30, 60, [[UIScreen mainScreen] bounds].size.width - 60, 490)];
    
    	// 将 scrollView 添加到屏幕
    [self.view addSubview:scrollView]; // 向滚动视图中添加显示内容,将 imageView 添加到 scrollView,所有 UIView 子类都可以添加
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"13"]];
    [scrollView addSubview:imageView]; // 设置滚动的范围大小,包含隐藏的部分,contentSize 的大小一般大于 frame 属性设置的可视区的大小
    scrollView.contentSize = imageView.bounds.size;
  • Swift

    	let scrollView:UIScrollView = UIScrollView(frame: CGRectMake(30, 60, UIScreen.mainScreen().bounds.size.width - 60, 490))
    
    	// 将 scrollView 添加到屏幕
    self.view.addSubview(scrollView) // 向滚动视图中添加显示内容,将 imageView 添加到 scrollView,所有 UIView 子类都可以添加
    let imageView:UIImageView = UIImageView(image: UIImage(named: "13"))
    scrollView.addSubview(imageView) // 设置滚动的范围大小,包含了隐藏的部分,contentSize 的大小一般大于 frame 属性设置的可视区的大小
    scrollView.contentSize = imageView.bounds.size
  • Storyboard

    • 在 Storyboard 上添加 Scroll View 控件,在 Scroll View 控件上添加其它控件,如 ImageView 控件。

      • 在 Storyboard 中设置的 Scroll View 控件背景在程序运行时才能显示出来。

    • 将 Scroll View 控件拖线到 View Controller 代码中,设置 contentSize 的大小。

      	@interface ViewController ()
      
      	@property (nonatomic, weak) IBOutlet UIScrollView *scrollView;
      
      	@end
      
      	@implementation ViewController
      
      	- (void)viewDidLoad {
      [super viewDidLoad]; // 设置滚动的范围大小
      self.scrollView.contentSize = CGSizeMake(364, 364);
      } @end
    • 运行显示效果

2、UIScrollView 的设置

  • Objective-C

    	// 设置滚动条的风格
    /*
    UIScrollViewIndicatorStyleDefault, // 灰色样式,默认
    UIScrollViewIndicatorStyleBlack, // 黑色样式
    UIScrollViewIndicatorStyleWhite // 白色样式
    */
    scrollView.indicatorStyle = UIScrollViewIndicatorStyleDefault; // 设置是否显示滚动条
    scrollView.showsHorizontalScrollIndicator = YES; // 水平方向
    scrollView.showsVerticalScrollIndicator = YES; // 垂直方向 // 设置滚动的范围大小
    /*
    告诉 UIScrollView 所有内容的尺寸,也就是告诉它滚动的范围
    内容的大小包含了隐藏的部分,contentSize 的大小一般大于 frame 属性设置的可视区的大小
    某个值等于 0 时,则 UIScrollView 在此方向上不能滚动,如 CGSizeMake(0, 364),在 x 方向上不能滚动
    */
    scrollView.contentSize = CGSizeMake(364, 364); // 设置四周额外的滚动区域
    /*
    在 UIScrollView 的 4 周增加额外的滚动区域
    一般用来避免 scrollView 的内容被其他控件挡住
    UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
    */
    scrollView.contentInset = UIEdgeInsetsMake(64, 20, 30, 10); // 设置偏移量
    /*
    用来表示 UIScrollView 滚动的位置
    其实就是内容左上角与 scrollView 左上角的间距值
    CGPointZero 相当于 CGPointMake(0, 0)
    */
    scrollView.contentOffset = CGPointMake(100, 200);
    [scrollView setContentOffset:CGPointZero animated:YES]; // 获取偏移量
    CGPoint contentOffset = scrollView.contentOffset; // 获取子视图
    /*
    水平和垂直滚动条也是 scrollView 的子视图
    */
    NSArray *subviews = scrollView.subviews; // 获取显示内容的高度
    /*
    CGRectGetMaxY(CGRect rect) 自动计算最大 Y 坐标值
    注意 水平和垂直滚动条也是 scrollView 的子视图,会产生计算错误
    */
    // 由最后一个控件计算
    CGFloat contentH = lastView.frame.origin.y + lastView.frame.size.height; // 使用系统方法计算
    CGFloat contentH = CGRectGetMaxY(lastView.frame); // 设置点击状态栏能否滚动到画面最顶端
    /*
    也可以在协议方法中设置
    */
    scrollView.scrollsToTop = YES; // 设置是否允许手动滚动
    scrollView.scrollEnabled = YES; // 设置是否整页移动
    scrollView.pagingEnabled = NO; // 设置是否开启弹簧效果
    scrollView.bounces = YES; // 关闭下沉效果
    /*
    如果 viewController 在导航里,这个 viewController 的第一个子视图是 ScrollView 或其子类,
    系统会让 ScrollView 有个下沉的效果,有时这个效果会跟自己的代码冲突,通常会把它关掉
    */ // 判断是否实现了下沉效果
    if ([self respondsToSelector:@selector(setAutomaticallyAdjustsScrollViewInsets:)]) { // 关闭下沉效果
    self.automaticallyAdjustsScrollViewInsets = NO;
    } // 设置缩放倍数
    /*
    需要遵守 <UIScrollViewDelegate> 协议,并实现 viewForZoomingInScrollView 协议方法
    如果是在模拟器中测试,需要按住 option 键再拖动内容
    */
    scrollView.maximumZoomScale = 3; // 放大倍数,
    scrollView.minimumZoomScale = 0.1; // 缩小倍数 // 获取当前缩放倍数
    CGFloat zoomScale = scrollView.zoomScale; // 设置代理,需要遵守协议 <UIScrollViewDelegate>
    scrollView.delegate = self;
  • Swift

    	// 设置滚动条的风格
    /*
    case Default // 灰色样式,默认
    case Black // 黑色样式
    case White // 白色样式
    */
    scrollView.indicatorStyle = .Default // 设置是否显示滚动条
    scrollView.showsHorizontalScrollIndicator = true // 水平方向
    scrollView.showsVerticalScrollIndicator = true // 垂直方向 // 设置滚动的范围大小
    /*
    告诉 UIScrollView 所有内容的尺寸,也就是告诉它滚动的范围
    内容的大小包含了隐藏的部分,contentSize 的大小一般大于 frame 属性设置的可视区的大小
    某个值等于 0 时,则 UIScrollView 在此方向上不能滚动,如 CGSizeMake(0, 364),在 x 方向上不能滚动
    */
    scrollView.contentSize = CGSizeMake(364, 364) // 设置四周额外的滚动区域
    /*
    在 UIScrollView 的 4 周增加额外的滚动区域
    一般用来避免 scrollView 的内容被其他控件挡住
    UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
    */
    scrollView.contentInset = UIEdgeInsetsMake(64, 20, 30, 10) // 设置偏移量
    /*
    用来表示 UIScrollView 滚动的位置
    其实就是内容左上角与 scrollView 左上角的间距值
    CGPointZero 相当于 CGPointMake(0, 0)
    */
    scrollView.contentOffset = CGPointMake(100, 200)
    scrollView.setContentOffset(CGPointZero, animated: true) // 获取偏移量
    let contentOffset:CGPoint = scrollView.contentOffset // 获取子视图
    /*
    水平和垂直滚动条也是 scrollView 的子视图
    */
    let subviews:Array = scrollView.subviews // 获取显示内容的高度
    /*
    CGRectGetMaxY(CGRect rect) 自动计算最大 Y 坐标值
    注意 水平和垂直滚动条也是 scrollView 的子视图,会产生计算错误
    */
    // 由最后一个控件计算
    let contentH = lastView.frame.origin.y + lastView.frame.size.height // 使用系统方法计算
    let contentH = CGRectGetMaxY(lastView.frame) // 设置点击状态栏能否滚动到画面最顶端
    /*
    也可以在协议方法中设置
    */
    scrollView.scrollsToTop = true // 设置是否允许手动滚动
    scrollView.scrollEnabled = true // 设置是否整页移动
    scrollView.pagingEnabled = false // 设置是否开启弹簧效果
    scrollView.bounces = true // 关闭下沉效果
    /*
    如果 viewController 在导航里,这个 viewController 的第一个子视图是 ScrollView 或其子类,
    系统会让 ScrollView 有个下沉的效果,有时这个效果会跟自己的代码冲突,通常会把它关掉
    */ // 判断是否实现了下沉效果
    if self.respondsToSelector(Selector("setAutomaticallyAdjustsScrollViewInsets:")) { // 关闭下沉效果
    self.automaticallyAdjustsScrollViewInsets = true
    } // 设置缩放倍数
    /*
    需要遵守 UIScrollViewDelegate 协议,并实现 viewForZoomingInScrollView 协议方法
    如果是在模拟器中测试,需要按住 option 键再拖动内容
    */
    scrollView.maximumZoomScale = 3 // 放大倍数
    scrollView.minimumZoomScale = 0.1 // 缩小倍数 // 获取当前缩放倍数
    let zoomScale:CGFloat = scrollView.zoomScale // 设置代理,需要遵守协议 UIScrollViewDelegate
    scrollView.delegate = self

3、向 scrollView 添加图片集

3.1 添加少量图片

  • 每次添加一张图片的时候都会创建一个 UIImageView 对象,如果添加的图片过多或图片太大会占用大量的内存。

  • Objective-C

    	#define WIDTH   [UIScreen mainScreen].bounds.size.width
    #define HEIGHT [UIScreen mainScreen].bounds.size.height // 设置 scrollView 的尺寸
    CGFloat w = WIDTH - 20;
    CGFloat h = HEIGHT - 40; // 设置图片数量
    int count = 5; UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 30, w, h)];
    scrollView.pagingEnabled = YES;
    [self.view addSubview:scrollView]; // 设置 contentSize,水平方向能滚动
    scrollView.contentSize = CGSizeMake(count * w, 0); // 添加少量图片
    for (int i = 0; i < count; i++) { UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * w, 0, w, h)];
    imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg", i]]; // 将 imageView 添加到 scrollView 上
    [scrollView addSubview:imageView];
    }
  • Swift

    	let WIDTH = UIScreen.mainScreen().bounds.size.width
    let HEIGHT = UIScreen.mainScreen().bounds.size.height // 设置 scrollView 的尺寸
    let w = WIDTH - 20
    let h = HEIGHT - 40 // 设置图片数量
    let count:Int = 5 let scrollView:UIScrollView = UIScrollView(frame: CGRectMake(10, 30, w, h))
    scrollView.pagingEnabled = true
    self.view.addSubview(scrollView) // 设置 contentSize,水平方向能滚动
    scrollView.contentSize = CGSizeMake(count * w, 0) // 添加少量图片
    for i in 0 ..< count { let imageView:UIImageView = UIImageView(frame: CGRectMake(CGFloat(i) * w, 0, w, h))
    imageView.image = UIImage(named: String(format: "%d.jpg", i)) // 将 imageView 添加到 scrollView 上
    scrollView.addSubview(imageView)
    }

3.2 添加大量图片

  • 只创建 3 个 UIImageView 对象,向 scrollView 添加图片时复用这 3 个 UIImageView 对象。

  • Objective-C


4、UIScrollView 的协议方法

  • 需遵守协议 UIScrollViewDelegate,并设置代理

  • 设置代理方法:

    • 通过代码

      	// self 就是控制器
      self.scrollView.delegate = self;
    • 通过 storyboard 拖线

  • Objective-C

    • 拖拽

      	// 将要开始拖拽
      - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { } // 将要结束拖拽
      - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset { } // 已经结束拖拽,decelerate 松手后 是否有惯性滚动 0:没有,1:有
      - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { }
    • 滚动

      	// 滚动过程中,只要滚动就会触发
      - (void)scrollViewDidScroll:(UIScrollView *)scrollView { } // 已经结束滚动,滚动动画停止时执行,代码改变时触发,也就是 setContentOffset 改变时
      - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView { }
    • 惯性滚动

      	// 将要开始惯性滚动
      - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView { } // 已经结束惯性滚动
      - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { }
    • 滚到顶端

      	// 设置点击状态栏时是否滚到顶端
      - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView { return YES;
      } // 已经滚到顶端,点击状态栏时调用
      - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView { }
    • 缩放

      	// 设置被缩放的空间,一个 scrollView 中只能有一个子控件被缩放,如果有很多个子控件缩放时会引起错乱
      - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { return [scrollView.subviews[0] viewWithTag:100];
      } // 将要开始缩放
      - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view { } // 已经结束缩放
      - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale { } // 缩放过程中,只要缩放就会触发
      - (void)scrollViewDidZoom:(UIScrollView *)scrollView { }
  • Swift

    • 拖拽

      	// 将要开始拖拽
      func scrollViewWillBeginDragging(scrollView: UIScrollView) { } // 将要结束拖拽
      func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) { } // 已经结束拖拽,decelerate 松手后 是否有惯性滚动 0:没有,1:有
      func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) { }
    • 滚动

      	// 滚动过程中,只要滚动就会触发,只要滚动就会触发
      func scrollViewDidScroll(scrollView: UIScrollView) { } // 已经结束滚动,滚动动画停止时执行,代码改变时触发,也就是 setContentOffset 改变时
      func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) { }
    • 惯性滚动

      	// 将要开始惯性滚动
      func scrollViewWillBeginDecelerating(scrollView: UIScrollView) { } // 已经结束惯性滚动
      func scrollViewDidEndDecelerating(scrollView: UIScrollView) { }
    • 滚到顶端

      	// 设置点击状态栏时是否滚到顶端
      func scrollViewShouldScrollToTop(scrollView: UIScrollView) -> Bool { return true
      } // 已经滚到顶端,点击状态栏时调用
      func scrollViewDidScrollToTop(scrollView: UIScrollView) { }
    • 缩放

      	// 设置被缩放的空间,一个 scrollView 中只能有一个子控件被缩放,如果有很多个子控件缩放时会引起错乱
      func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? { return scrollView.subviews[0].viewWithTag(100)
      } // 将要开始缩放
      func scrollViewWillBeginZooming(scrollView: UIScrollView, withView view: UIView?) { } // 已经结束缩放
      func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) { } // 缩放过程中,只要缩放就会触发
      func scrollViewDidZoom(scrollView: UIScrollView) { }

5、Storyboard 中设置

  • 在 Storyboard 场景中设置

    • Scroll View

      Style 滚动条颜色类型
      Scroll Indicators
      -- Shows Horizontal Indicator 显示水平滚动条
      -- Shows Vertical Indicator 显示垂直滚动条
        									|

      Scrolling |

      -- Scolling Enabled | 可以滚动

      -- Paging Enabled | 按页面滚动

      -- Direction Lock Enabled | 滚动方向固定

      |

      Bounce |

      -- Bounces | 启动弹簧效果

      -- Bounce Horizontal | 水平弹簧效果

      -- Bounce Vertical | 垂直弹簧效果

      |

      Zoom | 最小/最大缩放值

      |

      Touch |

      -- Bounces Zoom |

      -- Delays Content Touches |

      -- Cancellable Content Touches | |

      Keyboard | 键盘设置

  • 在 Storyboard 场景绑定的 Controller 中设置

    • 在 Storyboard 添加的 ScrollView 上需在其上添加子视图作为 ContentView,并添加子视图的约束,ScrollView 才能够计算 contentSize 的大小,子视图才能够滚动。

    • 若要在 Storyboard 的 ScrollView 上添加一个不随 ContentView 滚动的视图,需在 ViewController 上添加一个和 ScrollView 相同位置大小的视图,并设置不滚动视图相对于该视图的约束。

iOS - UIScrollView的更多相关文章

  1. IOS UIScrollView常用代理方法

    iOS UIScrollView代理方法有很多,从头文件中找出来学习一下 //只要滚动了就会触发 - (void)scrollViewDidScroll:(UIScrollView *)scrollV ...

  2. IOS UIScrollView + UIButton 实现segemet页面和顶部标签页水平滚动效果

    很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScr ...

  3. iOS UIScrollView 你可能不知道的奇技淫巧

    iOS 的 UIScrollView 可以说是十分强大,巧妙地运用它可以得到一些意想不到的效果.本文将举几个 ScrollView 不常见运用的例子. 自带信息应用 这个界面既可以上下卷动,也可以左右 ...

  4. iOS UIScrollView 停止滑动 减速

    1.UIScrollView 减速 可能通过decelerationRate的属性来设置,它的值域是(0.0,1.0),当decelerationRate设置为0.1时,当手指touch up时就会很 ...

  5. 关于iOS UIScrollView放大的问题

    总所周知 ,iOS 的UIScrollView是专门用来做缩放和分页用的,关于这方面的例子也很多了,但你们知道在放大的过程中 他做了些什么吗?  他的哪些东西会发生改变吗? 通过在一个项目中的小经历 ...

  6. iOS UIScrollView的使用

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

  7. iOS— UIScrollView和 UIPageControl之间的那些事

    本代码主要实现在固定的位置滑动图片可以切换. 目录图如下: ViewController.h #import <UIKit/UIKit.h> // 通过宏定义定义宽和高 #define W ...

  8. [IOS UIScrollView+PageControl]信息展示横幅

    ScrollViewController.h #import <UIKit/UIKit.h> @interface ScrollViewController : UIViewControl ...

  9. iOS uiscrollView 嵌套 问题 的解决

    苹果官方文档里面提过,最好不要嵌套scrollView,特别提过UITableView和UIWebView,因为在滑动时,无法知道到底是希望superScrollView滑动还是subScrollVi ...

随机推荐

  1. WEB前端常用网站收集

    WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap  官网  h ...

  2. shell中读写mysql数据库

    本文介绍了如何在shell中读写mysql数据库.主要介绍了如何在shell 中连接mysql数据库,如何在shell中创建数据库,创建表,插入csv文件,读取mysql数据库,导出mysql数据库为 ...

  3. 源码安装Apache,报错:Cannot use an external APR with the bundled APR-util和httpd: Could not reliably determine the server's fully qualified domain name, using

    一.解决APR和APR-util错误: 1.1.安装APR: [root@ganglia httpd-2.2.23]# cd srclib/apr [root@ganglia apr]# ./conf ...

  4. CGRectGet系列

    CGRectGetHeight返回label本身的高度 CGRectGetMinY返回label顶部的坐标 CGRectGetMaxY 返回label底部的坐标 CGRectGetMinX 返回lab ...

  5. HDU 1890:Robotic Sort(Splay)

    http://acm.hdu.edu.cn/showproblem.php?pid=1890 题意:有一个无序序列,经过不断地翻转,使得最后的序列是一个升序的序列,而且如果相同数字要使在原本序列靠前的 ...

  6. WPF:MenuItem样式

    基础信息 1.MenuItem 样式 <Window.Resources> <Style TargetType="{x:Type MenuItem}"> & ...

  7. Asp.net Vnext ModelBinding

    Model Binding 本文已经同步到<Asp.net Vnext 系列教程 >中] Model binding(绑定)简单来说就是通过遍历ValueProvider(值提供者)获取的 ...

  8. python8

    编译和解释性语言的区别 编译 典型的C C++ 编译完成之后是可执行文件. 机器码-底层(外文书,但是不懂中文,翻译成中文就可以看) 解释性语言----看一句英文书,让翻译解释一句 解释器写的代码便于 ...

  9. 5.toogleButton以及Switch

    Switch现在用得更多,比toogleButton界面美观,用户体验也要好. 点击事件: 用isChecked来判断点击的是哪一个,然后做相对应的回应.

  10. A Simple Problem with Integers

    A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 77964 Acc ...