2021-07-14

iOS–UIScrollView的使用

移动设备的屏幕大小是极其有限的，因此直接展示在用户眼前的内容也相当有限
当展示的内容较多，超出一个屏幕时，用户可通过滚动手势来查看屏幕以外的内容
普通的UIView不具备滚动功能，不适合显示过多的内容。

UIScrollView是一个能够滚动的视图控件，可以用来展示大量的内容，并且可以通过滚动查看所有的内容，系统设置就是一个ScrollView。

UIScrollView的使用：
将需要展示的内容添加到UIScrollView中
设置UIScrollView的contentSize属性，告诉UIScrollView所有内容的尺寸，也就是告诉它滚动的范围（能滚多远，滚到哪里是尽头）
常用属性：

@property(nonatomic) CGPoint contentOffset; // default CGPointZero
@property(nonatomic) CGSize contentSize; // default CGSizeZero
@property(nonatomic) UIEdgeInsets contentInset; // default UIEdgeInsetsZero. add additional scroll area around content

contentOffset：这个属性用来表示UIScrollView滚动的位置（其实就是内容左上角与scrollView左上角的间距值）
contentSize：这个属性用来表示UIScrollView内容的尺寸，滚动范围（能滚多远）
contentInset：这个属性能够在UIScrollView的4周增加额外的滚动区域，一般用来避免scrollView的内容被其他控件挡住

其他属性：
@property(nonatomic) BOOL bounces;
设置UIScrollView是否需要弹簧效果
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
设置UIScrollView是否能滚动
@property(nonatomic) BOOL showsHorizontalScrollIndicator;
是否显示水平滚动条
@property(nonatomic) BOOL showsVerticalScrollIndicator;
是否显示垂直滚动条

UIScrollView的代理
当UIScrollView发生一系列的滚动操作时， 会自动通知它的代理（delegate）对象，给它的代理发送相应的消息，让代理得知它的滚动情况。所以想要监听UIScrollView的滚动过程，就必须先给UIScrollView设置一个代理对象，然后通过代理得知UIScrollView的滚动过程。

UIScrollViewDelegate协议常用方法：

// 用户开始拖拽时调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
// 滚动到某个位置时调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
// 用户结束拖拽时调用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

缩放的实现：
设置UIScrollView的id delegate代理对象
设置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;

例子

UIScrollView创建

UIScrollView通过alloc和init进行创建和初始化，UIScrollView除了要设置frame外，还需要设置contentSize，代表内滚动的范围，就是因为这个属性，才能有内容视图超过自身大小范围的能力。

#import "ViewController.h"

@interface ViewController ()

@property(retain,nonatomic) UIScrollView* scrollView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //获取控制器View的宽、高
    CGFloat vcViewWidth = self.view.frame.size.width;
    CGFloat vcViewHeight = self.view.frame.size.height;
    
    //创建UIScrollView
    _scrollView = [[UIScrollView alloc] init];
    //设置UIScrollView的位置和宽高为控制器View的宽高
    _scrollView.frame = CGRectMake(0, 0, vcViewWidth, vcViewHeight);
    //设置画布大小，一般比frame大，这里设置横向能拖动4张图片的范围
    _scrollView.contentSize = CGSizeMake(vcViewWidth * 4, vcViewHeight);
    
    //将ScrollView添加到控制器的View上
    [self.view addSubview:_scrollView];
}

@end

添加内容

UIScrollView添加4张图片，分别横向排列。

1、往项目里放4⃣️张照片

1、实例化4个ImageView，添加到UIScrollView中

//创建图片ImageView添加到ScrollView中
for(int i = 0; i < 4; i++) {
    NSString* imgName = [NSString stringWithFormat:@"%d.png", i + 1];
    UIImage* img = [UIImage imageNamed:imgName];
    UIImageView* imgView = [[UIImageView alloc] initWithImage:img];
    imgView.frame = CGRectMake(vcViewWidth * i, 0, vcViewWidth, vcViewHeight);
    [_scrollView addSubview:imgView];
}

UIScrollView的其他设置

开启、禁用滚动，默认为YES

_scrollView.scrollEnabled = YES;

（特性一）是否可以边缘弹动效果，默认为YES，能让内容超过自身大小

_scrollView.bounces = YES;

（特性二）开启、禁用纵向、横向弹动，这2个属性控制不同方向的越界拖动、回弹，默认都为YES

