IOS UIPageControl

简介

UIPageControl是一个比较简单的控件，该控件由N个小圆点组成，每个圆点可以表示一个页面，当前页面以高亮的圆点显示。默认情况下，UIPageControl可以与用户交互，并且监测当前值的变化(UIControlEventValueChanged)，继而调用自定义的方法来实现界面的切换。我们在许多常用App中的图片轮播器中都能见到它的身影。

属性和方法

设置总页数
@property(nonatomic) NSInteger numberOfPages;
设置当前页，当前页的颜色会突出显示
@property(nonatomic) NSInteger currentPage;
设置圆点普通状态时的颜色
@property(nullable, nonatomic,strong) UIColor *pageIndicatorTintColor;
设置圆点为高亮时的颜色
@property(nullable, nonatomic,strong) UIColor *currentPageIndicatorTintColor;
返回UIPageControl控件的大小
-(CGSize)sizeForNumberOfPages:(NSInteger)pageCount;

点击UIPageControl发生Value Changed事件

由于UIPageControl继承于UIControl，因此它可以继承UIControl的属性和方法，当用户单击UIPageContol控件的时候，会触发UIControlEventValueChanged事件，然后我们就可以调用相对应的方法进行进一步的逻辑处理。例如，下方的代码中，当修改pageControl对象的值时，会调用updateDisplay:方法。

[self.pageControl addTarget:self action:@selector(updateDisplay:) forControlEvents:UIControlEventValueChanged];

//实现change方法
- (void) updateDisplay:(UIPageControl *) pageControl{
    NSLog(@"更新界面显示");
}

实际使用，图片轮播器

APP的常用组件，常用于广告播放或者重点新闻的图文演示。图片轮播器通常情况下由UIScrollView（滑动效果）,UIImageView（显示图片）,UIPageControl（显示当前是第几个图片，也可以切换）三个组件组合而成。

通常APP的轮播器图片都来自服务器，以便可以随时可以更新其中的内容。我们这里放四张本地图片，原理是一样的。
可以通过点击切换图片，也可以通过计时器完成。

MyScrollView.m

//
//  MyScrollView.m
//  UIPageControl_base
//
//  Created by on 2019/7/15.
//  Copyright © 2019 Shae. All rights reserved.
//

#import "MyScrollView.h"

@implementation MyScrollView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        CGFloat contentSizeWidth=[UIScreen mainScreen].bounds.size.width*4;
        //大小，也可以设置为图片高度
        self.contentSize=CGSizeMake(contentSizeWidth, 0);
        //位置
        self.contentOffset=CGPointZero;
        
        self.pagingEnabled=YES;
        self.showsVerticalScrollIndicator=NO;
        self.showsHorizontalScrollIndicator=NO;
        //取消弹簧效果
        self.bounces=NO;
        self.clipsToBounds=NO;
        
        [self addImageView];
    }
    return self;
}
- (void)addImageView{
    for (int i=0; i<4; i++) {
        NSString *imageName=[NSString stringWithFormat:@"%d",i];
        UIImage *image=[UIImage imageNamed:imageName];
        //获取图片宽高
        CGFloat imageWidth=image.size.width;
        CGFloat imageHeight=image.size.height;
        CGFloat imageWHRatio=imageWidth/imageHeight;
        CGFloat screenWidth=[UIScreen mainScreen].bounds.size.width;
        CGFloat imageViewX=i*screenWidth;
        //根据图片的实际宽度计算显示出来后图片的高度（不失真）,按图片的比例计算高度
        CGFloat imageViewHeight=screenWidth/imageWHRatio;
        UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(imageViewX, 0, screenWidth, imageViewHeight)];
        imageView.image=image;
        //添加图片到scrollView
        [self addSubview:imageView];
    }
}
@end

ViewController.m

//
//  ViewController.m
//  UIPageControl_base
//
//  Created by  on 2019/7/15.
//  Copyright © 2019 Shae. All rights reserved.
//

#import "ViewController.h"
#import "MyScrollView.h"
@interface ViewController ()
@property(nonatomic,strong)MyScrollView *myScrollView;
@property(nonatomic,strong)UIPageControl *pageControl;
@property(nonatomic,strong)NSTimer *timer;
@property int currentImageIndex;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.myScrollView];
    [self.view addSubview:self.pageControl];
    //应用一启动就立即启动定时器
    self.timer=[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(changeImage) userInfo:nil repeats:YES];
    
}
- (MyScrollView *)myScrollView{
    if (_myScrollView==nil) {
        //获取图片的高度
        UIImage *image=[UIImage imageNamed:@"0"];
        CGFloat imageWidth=image.size.width;
        CGFloat imageHeight=image.size.height;
        CGFloat imageWHRatio=imageWidth/imageHeight;
        CGFloat screenWidth=[UIScreen mainScreen].bounds.size.width;
        CGFloat imageViewHeight=screenWidth/imageWHRatio;
        _myScrollView=[[MyScrollView alloc]initWithFrame:CGRectMake(0, 20, screenWidth, imageViewHeight)];
    }
    return _myScrollView;
}

- (UIPageControl *)pageControl{
    if(_pageControl==nil){
        _pageControl=[[UIPageControl alloc]init];
        _pageControl.frame=CGRectMake(0, 215, [UIScreen mainScreen].bounds.size.width, 37);
        _pageControl.numberOfPages=4;
        _pageControl.currentPage=0;
        _pageControl.pageIndicatorTintColor=[UIColor lightGrayColor];
        _pageControl.currentPageIndicatorTintColor=[UIColor blackColor];
        //监控用户用于pageController的点击事件
        [_pageControl addTarget:self action:@selector(clickPageControl) forControlEvents:UIControlEventValueChanged];
    }
    return _pageControl;
}
-(void)clickPageControl{
    //*********
    //根据点击的pageControl的值，来更新scrollview的contentoffset
    CGFloat x = [UIScreen mainScreen].bounds.size.width * self.pageControl.currentPage;
    [self.myScrollView setContentOffset:CGPointMake(x, 0) animated:YES];
    //更新一下currentImageIndex的值
    self.currentImageIndex = (int)self.pageControl.currentPage;
}
- (void)changeImage {
    //********
    //更新pageControl的值
    self.pageControl.currentPage = self.currentImageIndex;
    //计算每次偏移的x值
    CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat x = screenWidth * self.currentImageIndex++;
    [self.myScrollView setContentOffset:CGPointMake(x, 0) animated:YES];
    //重新更新index的值
    if (self.currentImageIndex == 4) self.currentImageIndex = 0;
}
@end

代码：https://github.com/ShaeZhuJiu/UIPageControl_base.git