iOS customized PageControl show page number.自定义PageControl，使用页码代替dot-优快云博客

本文介绍了一种使用UIControl子类实现自定义PageControl的方法，该PageControl使用页码而非传统的小圆点进行导航。文中详细介绍了如何通过触摸事件来切换页面，并调整页码显示样式以适应不同的屏幕尺寸。

　　项目中，由于项目经理要求自定义一个PageControl，使用页码代替老式原点来交互。刚开始遍误入歧途，使用了使用UIPageControl的子类来绘制，可是没想到的是，当我重写-(void)drawRect:(CGRect)rect 方法后，并没有清除dot,后来想到了使用UIControl的子类化，It is perfect...,下面附上我的类，高手勿喷。如果可以使用UIPageControl子类化，希望高手不吝赐教，谢谢。

.m file content

- (id)initWithFrame:(CGRect)frame

{

    if (self = [super initWithFrame:frame]) {

        [selfsetBackgroundColor:[UIColorclearColor]];

　　//笔刷宽度

        self.iStrokeWidth = 2;

　　//页码之间间隙

        self.iGapWidth = 10;

　　//直径

        self.iDiameter = 12;

        UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizeralloc] initWithTarget:selfaction:@selector(onTapped:)];

        [self addGestureRecognizer:tapGestureRecognizer];

    }
    return self;
}

- (void)onTapped:(UITapGestureRecognizer*)gesture

{

    CGPoint touchPoint = [gesture locationInView:[gesture view]];
   
    if (touchPoint.x < self.frame.size.width/2)

    {
        // move left

        if (self.currentPage>0)

        {
            self.currentPage -= 1;
        }
    }

    else

    {
        // move right

        if (self.currentPage<self.numberOfPages-1)

        {
            self.currentPage += 1;
        }
    }

    [selfsetNeedsDisplay];

    [selfsendActionsForControlEvents:UIControlEventValueChanged];

}

- (void)drawRect:(CGRect)rect

{
    CGContextRef context = UIGraphicsGetCurrentContext();

    

    CGContextSetLineWidth(context, self.iStrokeWidth);

    int gap = self.iGapWidth;

    float _diameter = self.iDiameter - 2*self.iStrokeWidth;

    int total_width = self.numberOfPages*_diameter + (self.numberOfPages-1)*gap;

    //5*8+4*10 80

    if (total_width>self.frame.size.width)

{

while (total_width>self.frame.size.width)

{

_diameter -= 2;

gap = _diameter + 2;

while (total_width>self.frame.size.width)

{

gap -= 1;

total_width = self.numberOfPages*_diameter + (self.numberOfPages-1)*gap;

if (gap==2)

{
break;
total_width = self.numberOfPages*_diameter + (self.numberOfPages-1)*gap;

}

}
if (_diameter==2)

{
break;

total_width = self.numberOfPages*_diameter + (self.numberOfPages-1)*gap;
}

}

}
    for (int i=0; i<self.numberOfPages; i++)

{
        int _currentPageDiameter = self.iDiameter;
        int x = (self.frame.size.width-total_width)/2 + i*(_diameter+gap) - (_currentPageDiameter-_diameter)/2;

        if (i==self.currentPage)

        {
            CGContextSetRGBFillColor(context, 138 / 255.0, 83 / 255.0, 18 / 255.0, 1.0);

            CGContextFillEllipseInRect(context, CGRectMake(x,(self.frame.size.height-_currentPageDiameter)/2,_currentPageDiameter,_currentPageDiameter));

            CGContextSetRGBStrokeColor(context, 138 / 255.0, 83 / 255.0, 18 / 255.0, 1.0);

            CGContextStrokeEllipseInRect(context, CGRectMake(x,(self.frame.size.height-_currentPageDiameter)/2,_currentPageDiameter,_currentPageDiameter));

        }

        else

        {
                CGContextSetRGBFillColor(context, 138 / 255.0, 83 / 255.0, 18 / 255.0, 1.0);

                CGContextSetRGBStrokeColor(context, 138 / 255.0, 83 / 255.0, 18 / 255.0, 1.0);

                CGContextStrokeEllipseInRect(context, CGRectMake(x,(self.frame.size.height-_currentPageDiameter)/2,_currentPageDiameter,_currentPageDiameter));
        }

        NSString *pageNumber = [NSString stringWithFormat:@"%i", i+1];

        CGContextSetFillColorWithColor(context, [[UIColorblackColor] CGColor]);

        [pageNumber drawInRect:CGRectMake(x,(self.frame.size.height-_currentPageDiameter)/2-1,_currentPageDiameter,_currentPageDiameter) withFont:[UIFontsystemFontOfSize:_currentPageDiameter-2] lineBreakMode:UILineBreakModeCharacterWrapalignment:UITextAlignmentCenter];

    }
}

调用时，和系统控件完全一样，同样可以发生UIControlValueChanged方法

[self.iPageControladdTarget:selfaction:@selector(pageValueChanged:) forControlEvents:UIControlEventValueChanged];

。。。

self.iPageControl.numberOfPages = self.iPagesCount;

self.iPageControl.currentPage = 0;

效果图