iOS自定義UIPageControl

寫在前面

我就知道會有這一天，之前因為公司的APP彈窗的種類太多，不得不自己寫一個彈窗類，為每一個彈窗型別設定一個類。現在也是因為分頁符的型別太多，不得不自定義。網上的都不符合自己的需求，所以自己寫了一個，貼出來，如果寫的不好希望大家能給修改意見。

程式碼

.h檔案

#import <UIKit/UIKit.h>

typedef enum : NSInteger{
    //自定義pagecontrol的型別
    NKPageControlStyleA,
    NKPageControlStyleB,
}NKPageControlStyle;

@interface NKPageControl : UIPageControl

- (instancetype)initWithStyle:(NKPageControlStyle)pageControlStyle;


@end


複製程式碼

.m檔案

#import "NKPageControl.h"

@interface NKPageControl ()

@property (nonatomic, assign) NKPageControlStyle style;

@end

@implementation NKPageControl

-(instancetype) initWithStyle:(NKPageControlStyle)pageControlStyle
{
    self = [super init];
    
    //在這裡獲取到建立pageControl的種類
    _style = pageControlStyle;
    
    return self;
}

-(void) updateDots
{
    if (_style == NKPageControlStyleA)
    {
        //迴圈獲取每一個小圓點（小圓點的型別是UIView）
        for (int i = 0; i < self.subviews.count; i++)
        {
            if (i == 0)
            {
                //獲取到一個小圓點
                UIView *dot = [self.subviews objectAtIndex:i];
                dot.backgroundColor = [UIColor clearColor];
                //建立imageView放在小圓點上
                UIImageView *imageView;
                if (dot.subviews.count == 0)
                {
                    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, dot.frame.size.width, dot.frame.size.height)];
                    [dot addSubview:imageView];
                }
                else
                {
                    imageView = dot.subviews.firstObject;
                }
                //判斷小圓點是否是當前頁面，根據不同狀態設定不同圖片
                if (i == self.currentPage)
                {
                    imageView.image = [UIImage imageNamed:@"page_main_selected"];
                }
                else
                {
                    imageView.image = [UIImage imageNamed:@"page_main"];
                }
            }
        }
    }
    else if (_style == NKPageControlStyleB)
    {
        //自定義種類    
    }
}

-(void) setCurrentPage:(NSInteger)page
{
    [super setCurrentPage:page];
    //每次設定當前活動的小圓點時，重新配置圖片
    [self updateDots];
}

複製程式碼

使用

    _pageControl = [[NKPageControl alloc] initWithStyle:NKPageControlStyleA];
    //常規設定
    _pageControl.frame = CGRectMake(0 , 0, WIDTH_VIEW, 20);//小圓點控制元件的大小位置
    _pageControl.numberOfPages = 4;//小圓點個數
    _pageControl.currentPage = 0;
    //配置顏色
    //    _pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    //    _pageControl.currentPageIndicatorTintColor = [UIColor lightGrayColor];
    _pageControl.userInteractionEnabled = NO;//關閉與  使用者的互動
    //新增導檢視中
    [self.view addSubview:_pageControl];

複製程式碼

pageControl的圖片型別一樣

如果pageControl的圖片型別一樣的話，可以使用KVC設定圖片，程式碼如下

[pageControl setValue:[UIImage imageNamed:@"image1"] forKeyPath:@"_pageImage"];

[pageControl setValue:[UIImage imageNamed:@"image2"] forKeyPath:@"_currentPageImage"];

複製程式碼