[置顶]iOSDay25之UIScrollView

1. UIScrollView的创建和常用的属性

　1> 概述

　　UIScrollView 是 UIView 的子类, 所以我们可以仿照 UIView 的创建步骤创建一个 UIScrollView

　　UIScrollView 作为所有的滚动视图的基类, 所有学好 UIScrollView 也成为学好 UITableView 和 UICollectionView等滚动视图的前提

　　UIScrollView 主要使用在滚动头条(轮播图),相册等常见的功能里

　2> 常用的属性

 1     // 创建对象
 2     self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
 3     
 4     /**
 5      *  设置
 6      */
 7     self.scrollView.backgroundColor = [UIColor purpleColor];
 8     
 9     // 滚动范围
10     // 横向滚动
11     self.scrollView.contentSize = CGSizeMake(WIDTH * 3, HEIGHT * 3);
12     // 纵向滚动
13 //    self.scrollView.contentSize = CGSizeMake(0, HEIGHT * 3);
14     
15     // 设置3张图片
16     for (NSInteger i = 0; i < 3; i++) {
17         UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * WIDTH, 0, WIDTH, HEIGHT)];
18         
19         imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg", i + 1]];
20         
21         [self.scrollView addSubview:imageView];
22     }
23     
24     // contentOffset偏移量 想让哪张图片最先显示通过设置偏移量完成  直接设置第二个视图显示在屏幕上
25     self.scrollView.contentOffset = CGPointMake(WIDTH, 0);
26     
27     // 可以让ScrollView按页来滚动
28     self.scrollView.pagingEnabled = YES;
29     
30     // 关闭水平方向滚动条
31     self.scrollView.showsHorizontalScrollIndicator = NO;
32     // 关闭垂直方向滚动条
33     self.scrollView.showsVerticalScrollIndicator = NO;
34     
35     // 关闭边界回弹效果
36     self.scrollView.bounces = NO;
37     
38     [self addSubview:self.scrollView];

2. UIScrollView的协议方法

　UIScrollViewDelegate

　当我们签好协议,设置好代理人之后,我们就可以使用 UIScrollView 的协议方法了,他的协议方法分为两部分:

　　① 监控滚动时候的状态　

 1 #pragma mark 监测滚动状态
 2 
 3 // 即将开始滚动的方法
 4 - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
 5 {
 6     NSLog(@"开始滚动了");
 7 }
 8 
 9 // 已经结束滚动
10 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
11 {
12     NSLog(@"滚动结束");
13 }
14 
15 // 即将开始手动拖拽
16 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
17 {
18     NSLog(@"开始拖拽");
19 }
20 
21 // 手动拖拽完成
22 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
23 {
24     NSLog(@"手动拖拽完成");
25 }
26 
27 // 只要滚动就会触发这个方法
28 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
29 {
30     NSLog(@"一直滚动%f", scrollView.contentOffset.x);
31 }

　　② 控制视图的缩放

 1 #pragma mark 视图缩放
 2 
 3 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
 4 {
 5     // 返回缩放的视图
 6     return self.rootView.imageView;
 7 }
 8 
 9 // 缩放完成代理方法,把图片置为中间位置
10 - (void)scrollViewDidZoom:(UIScrollView *)scrollView
11 {
12     self.rootView.imageView.center = self.view.center;
13 }

3. UIScrollView 和 UIPageControl 的结合使用

 代码

RootView.h 主要用于声明 UIScrollView 和 UIPageControl 视图

1 #import <UIKit/UIKit.h>
2 
3 @interface RootView : UIView
4 
5 @property (nonatomic, strong) UIScrollView *scrollView;
6 @property (nonatomic, strong) UIPageControl *pageControl;
7 
8 @end

