最近看見有個APP的圖片瀏覽頁面的每個pageControl小圓點就是當(dāng)前的scrollerview的一張圖片,覺得很炫,于是就寫了一個自定義的pageControl力求達(dá)到這樣的效果,現(xiàn)在做完了,我想分享給大家,需要的朋友可以看看,好了,廢話不多說,先上圖.

狙擊王,哈哈

這里我用了海賊王的7張圖片,可以看見下面有7個pageControl,而且都是當(dāng)前scrollerview的圖片,怎么做呢?其實很簡單,接下來上代碼.
XMHPageControl.h
這個是我自定義的pageControl頭文件.

#import <UIKit/UIKit.h>

@interface XMHPageControl : UIView

//聲明pageControl點的樣式枚舉
typedef enum : NSInteger{
    /**
     默認(rèn)類型:圓形
     */
    XMHPageControlStyleDefaoult = 0,
    /**
     正方形
     */
    XMHPageControlStyleSquare,
    /**
     <<<縮略圖>>>!!!
     */
    XMHPageControlStyleImages,
}XMHPageControlStyle;

@property(nonatomic, assign)NSInteger pageNumber;//點的個數(shù)
@property(nonatomic, assign)CGFloat pageSpace;//點的間隔
@property(nonatomic, strong)UIColor *pageBackgroundColor;//點的背景顏色
@property(nonatomic, strong)UIColor *selectedColor;//選中的背景色
@property(nonatomic, assign)NSInteger currentPageNumber;//當(dāng)前點擊的pageNumber
@property(nonatomic, assign)XMHPageControlStyle pageStyle;//當(dāng)前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;//默認(rèn)的點的空隙
        _pageStyle = pageStyle;
        _currentPageNumber = 0;
        _imageArray = [NSMutableArray arrayWithArray:imageArray];
        
    }
    return self;
}

#pragma mark 重寫pageNumber的setter方法
-(void)setPageNumber:(NSInteger)pageNumber
{
    if (_pageNumber != pageNumber) {
        _pageNumber = pageNumber;
        //創(chuàng)建page小點
        //1.獲取當(dāng)前對象的寬
        CGFloat myWidth = self.frame.size.width;
        CGFloat pointWidth = ( myWidth -  (_pageNumber - 1) * _pageSpace) / _pageNumber;
        //2.循環(huán)創(chuàng)建圖片,添加到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];
        }
        //設(shè)置被選中的顏色和被選中的點
        UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
        imageView.backgroundColor = _selectedColor;
    }
}
#pragma mark 設(shè)置背景顏色方法
-(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 設(shè)置當(dāng)前被選中的下標(biāo)(currentPageNumber)
-(void)setCurrentPageNumber:(NSInteger)currentPageNumber
{
    if (_currentPageNumber != currentPageNumber) {
        
        _currentPageNumber = currentPageNumber;
        //判斷當(dāng)前圖片是否已經(jīng)存在(即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);
  //當(dāng)翻頁的時候pageControl會有個放大縮小的動動畫
            }];
        }
    }
}

@end

在代碼里都有詳細(xì)的注釋,相信大家可以理解吧

在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)設(shè)置滾動的范圍(contentSize只負(fù)責(zé)大小)
    _scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 7, self.view.frame.size.height);
    //2)設(shè)置初始的偏移量
    _scrollView.contentOffset = CGPointMake(0, 0);//坐標(biāo)是相對于滾動視圖的
    //3)設(shè)置整頁滾動
    _scrollView.pagingEnabled = YES;
    //4)隱藏(顯示)滾動條
    _scrollView.showsHorizontalScrollIndicator = NO;//showsHorizontalScrollIndicator橫向滾動條,showsVerticalScrollIndicator為縱向滾動條,默認(rèn)值為yes,顯示.
    //5)關(guān)閉回彈
    _scrollView.bounces = NO;//默認(rèn)值為yes,允許回彈
    //6)是否允許滾動
    //_scrollView.scrollEnabled = NO;//停留在某一視圖不能滾動
    
    //7)設(shè)置代理
    _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

做的還是不太好,大家可以再改進(jìn)改進(jìn).
我已經(jīng)將代碼上傳到github上面了,有興趣的朋友可以去下來看看.

以后如果遇到有需要分享的東西我會不定期給大家分享,謝謝支持!