常用设置,xib中给UIScrollview控件添加约束

作者:新葡京简介

今天我们讲讲 UIScrollView 的设置 。 还是那句老话: 新手学习 、大神略过。

UIScrollView的常见属性

新葡京8455 1

@property(nonatomic) CGPoint contentOffset;----偏移量

- 这个属性用来表示UIScrollView滚动的位置(其实就是内容左上角与scrollView左上角的间距值)

@property(nonatomic) CGSize contentSize;

- 这个属性用来表示UIScrollView内容的尺寸,滚动范围(能滚多远)

@property(nonatomic) UIEdgeInsets contentInset;

- 这个属性能够在UIScrollView的4周增加额外的滚动区域,一般用来避免scrollView的内容被其他控件挡住

  • 上下滚动(即垂直滚动)

    • 给添加一个UIView类型的子控件A(这将是UIScrollView唯一的一个子控件)
    • 设置A距离UIScrollView上下左右间距都为0
    • 设置A的高度(这个高度就是UIScrollView的内容高度:contentSize.height)
    • 设置A在UIScrollView中左右居中(水平居中)
    • 往A中再添加其他子控件
  • 左右滚动(即水平滚动)

    • 给添加一个UIView类型的子控件A(这将是UIScrollView唯一的一个子控件)
    • 设置A距离UIScrollView上下左右间距都为0
    • 设置A的宽度(这个高度就是UIScrollView的内容宽度:contentSize.width)
    • 设置A在UIScrollView中上下居中(垂直居中)
    • 往A中再添加其他子控件

前言

本文主要讲述了 UIScrollView 的一些常用的属性和方法、引申了delegate的思想和UIScrollView的缩放。这篇文章着重介绍UIScrollView的基本知识,关于UIScrollView的实例使用我会在下一篇iOS回顾笔记(05)中着重讲解。

  1. UIScrollView 的定义

UIScrollView的其他属性

@property(nonatomic) BOOL bounces;

- 设置UIScrollView是否需要弹簧效果

@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;

- 设置UIScrollView是否能滚动

@property(nonatomic) BOOL showsHorizontalScrollIndicator;

- 是否显示水平滚动条

@property(nonatomic) BOOL showsVerticalScrollIndicator;

- 是否显示垂直滚动条

-上下左右滚动(水平垂直滚动)

UIScrollView

  • UIScrollView :顾名思义就是 可以滚动的 UIView。
  • 由于手机的屏幕比较小,所以直接可以展示在用户眼前的内容极其有限
  • 当展示的内容较多且超出一个屏幕时,用户可以通过手势滑动来查看屏幕以外的东西
  • 普通的UIView不具备滚动的功能,所以不适合展示较多的内容
  • UIScrollView就是一个可以滚动的UIView,用来展示大量的内容,并且可以通过滚动来展示所有内容
  • UIScrollView实例:手机上可上下滑动的页面都是,如QQ聊天页面

UIScrollView的基本使用

  • 给添加一个UIView类型的子控件A(这将是UIScrollView唯一的一个子控件)
  • 设置A距离UIScrollView上下左右的间距为0
  • 设置A的宽度(这个高度就是UIScrollView的内容宽度:contentSize.width)
  • 设置A的高度(这个高度就是UIScrollView的内容高度:contentSize.height)

UIScrollView的基本使用

UIScrollView的使用很简单,基本使用方式如下:

  • 将需要展示的内容添加到UIScrollView中
  • 设置UIScrollView的 contentSize属性,告诉它它内容的尺寸,也就是设置它的可滚动范围
// 1.创建滚动视图
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.frame = CGRectMake(0,0,375,150);
[self addSubview:scrollView];

// 2. 设置内容
[scrollView addSubview:[UIImageView new]];

// 3. 设置滚动范围
scrollView.contentSize = CGSizeMake(ImageViewCount * self.bounds.size.width, 0);

UIScrollView的显示内容的小细节

  • 超过UIScrollView边界的内容会被自动隐藏
  • 用户可以用过拖拽手势来查看超出UIScrollView边界被隐藏的内容

UIScrollView无法滚动可能的原因

  • 未设置 contentSize,不知滚动的范围
  • scrollEnable = NO; 可滚动属性设置为NO
  • userInteractionEnable = NO; 未接受用户事件
 var scrollView = UIScrollView()

UIScrollView的用法很简单

- 将需要展示的内容添加到UIScrollView中

- 设置UIScrollView的contentSize属性,告诉UIScrollView所有内  容的尺寸,也就是告诉它滚动的范围(能滚多远,滚到哪里是尽头)

UIScrollView的常用属性

  • 内容偏移量:contentOffset
@property(nonatomic) CGPoint contentOffset;  // default CGPointZero

contentOffset用来表示UIScrollView的滚动位置。

具体为内容原点与UIScrollView左上角原点的间距值。

  • 内容大小:contentSize
