自定义pageControl

最近看见有个APP的图片浏览页面的每个pageControl小圆点就是当前的scrollerview的一张图片,觉得很炫,于是就写了一个自定义的pageControl力求达到这样的效果,现在做完了,我想分享给大家,需要的朋友可以看看,好了,废话不多说,先上图.

狙击王,哈哈

这里我用了海贼王的7张图片,可以看见下面有7个pageControl,而且都是当前scrollerview的图片,怎么做呢?其实很简单,接下来上代码.
XMHPageControl.h
这个是我自定义的pageControl头文件.

#import <UIKit/UIKit.h>

@interface XMHPageControl : UIView

//声明pageControl点的样式枚举
typedef enum : NSInteger{
    /**
     默认类型:圆形
     */
    XMHPageControlStyleDefaoult = 0,
    /**
     正方形
     */
    XMHPageControlStyleSquare,
    /**
     <<<缩略图>>>!!!
     */
    XMHPageControlStyleImages,
}XMHPageControlStyle;

@property(nonatomic, assign)NSInteger pageNumber;//点的个数
@property(nonatomic, assign)CGFloat pageSpace;//点的间隔
@property(nonatomic, strong)UIColor *pageBackgroundColor;//点的背景颜色
@property(nonatomic, strong)UIColor *selectedColor;//选中的背景色
@property(nonatomic, assign)NSInteger currentPageNumber;//当前点击的pageNumber
@property(nonatomic, assign)XMHPageControlStyle pageStyle;//当前pageControl样式
@property(nonatomic, strong)NSMutableArray *imageArray;
//初始化方法
-(instancetype)initWithFrame:(CGRect)frame pageStyle:(XMHPageControlStyle)pageStyle withImageArray:(NSMutableArray *)imageArray;

@end

接下来是我自定义的.m文件

#import "XMHPageControl.h"

@implementation XMHPageControl

-(instancetype)initWithFrame:(CGRect)frame pageStyle:(XMHPageControlStyle)pageStyle withImageArray:(NSMutableArray *)imageArray
{
    self = [super initWithFrame:frame];
    if (self) {
        _pageBackgroundColor = [UIColor grayColor];
        _selectedColor = [UIColor blackColor];
        _pageSpace = 10;//默认的点的空隙
        _pageStyle = pageStyle;
        _currentPageNumber = 0;
        _imageArray = [NSMutableArray arrayWithArray:imageArray];
        
    }
    return self;
}

#pragma mark 重写pageNumber的setter方法
-(void)setPageNumber:(NSInteger)pageNumber
{
    if (_pageNumber != pageNumber) {
        _pageNumber = pageNumber;
        //创建page小点
        //1.获取当前对象的宽
        CGFloat myWidth = self.frame.size.width;
        CGFloat pointWidth = ( myWidth -  (_pageNumber - 1) * _pageSpace) / _pageNumber;
        //2.循环创建图片,添加到self上
        for (NSInteger i = 0; i < _pageNumber; i++) {
            //每个小点
            UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake((_pageSpace + pointWidth) * i, 0, pointWidth, pointWidth)];
            
            switch (_pageStyle) {
                case XMHPageControlStyleDefaoult:
                    imageView.layer.cornerRadius = pointWidth / 2.0;
                    imageView.layer.masksToBounds = YES;
                    imageView.image = _imageArray[i];
                    break;
                    case XMHPageControlStyleSquare:
                    break;
                    case XMHPageControlStyleImages:
                    break;
                default:
                    break;
            }
            //为每张图添加tag值
            [  imageView setTag:1000 + i ];
            imageView.backgroundColor = _pageBackgroundColor;
            [self addSubview:imageView];
        }
        //设置被选中的颜色和被选中的点
        UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
        imageView.backgroundColor = _selectedColor;
    }
}
#pragma mark 设置背景颜色方法
-(void)setPageBackgroundColor:(UIColor *)pageBackgroundColor
{
    _pageBackgroundColor = pageBackgroundColor;
    //子视图不空的情况下遍历修改每张图的颜色
    if (self.subviews.count != 0) {
        for (UIImageView *imageView in self.subviews) {
            imageView.backgroundColor = _pageBackgroundColor;
        }
        //被选中的颜色,防止被覆盖
        UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
        imageView.backgroundColor = _selectedColor;
    }
}