RootView.m 主要是显示的视图,也就是一个 UIScrollView 和 UIPageControl 视图

 1 #import "RootView.h"
 2 
 3 #define kWidth CGRectGetWidth(self.frame)
 4 #define kHeight CGRectGetHeight(self.frame)
 5 
 6 @implementation RootView
 7 
 8 - (instancetype)initWithFrame:(CGRect)frame
 9 {
10     self = [super initWithFrame:frame];
11     if (self) {
12         // 添加子视图
13         [self addAllViews];
14     }
15     return self;
16 }
17 
18 - (void)addAllViews
19 {
20     // 布局scrollView
21     
22     // 1.创建对像
23     self.scrollView = [[UIScrollView alloc] initWithFrame:self.frame];
24     
25     // 2.定义属性
26     // 设置滚动范围
27     self.scrollView.contentSize = CGSizeMake(kWidth * 5, 0);
28     // 显示5张图片
29     for (int i = 0; i < 5; i++) {
30         UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * kWidth, 20, kWidth, kHeight)];
31         
32         NSString *image = [NSString stringWithFormat:@"%d.jpg", i + 1];
33         
34         imageView.image = [UIImage imageNamed:image];
35         
36         [self.scrollView addSubview:imageView];
37     }
38     
39     // 隐藏水平滚动条
40     self.scrollView.showsHorizontalScrollIndicator = NO;
41     
42     // 使一页一页的滚动
43     self.scrollView.pagingEnabled = YES;
44     
45     // 防止回弹
46     self.scrollView.bounces = NO;
47     
48     // 3.添加到父视图
49     [self addSubview:self.scrollView];
50     
51     // 布局pageControl
52     self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.frame) - 40, kWidth, 40)];
53     
54     self.pageControl.currentPage = 0;
55     
56     self.pageControl.numberOfPages = 5;
57     
58     self.pageControl.backgroundColor = [UIColor grayColor];
59     
60     [self addSubview:self.pageControl];
61 }
62 @end

RootViewController.m 主要是处理事件,比如 UIScrollView 的代理事件 , UIPageControl 的点击事件 和 添加计时器实现自动播放的效果

 1 #import "RootViewController.h"
 2 #import "RootView.h"
 3 
 4 #define kWidth self.view.frame.size.width
 5 
 6 @interface RootViewController ()<UIScrollViewDelegate>
 7 
 8 @property (nonatomic, strong) RootView *rootView;
 9 
10 @end
11 
12 @implementation RootViewController
13 
14 - (void)loadView
15 {
16     self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
17     
18     self.view = self.rootView;
19 }
20 
21 
22 - (void)viewDidLoad {
23     [super viewDidLoad];
24     // Do any additional setup after loading the view.
25     
26     // 4.ScrollView设置代理
27     self.rootView.scrollView.delegate = self;
28     
29     // 添加点击事件
30     [self.rootView.pageControl addTarget:self action:@selector(pageControlAction:) forControlEvents:UIControlEventValueChanged];
31     
32     // 添加计时器,实现自动滚动
33     // TimeInterval 时间戳 ,
34     [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(timerAction:) userInfo:nil repeats:YES];
35 }
36 
37 // 实现定时方法
38 - (void)timerAction:(NSTimer *)timer
39 {
40     NSInteger index = self.rootView.pageControl.currentPage;
41     
42     // 如果不是最后一页,向后移动一页
43     if (self.rootView.pageControl.numberOfPages - 1 != index) {
44         index++;
45         
46     } else { // 如果是最后一页,跳到第一页
47         index = 0;
48     }
49     
50     // 通过index修改scrollView的偏移量
51 //    self.rootView.scrollView.contentOffset = CGPointMake(index * kWidth, 0);
52     
53     [self.rootView.scrollView setContentOffset:CGPointMake(index * kWidth, 0) animated:YES];
54     
55     // 通过index修改pageControl的值
56     self.rootView.pageControl.currentPage = index;
57 }
58 
59 // 点击事件方法
60 - (void)pageControlAction:(UIPageControl *)pageControl
61 {
62     [UIView animateWithDuration:1 animations:^{
63          self.rootView.scrollView.contentOffset = CGPointMake(kWidth * pageControl.currentPage, 0);
64     }];
65 }
66 
67 // 实现代理方法
68 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
69 {
70     // 改变pageControl的当前显示的位置
71     
72     // 获取当前显示的位置
73     CGFloat currentX = self.rootView.scrollView.contentOffset.x;
74     
75     self.rootView.pageControl.currentPage = currentX / kWidth;
76 }