@property(nonatomic) CGPoint contentSize;  // default CGSizeZero

contentSize:表示UIScrollView的内容的尺寸,用来设置UIScrollView的滚动范围。

  • 额外滚动区域:contentInset
@property(nonatomic) UIEdgeInsets contentInset; // default UIEdgeInsetsZero. add additional scroll area around content

contentInset:可以在UIScrollView的四周增加额外的滚动区域。可以用来避免UIScrollView的内容被其他控件挡住。

以上属性效果如图:

Snip20170305_3.png

  1. 常用属性设置

UIScrollView显示内容的小细节

- 超出UIScrollView边框的内容会被自动隐藏

- 用户可以用过手势拖动来查看超出边框并被隐藏的内容

UIScrollView的其他属性

  • 弹簧效果
@property(nonatomic) BOOL bounces; // default YES. if YES, bounces past edge of content and back again
  • 是否能滚动
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled; // default YES. turn off any dragging temporarily
  • 是否显示水平滚动条
@property(nonatomic) BOOL showsHorizontalScrollIndicator; // default YES. show indicator while we are tracking. fades out after tracking
  • 是否显示垂直滚动条
@property(nonatomic) BOOL showsVerticalScrollIndicator; // default YES. show indicator while we are tracking. fades out after tracking
  • UIScrollView的Delegate(代理)
@property(nullable,nonatomic,weak) id<UIScrollViewDelegate> delegate; // default nil. weak reference

UIScrollView无法滚动的解决办法

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

- 没有设置contentSize

- scrollEnabled = NO

- 没有接收到触摸事件:userInteractionEnabled = NO

UIScrollView的Delegate

Deleagate 是一个很重要的属性,同时也是一个重要的知识点,所以拿出来着重说一下。

代理思想的引入

  • 通常,我们会在UIScrollView 正在滚动、滚到到某个位置、停止滚动等情况下做一些特定的操作
  • 若想完成以上操作,需要对UIScrollView的各个状态进行“监听”,这个监听者就是我们说的代理
  • 当UIScrollView发生一系列滚动操作时,会自动发送消息给它的代理对象,通知它当下的实时滚动状态。
  • 总结一下就是,如果想要监听UIScrollView的实时滚动状况,我们就要给它设置代理,然后通过代理来得知它的实时滚动情况

实际上UIScrollView通知delegate自己的相关状态就是通过给代理发消息实现的如图:

Snip20170305_4.png

所以想成为UIScrollView的代理是需要遵循如下条件的

@property(nullable,nonatomic,weak) id<UIScrollViewDelegate> delegate;
  • UIScrollView把代理需要实现的方法都定义在了UIScrollViewDelegate当中
  • 成为代理必须遵守UIScrollViewDelegate这个协议,其本身可以是 id 类型的对象(任意类型对象)
  • 代理对象必须实现UIScrollViewDelegate中相对应的方法,才能监听UIScrollView相应的状态

设置UIScrollView的步骤

  • 通常情况下UIScrollView的代理都是控制器,设置方法有两种
    • 代码: scrollView.delegate = self;
    • storyBoard/Xib拖线:
    Snip20170305_5.png
  • 新葡京8455,控制器UIScrollViewDelegate
@interface ViewController ()<UIScrollViewDelegate>
  • 实现相对应的代理方法,进行监听
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    // 监听代码
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2){
    // 监听代码
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    // 监听代码
}

···
 self.view.backgroundColor = UIColor.gray scrollView.frame = CGRect(x: 50, y: 100, width: 300, height: 200) scrollView.backgroundColor = UIColor.red // 监测目前滚动的位置 //scrollView.contentOffset // 设置内容的滚动范围 能滚多远 scrollView.contentSize = CGSize(width: 600, height: 200)// 四周增加额外的滚动区域,一般用来避免scrollView的内容被其他控件挡住 scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20) // 控制垂直方向遇到边框是否反弹 scrollView.alwaysBounceVertical = true // 控制水平方向遇到边框是否反弹 scrollView.alwaysBounceHorizontal = true // 是否显示水平滚动条 scrollView.showsHorizontalScrollIndicator = false // 是否显示垂直滚动条 scrollView.showsVerticalScrollIndicator = false // 是否以每页的形式进行更换 scrollView.isPagingEnabled = true // 是否可以滚动 scrollView.isScrollEnabled = true // 指定控件是否只能在一个方向上滚动 scrollView.isDirectionalLockEnabled = false // 控制控件遇到边框是否反弹 scrollView.bounces = false // 指定滚动条在scrollerView中的位置 scrollView.scrollIndicatorInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) // 设置滚动条的样式 scrollView.indicatorStyle = UIScrollViewIndicatorStyle.default // 改变scrollerView的减速点位置 scrollView.decelerationRate = 10 // 缩小的最小比例 scrollView.minimumZoomScale = 0 // 放大的最大比例 scrollView.maximumZoomScale = 5 // 控制控件滚动到顶部 scrollView.scrollsToTop = true // 设置代理 scrollView.delegate = self self.view.addSubview(scrollView)

