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 }

posted @ 2016-05-08 22:24  维他命11  阅读(157)  评论(0编辑  收藏  举报