IOS中UIScrollView和UIPageControl的联合运用

背景：

现在很多app中都回运用到这样的技巧：横向地切换图片，图片下方有若干点指示当前图片是第几页。我们运用UIScrollView和UIPageControl可以达到这样的效果。

以下，结合代码简要介绍下怎么实现：

1.首先是在要展示该效果的viewControl中添加这个两个视图为成员变量

@interface MyViewController ()<UIScrollViewDelegate>

@property(nonatomic ,retain)UIScrollView *scrlView;

@property(nonatomic ,retain)UIPageControl *pageCon;

@end

2.然后再viewDidLoad中设置好视图的大小和位置，以及一些重要设置（看注释）

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view.

    CGRect frame = [[UIScreen mainScreen]bounds];

    //scrollView

    _scrlView = [[UIScrollView alloc]init];

    [_scrlView setFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];

    [_scrlView setContentSize:CGSizeMake(frame.size.width*3, frame.size.height)];//内容大小设为3倍frame.size.width保证可以滚动

    [_scrlView setScrollEnabled:YES];//允许滚动

    [_scrlView setPagingEnabled:YES];//另scrollView以页的形式滚动，每次滑动一个屏幕的宽度的距离

    [_scrlView setShowsHorizontalScrollIndicator:NO];//隐藏滚动条

    _scrlView.delegate = self;//协议设为该类

    _scrlView.backgroundColor = [UIColor blueColor];

    [self.view addSubview:_scrlView];

    //scrollView上的三块view，分别用于代替用于滚动展示的三个图片

    UIView *v1 = [[UIView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];

    v1.backgroundColor = [UIColor redColor];

    [_scrlView addSubview:v1];

    

    UIView *v2 = [[UIView alloc]initWithFrame:CGRectMake(frame.size.width, 0, frame.size.width, frame.size.height)];

    v2.backgroundColor = [UIColor greenColor];

    [_scrlView addSubview:v2];

    

    UIView *v3 = [[UIView alloc]initWithFrame:CGRectMake(frame.size.width*2, 0, frame.size.width, frame.size.height)];

    v3.backgroundColor = [UIColor blueColor];

    [_scrlView addSubview:v3];

    

    //pageControl

    _pageCon = [[UIPageControl alloc]init];

    [_pageCon setNumberOfPages:3];//设置点指示器的个数

    _pageCon.currentPage = 0;//设置点指示器当前指示的点

    [_pageCon setFrame:CGRectMake( 0, frame.size.height-16, frame.size.width, 16)];

    [_pageCon addTarget:self action:@selector(pageChange) forControlEvents:UIControlEventValueChanged];//作为UIControl的子类可以接收valueChange的事件，此处用于：当用户手动点击点指示器的时候系统会自动改变点的位置，我们就根据这个改变图片

    [self.view addSubview:_pageCon];

    //_pageCon.backgroundColor = [UIColor yellowColor];

    self.view.backgroundColor = [UIColor whiteColor];

}

3._pageCon的valueChange触发的事件函数

- (void)pageChange{

    CGRect frame = [[UIScreen mainScreen]bounds];

    //根据_pageCon.currentPage指示器当前指示点的下标来改变_scrlView的起点坐标，从而达到切图的效果

    switch (_pageCon.currentPage) {

        case 0:

            [_scrlView setFrame:CGRectMake(0, 0, frame.size.width*3, frame.size.height)];

            break;

            

        case 1:

            [_scrlView setFrame:CGRectMake(-frame.size.width, 0, frame.size.width*3, frame.size.height)];

            break;

            

        case 2:

            [_scrlView setFrame:CGRectMake(-2*frame.size.width, 0, frame.size.width*3, frame.size.height)];

            break;

            

        default:

            break;

    }

}

4.实现UIScrollView的协议函数

//scrollView的delegate，记得设置_scrlView.delegate = self

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    NSLog(@"in");

    [_pageCon setCurrentPage:_scrlView.contentOffset.x/[[UIScreen mainScreen]bounds].size.width];//计算结果完美地符合下标~

}

到这里，就可以实现我们想要的效果了~