UIScrollView的代理(delegate)

- 很多时候,我们想在UIScrollView正在滚动 或 滚动到某个位置 或者 停止滚动 时做一些特定的操作

- 要想完成上述功能,前提条件就是能够监听到UIScrollView的整个滚动过程

- 当UIScrollView发生一系列的滚动操作时, 会自动通知它的代理(delegate)对象,给它的代理发送相应的消息,让代理得知它的滚动情况

- 也就是说,要想监听UIScrollView的滚动过程,就必须先给UIScrollView设置一个代理对象,然后通过代理得知UIScrollView的滚动过程

新葡京8455 2

UIScrollView内容的缩放

UIScrollView不仅能够展示大量的内容还能进行内容的缩放。

常见场景

图库里面的图片我们可以通过手势来进行缩放

Snip20170305_6.png

要实现这样的功能,我们只需要将图片放到UIScrollView中去,然后设置缩放比例和要缩放的内容

  1. 代理方法

UIScrollView和delegate的通信

新葡京8455 3

新葡京8455 4

新葡京8455 5

缩放原理

  • 当用户在UIScrollView身上使用捏合手势的时候,UIScrollView会调用delegate的viewForZoomingInScollView方法,方法的返回值就是要进行缩放的控件。

Snip20170305_7.png

缩放实现步骤

  • 设置UIScrollView的代理对象
  • 设置minimumZoomScale;// default is 1.0 最小缩放比例
  • 设置maximumZoomScale;// default is 1.0. 最大缩放比例
  • 代理实现viewForZoomingInScrollView方法返回要进行缩放的控件

缩放相关的两个方法

// 将要开始缩放
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2); // called before the scroll view begins zooming its content

// 结束缩放
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale; // scale between minimum and maximum. called after any 'bounce' animations

成为delegate的条件

新葡京8455 6

新葡京8455 7

/**

* 即将开始拖拽的时候调用

*/

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

NSLog(@"scrollViewWillBeginDragging------");

}

/**

* 结束拖拽的时候调用

*/

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

{

NSLog(@"scrollViewDidEndDragging------");

}

/**

* (减速完毕)由于惯性停止滚动的时候调用

*/

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

NSLog(@"scrollViewDidEndDecelerating------");

}

小结

UIScrollView是iOS开发中常常用到的一个控件,通常用来展示比较多的内容,我们可以通过给他设置代理实现它的代理方法进行监听,通过监听不同的状态来做对应的一些操作。
它可以监听用户手势来缩放自己内部子控件。

 // 1、已经开始滚动(不管是拖、拉、放大、缩小等导致)都会执行此函数 func scrollViewDidScroll(_ scrollView: UIScrollView) { } // 2、将要开始拖拽,手指已经放在view上并准备拖动的那一刻 func scrollViewWillBeginDragging(_ scrollView: UIScrollView) { } // 3、将要结束拖拽,手指已拖动过view并准备离开手指的那一刻,注意:当属性isPagingEnabled为YES时,此函数不被调用 func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) { } // 4、已经结束拖拽,手指刚离开view的那一刻 func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) { } // 5、view将要开始减速,view滑动之后有惯性 func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) { } // 6、view已经停止滚动 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { } // 7、view的缩放 func scrollViewDidZoom(_ scrollView: UIScrollView) { } // 8、有动画时调用 func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) { }

UIScrollView和控制器

新葡京8455 8

新葡京8455 9

缩放实现步骤

新葡京8455 10

新葡京8455 11

- 设置UIScrollView的iddelegate代理对象

- 设置minimumZoomScale :缩小的最小比例

- 设置maximumZoomScale :放大的最大比例

- 让代理对象实现下面的方法,返回需要缩放的视图控件

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

- 跟缩放相关的其他代理方法

- 缩放完毕的时候调用

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view

正在缩放的时候调用

- (void)scrollViewDidZoom:(UIScrollView *)scrollView

分页

只要将UIScrollView的pageEnabled属性设置为YES,UIScrollView会被分割成多个独立页面,里面的内容就能进行分页展示

- 一般会配合UIPageControl增强分页效果,UIPageControl常用属性如下

- 一共有多少页

@property(nonatomic) NSInteger numberOfPages;

- 当前显示的页码

@property(nonatomic) NSInteger currentPage;

- 只有一页时,是否需要隐藏页码指示器

@property(nonatomic) BOOL hidesForSinglePage;

- 其他页码指示器的颜色

@property(nonatomic,retain) UIColor *pageIndicatorTintColor;

- 当前页码指示器的颜色

@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;

本文由新葡京8455发布,转载请注明来源

关键词: