前言

最近代码写的头疼于是我来写文章了 233333333

ScrollView是什么？

ScrollView顾名思义就是可以滚动的View 因此 ScrollView的核心思想就是在有限的屏幕大小范围内尽可能的展示出你想要展示的内容非常常见的使用场景就是我们在用的微博微信等

ScrollView的创建

ScrollView的创建和其他的UI控件的创建过程都是一样的无非就是
1.实例化一个ScrollView
2.设置Frame
3.将ScrollView添加到View上使其在屏幕上可以显示出来
话都说到这里了那代码想必大家也都应该知道要怎么写出来了对不对！

     //实例化 并设置frame
     UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 40, self.view.frame.size.width, 200)];
     scrollView.backgroundColor = [UIColor grayColor];
     //添加ScrollView到屏幕上
    [self.view addSubview:scrollView];

这里我设置了一下ScrollView的背景颜色能够帮助大家区分父视图和ScrollView的区别既然已经实例化了也已经添加了那么我们来看看效果吧

Paste_Image.png

这个时候你就会发现 Excuse me？说好的滚动的View呢这不是和我添加个普通的View一模一样吗？同学莫慌我来给你讲下一个点也就是ScrollView中常见的三个属性

ScrollView中常见的三个属性

1.ScrollView.frame
这个frame和其他UI的frame并没有任何区别都是把我们的UI绘制在屏幕上让他出现在你想要它出现的位置

2.ScrollView.contentSize
contentSize指的是ScrollView的内容范围你需要包含的内容有多大 contentSize的大小就是多少这个就是刚才上文没有提到的一个东西也就是为什么ScrollView不能滚动的原因之前的代码中我们并没有设置这么个属性因此默认情况下是0 我们可以打印出来看看contentSize是一个CGSize的结构体里面包含了宽和高

 NSLog(@"%.2f  %.2f",scrollView.contentSize.width,scrollView.contentSize.height);

加入这么一行代码你会发现控制台输出的结果均为0 因此也就可以解释为什么ScrollView不会滚动因为内容都没有我还滚动个🔨啊同时还会有一种情况导致ScrollView无法滚动那就是当ScrollView的frame大于或者等于ScrollView的contentSize的情况下会导致无法滚动有兴趣的同学可以试试看原理就是你想啊当我要展示的内容和我的实际内容一样大的时候我是不是不用滚就能全部都展示出来了或者我要展示的内容比我的实际内容还要大那我还滚动个啥啊不用滚是不是就可以直接展示出来了？在本文中我假设我们需要显示五个屏幕宽度的内容高度为200

    scrollView.contentSize = CGSizeMake(5 * self.view.frame.size.width, 200);

加入这行代码以后来看看效果吧会发现ScrollView现在已经可以滚动了

QQ20170426-004501-HD.gif

3.ScrollView.contentOffSet
contentOffSet指的是ScrollView的偏移量通俗点说就是ScrollView滚动了多少范围因为既然是能滚动的那肯定可以知道它滚动到了哪里对吧这个先暂时不多做表述后面提到ScrollView的代理的时候我再来详细说一说

ScrollView的其他简单属性

1.indicatorStyle
刚才在上面的gif动图中相信有细心的同学肯定看见了在设置完了ScrollView的内容范围以后 ScrollView的底部出现了一个黑色的小横条那这个横条是什么呢其实就是一个指示条告诉用户这个滚动页已经滚动到了哪里
当在Xcode敲出ScrollView.indicatorStyle 你会发现咦我不知道要设置成啥样啊这个时候我们就需要进去indicatorStyle里面看看都有啥了贴心的苹果爸爸告诉我们帮我们做好了不同三种风格的枚举非常简单我就直接贴出来了大家可以根据需要自行设置（不过我一般都不改 23333)

typedef NS_ENUM(NSInteger, UIScrollViewIndicatorStyle) {
    UIScrollViewIndicatorStyleDefault,     // black with white border. good against any background
    UIScrollViewIndicatorStyleBlack,       // black only. smaller. good against a white background
    UIScrollViewIndicatorStyleWhite        // white only. smaller. good against a black background
};

2.bounces
这个也非常简单非常好理解在上面的Gif中仔细观察会发现当ScrollView滑动到最边缘的时候 indicator会像弹簧一样先压缩到最小然后弹出来这个就是我们的bounces属性 bounces是一个BOOL值默认为YES 当然啦你也可以设置为NO 根据实际项目需要设置相对应的值就可以了

3.showsHorizontalScrollIndicator & showsHorizontalScrollIndicator
有的用户也许会觉得每次滚来滚去都要有个条条在那儿看的心烦那是不是可以取消掉呢贴心的苹果爸爸也帮我们准备好了这个属性就是showsHorizontalScrollIndicator 顾名思义翻译一下就是展示水平指示条默认的情况下为YES 既然有水平肯定也有垂直（showsHorizontalScrollIndicator）这里和bounces一样大家根据项目需要自行设置

实战

介绍完了上面ScrollView的基础以后我们来提一个最简单的需求产品的需求图如下

Paste_Image.png

假设我们要在距离屏幕顶部距离为40的时候显示五个屏幕宽度高度为200的内容并且在用户滑动到第三个屏幕宽的时候展示一个Label label的内容为Hello ScrollView

思路

根据上图可以得出一个结论那么我们的ScrollView的contentSize为 5 *当前屏幕的宽度高度为200 同时ScrollView.frame的X轴为0 Y轴为40 宽为当前屏幕的宽高为200 还有个关键点在于Label的加载首先需要弄清楚层级关系 Label是加载到ScrollView上而不是self.View上其次 Label的X应该是多少 Y应该是多少看图不难得出当用户滑动到第三个屏幕宽度的时候才出现这个Label 那么展示第一个内容的时候 X为0 因此不难得出 Label的X轴就应该是 2 *当前屏幕的宽度好了 Y轴由于没有说我们就设为scrollView的高度吧 Label的宽高也没有提到那就假设和scrollView当前展示的大小一致吧思路捋顺了就上代码！

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(1 *self.view.frame.size.width, 0, 414, 200)];
    label.numberOfLines = 0;
    label.lineBreakMode = NSLineBreakByWordWrapping;
    label.text = @"Hello\nScrollView";
    label.font = [UIFont systemFontOfSize:15.0];
    label.textAlignment = NSTextAlignmentCenter;
    label.backgroundColor = [UIColor whiteColor];
    label.textColor = [UIColor colorWithRed:0.01 green:0.66 blue:0.73 alpha:1.00];
    [scrollView addSubview:label];

来看看效果吧