UI基础 - UIScrollView

■ 简言

1. UIScrollView 是所有滚动视图的基类，比如 UITableView、UITextView 等都是其子类。它适用于展示的内容显⽰不下（如超大图片等）、内容过多（图⽂混排）、滚动头条、相册等

■ 使用方式

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor yellowColor];
    // 隐藏导航栏
    self.navigationController.navigationBar.hidden = YES;
    // 图片
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 100, 150)];
    imageView.image = [UIImage imageNamed:@"4.jpg"];
    
    // UIScrollView
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 20, self.view.frame.size.width - 20, 400)];
    scrollView.backgroundColor = [UIColor purpleColor];
    [scrollView addSubview:imageView];
    scrollView.contentSize = CGSizeMake(self.view.frame.size.width*1.5, 400*2);// 滚动范围
    // scrollView.scrollEnabled = NO; // 是否可以滚动
    scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite; // 滚动条颜色
    // scrollView.showsHorizontalScrollIndicator = NO; // 是否显示水平滚动条
    // scrollView.showsVerticalScrollIndicator = NO;   // 是否显示垂直滚动条
    
    // 方向锁：子视图正在某一方向滑动过程中，不能再向其他方向滑动，只有当子视图停下来以后才可以滑动
    scrollView.directionalLockEnabled = YES;
    // scrollView.contentOffset = CGPointMake(50,50); // 子视图的原点相对于 scrollView 的原点的偏移量
    scrollView.contentInset = UIEdgeInsetsMake(80, 100, 60, 0); // 内容边距
    scrollView.bounces = YES; // 弹框效果
    scrollView.pagingEnabled = YES; // 翻页效果：YES 当滑动超过一半的时候就会翻页，覆盖滑动效果
    [self.view addSubview:scrollView];
}

运行效果

■ 应用场景

1. 实现翻页效果，需要注意的是滑动过程中小白点的闪跳问题

#import "ViewController.h"
@interface ViewController ()<UIScrollViewDelegate>{
    
    BOOL _isLock;// 解决小白点闪跳的问题
    UIScrollView  *_scrollView;
    UIPageControl *_pageControl;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 导航栏隐藏时会造成 UIScrollView 子视图向下偏移 20 个点
    self.navigationController.navigationBar.hidden = YES;
    
    // UIScrollView
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height-60)];
    // 当导航栏不显示时，系统用于适应所谓的安全区域而自动调整滚动视图等一类控件的偏移
    // 所造成视图下移 20 个点的问题，只需一行代码即可解决
    _scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
    _scrollView.backgroundColor = [UIColor cyanColor]; // 方便查看效果
    _scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 5, _scrollView.frame.size.height);
    _scrollView.delegate = self;
    _scrollView.bounces = YES;
    _scrollView.directionalLockEnabled = YES;
    _scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    
    // 缩放系数
    _scrollView.maximumZoomScale = 10;//  scrollView 最大缩放比例，默认是 1
    _scrollView.minimumZoomScale = 0.1;// scrollView 最少缩小比例
    [self.view addSubview:_scrollView];
    
    // 添加图片
    for (int i = 0; i < 5; i ++) {
        UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.frame.size.width*i,20, self.view.frame.size.width, _scrollView.frame.size.height - 40 - 20)];
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i+1]];
        [_scrollView addSubview:imageView];
    }
    
    // UIPageControl：分页控件
    // 它可以像 button 一样添加事件，只不过事件触发使用是 UIControlEventsValueChanged
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0,_scrollView.frame.size.height+10,self.view.frame.size.width,40)];
    _pageControl.backgroundColor = [UIColor blackColor];
    _pageControl.numberOfPages = 5; // 滚动点个数
    _pageControl.hidesForSinglePage = YES;// 只有一页时是否隐藏分页控件
    [_pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:_pageControl];
}

#pragma mark - 自定义方法
// 过半则翻页
-(void)changePage:(UIPageControl *)pageControl{
    // 当前页总页数
    NSLog(@"pageControl.currentPage = %ld，%ld",pageControl.currentPage,pageControl.numberOfPages);
    _isLock = YES;
    [_scrollView setContentOffset:CGPointMake(self.view.frame.size.width * pageControl.currentPage,0) animated:YES];
}

#pragma mark - <UIScrollViewDelegate>
// 滚动时
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
    
    // 当 _pageControl 和滚动视图同时使时，点击 _pageControl 会导致小白点的闪烁，加上使用一个锁的判断即可解决
    if (!_isLock) {
        // 翻页过半，跳动一个点
        int number = (scrollView.contentOffset.x + self.view.frame.size.width/2) / self.view.frame.size.width;
        _pageControl.currentPage = number;
    }
}

// 将要开始拖拽时
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}

// 将要结束拖拽时
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    NSLog(@"%s",__FUNCTION__);
}

// 结束拖拽时
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    NSLog(@"%s",__FUNCTION__);
}

// 将要开始减速时
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}

// 结束减速时触发（停止时）
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
    _pageControl.currentPage = (scrollView.contentOffset.x + self.view.frame.size.width/2.0)/ self.view.frame.size.width;
    // 停留页面
    [scrollView setContentOffset : CGPointMake(self.view.frame.size.width * _pageControl.currentPage, 0) animated:YES];
}

// 视图已经结束滚动动画
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
    // 解锁
    _isLock = NO;
}

// 只要 scrollView 缩放
- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}

// 将要缩放
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view{
    NSLog(@"%s",__FUNCTION__);
}

// 完成放大或缩小时
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale{
    NSLog(@"%s",__FUNCTION__);
}

// 指定某个滚动视图中的子视图可以被放大、缩小
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
    return nil;
}

// 只有当 scrollsToTop 属性设置为 YES 时，该方法才会触发：进一步询问点击状态条是否有效
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}

// 当点击状态条并且 scrollView 滑动到顶端时
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}

@end

运行效果