//开启横向弹动效果

_scrollView.alwaysBounceHorizontal = YES;

//关闭纵向弹动效果

_scrollView.alwaysBounceVertical = NO;

（特性三）是否按照整页滚动，默认为NO，设置为YES就是按页来滚动

_scrollView.pagingEnabled = YES;

显示、隐藏滚动进度条，默认为YES

//隐藏横向滚动条

_scrollView.showsHorizontalScrollIndicator = NO;

//隐藏竖向滚动条

_scrollView.showsVerticalScrollIndicator = NO;

UIScrollView设置代理

1、UIScrollView的代理，就是设置UIScrollView上的事件回调的协议，一般让当前控制器来实现协议。

视图控制器实现UIScrollView的代理协议UIScrollViewDelegate。

文件：ViewController.h

@interface ViewController : UIViewController<UIScrollViewDelegate>

@end

2、给UIScrollView设置代理，并复写代理方法

文件：ViewController.m

#import "ViewController.h"

@interface ViewController ()

@property(retain,nonatomic) UIScrollView* scrollView;

@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    
    //...省略上面提到的设置
 
	 //将ScrollView添加到控制器的View上
    [self.view addSubview:_scrollView];
    //设置代理
    _scrollView.delegate = self;   
}

//滚动视图移动时回调
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
    NSLog(@"视图移动 x: %f", scrollView.contentOffset.x);
}

//滚动视图结束拖动时回调
- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    NSLog(@"视图结束拖动");
}

//滚动视图即将开始拖动时回调
- (void) scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    NSLog(@"滚动视图即将开始拖动");
}

//滚动视图结束拖动时回调
- (void) scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    NSLog(@"滚动视图结束拖动");
}

//视图即将减速时调用
- (void) scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {
    NSLog(@"视图即将减速");
}

//视图已经结束减速时回调
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSLog(@"视图已经结束减速");
}
@end

3、添加小圆点控制显示器

//创建 初始化
UIPageControl *pageControl = [[UIPageControl alloc]init];
//设置frame
pageControl.frame = CGRectMake(98, 700, 200, 200);
//设置点的个数
pageControl.numberOfPages=4;
//设置指示器默认显示的颜色
pageControl.pageIndicatorTintColor = [UIColor redColor];
//设置当前选中的颜色
pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
//设置当前默认显示位置
pageControl.currentPage = 0;
//将pageControl添加到视图中    
[self.view addSubview:pageControl];

4、设置滑动scrollview切换视图时，对应的小圆点同时切换

//设置pageControl 的显示
//当滑动快结束的时候
//缓慢结束
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //获取当前scrollview 的X轴方向的 偏移量
    CGFloat offset = self.scrollView.contentOffset.x;
    //每个图片页面的宽度
    CGFloat pageWi =self.view.bounds.size.width;
    //设置当前的显示位置
    self.pageControl.currentPage = offset/pageWi+1;
}

5、设置图片的自动循环播放

创建定时器

-(void)initTimerFunction{
    //创建计时器
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoSelectPage) userInfo:nil repeats:YES];
    NSRunLoop *mainLoop = [NSRunLoop mainRunLoop];
    
    [mainLoop addTimer:timer forMode:NSRunLoopCommonModes];
    
    self.timer = timer;
}

在这里，定时器会每隔两秒钟的时间来重复执行autoSelectPage方法

-(void)autoSelectPage{
    //取出当前的偏移量
    CGPoint offset =  self.scrollView.contentOffset;
    //取出当前的设置显示 的page指示
    NSInteger  currentPage = self.pageControl.currentPage;
    
    if (currentPage == 3) {
        //设置为初始值
        currentPage =0;
        offset = CGPointZero;
        //更新offset
        [self.scrollView setContentOffset:offset animated:NO];
    }else{
        currentPage++;
        offset.x +=self.view.bounds.size.width;
        //更新offset
        [self.scrollView setContentOffset:offset animated:YES];
    }
    //更新pageControl显示
    self.pageControl.currentPage = currentPage;
    
}

6、当手势滑动scrollview的时候停止定时器任务，滑动结束的时候开启定时任务

//当滑动开始的时候 ，停止计数器
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    //取消定时器任务
    [self.timer invalidate];
}
//当滑动停止时启动定时器任务
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    [self.timer fire];
    //设置自动滚动定时任务
    [self initTimerFunction];
}