#pragma mark 被选中的颜色
-(void)setSelectedColor:(UIColor *)selectedColor
{
    if (_selectedColor != selectedColor) {
        _selectedColor = selectedColor;
        //有图的情况下
        if (self.subviews.count) {
            //修改被选中的那张图片的颜色
            UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
            imageView.backgroundColor = _selectedColor;
        }
    }
}
#pragma mark 设置当前被选中的下标(currentPageNumber)
-(void)setCurrentPageNumber:(NSInteger)currentPageNumber
{
    if (_currentPageNumber != currentPageNumber) {
        
        _currentPageNumber = currentPageNumber;
        //判断当前图片是否已经存在(即pageNumber是否为0)
        if (self.subviews.count) {
            //改变没有被选中的颜色
            for (UIImageView *imageView in self.subviews) {
                imageView.backgroundColor = _pageBackgroundColor;
            }
            UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
            imageView.backgroundColor = _selectedColor;
            [UIView animateWithDuration:.3 animations:^{
                imageView.transform = CGAffineTransformMakeScale(1.6, 1.6);
            } completion:^(BOOL finished) {
                imageView.transform = CGAffineTransformMakeScale(1.0, 1.0);
  //当翻页的时候pageControl会有个放大缩小的动动画
            }];
        }
    }
}

@end

在代码里都有详细的注释,相信大家可以理解吧

在viewcontroller里使用自定义的pageControl了

 

#import "ViewController.h"
#import "XMHPageControl.h"
@interface ViewController ()<UIScrollViewDelegate>
@property(nonatomic, strong)XMHPageControl *pageControl;
@property(nonatomic, strong)UIScrollView *scrollView;
@property(nonatomic, strong)NSMutableArray *imageArray;
@end

@implementation ViewController

-(void)loadView
{
    [super loadView];
    _imageArray = [NSMutableArray array];
    for (NSInteger i = 1; i < 8; i++) {
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"h%ld.jpg",i]];
        [_imageArray addObject:image];
    }
    //初始化滚动视图
    _scrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];

    
    //1)设置滚动的范围(contentSize只负责大小)
    _scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 7, self.view.frame.size.height);
    //2)设置初始的偏移量
    _scrollView.contentOffset = CGPointMake(0, 0);//坐标是相对于滚动视图的
    //3)设置整页滚动
    _scrollView.pagingEnabled = YES;
    //4)隐藏(显示)滚动条
    _scrollView.showsHorizontalScrollIndicator = NO;//showsHorizontalScrollIndicator横向滚动条,showsVerticalScrollIndicator为纵向滚动条,默认值为yes,显示.
    //5)关闭回弹
    _scrollView.bounces = NO;//默认值为yes,允许回弹
    //6)是否允许滚动
    //_scrollView.scrollEnabled = NO;//停留在某一视图不能滚动
    
    //7)设置代理
    _scrollView.delegate = self;
    
    //添加图片
    for (NSInteger i = 1; i <= 7; i++) {
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake((i - 1) * self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height)];
        //为每个imageView添加图片
        imageView.image = _imageArray[i - 1];
        [_scrollView addSubview:imageView];
    }
    
    [self.view addSubview:_scrollView];

}

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];
    _pageControl = [[XMHPageControl alloc]initWithFrame:CGRectMake(50, 600, 300, 20) pageStyle:XMHPageControlStyleDefaoult withImageArray:_imageArray];
    _pageControl.selectedColor = [UIColor blackColor];
    _pageControl.pageBackgroundColor = [UIColor brownColor];
    _pageControl.pageNumber = 7;
    _pageControl.currentPageNumber = 0;

    [self.view addSubview:_pageControl];
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
 _pageControl.currentPageNumber =   _scrollView.contentOffset.x / self.view.frame.size.width;
}

-(void)changePage
{
    if (_pageControl.currentPageNumber == _pageControl.pageNumber - 1) {
        _pageControl.currentPageNumber = 0;
    }
    else
    {
    _pageControl.currentPageNumber++;
    }
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

做的还是不太好,大家可以再改进改进.
我已经将代码上传到github上面了,有兴趣的朋友可以去下来看看.

以后如果遇到有需要分享的东西我会不定期给大家分享,谢谢支持!