自定义pageControl的实现

效果图如下

show.gif

可以在github下载源码
https://github.com/orangeLong/XSimplePageControl
已提交cocoapods
podfile里添加 pod 'XSimplePageControl', '~> 0.0.1' 后pod install即可使用 如找不到 可执行pod repo update解决

思路很简单，布局好页面，点击某个control或者外部赋值当前选中页时，选中的control宽度变宽颜色改变，上一个选中的conrtol宽度颜色变成normal，并且按方向向前或者向后改变两个control之前control的x坐标。

首先定义好所需的各种属性参数

/**< 页数*/
@property (nonatomic) NSUInteger pageNumber;
/**< 当前页*/
@property (nonatomic) NSUInteger currentPage;
/**< 按钮大小*/
@property (nonatomic) CGFloat controlSize;
/**< 选择按钮宽度度*/
@property (nonatomic) CGFloat controlSelectedSize;
/**< 空隙宽度*/
@property (nonatomic) CGFloat controlSpacing;
/**< 动画时长*/
@property (nonatomic) CGFloat animationTime;
/**< 按钮颜色*/
@property (nonatomic, strong) UIColor *controlColor;
/**< 选中颜色*/
@property (nonatomic, strong) UIColor *controlSelectedColor;
/**< 点击按钮回调*/
@property (nonatomic, copy) void(^controlSelect)(XSimplePageControl *pageControl, NSUInteger index);

初始化相关属性

- (void)baseInit
{
    self.pageNumber = 0;
    self.currentPage = 0;
    self.controlSpacing = 4.f;
    self.controlSize = 4.f;
    self.controlSelectedSize = 9.f;
    self.animationTime = 0.25f;
    self.controlColor = RGB(153, 153, 153);
    self.controlSelectedColor = RGB(34, 34, 34);
    //pageNumber默认为0不展示
}

初始化布局，需要在设置相关属性的时候重新调用，改变所有布局。

- (void)initView
{
    if (self.pageNumber < 2) {
        return;
    }
    if (self.frame.size.height < self.controlSize) {
        return;
    }
    [self clearAllView];
    CGFloat totalWidth = (self.controlSpacing + self.controlSize) * (self.pageNumber - 1) + self.controlSelectedSize;
    if (self.frame.size.width < totalWidth) {
        return;
    }
    CGFloat originX = (self.frame.size.width - totalWidth) / 2;
    CGFloat originY = (self.frame.size.height - self.controlSize) / 2;
    for (int i = 0; i < self.pageNumber; i++) {
        UIButton *control = [UIButton buttonWithType:(UIButtonTypeCustom)];
        control.tag = pageControlTag + i;
        CGFloat controlWidth = self.controlSize;
        control.backgroundColor = self.controlColor;
        if (i == self.currentPage) {
            controlWidth = self.controlSelectedSize;
            control.backgroundColor = self.controlSelectedColor;
        }
        control.frame = CGRectMake(originX, originY, controlWidth, self.controlSize);
        control.layer.cornerRadius = self.controlSize / 2;
        [control addTarget:self action:@selector(controlSelected:) forControlEvents:(UIControlEventTouchUpInside)];
        [self addSubview:control];
        originX += (controlWidth + self.controlSpacing);
    }
}
//基本布局 没什么好说的 当pageNumber小于或自身frame太小时不予展示
- (void)controlSelected:(UIButton *)button
{
    NSUInteger index = button.tag - pageControlTag;
    self.currentPage = index;
    if (self.controlSelect) {
        self.controlSelect(self, index);
    }
}
//点击相应的control后执行回调

点击control或者外部改变currentPage时执行这唯一的逻辑。

- (void)changeSelectdWithIndex:(NSUInteger)index
{
    NSUInteger originIndex = self.currentPage;
    UIButton *originBtn = [self viewWithTag:pageControlTag + originIndex];
    UIButton *otherBtn = [self viewWithTag:pageControlTag + index];
  //通过tag获取到当前control和即将选中的control
    [UIView animateWithDuration:self.animationTime animations:^{
        originBtn.backgroundColor = self.controlColor;
        otherBtn.backgroundColor = self.controlSelectedColor;
        //交换颜色
        //只需改变originBtn和otherBtn之间按钮的frame就可以
        for (NSUInteger i = MIN(originIndex, index); i <= MAX(originIndex, index); i++) {
            CGFloat addX = 0.f;
            if (i == MIN(originIndex, index)) {
                addX = 0.f;
                //最左边的按钮不需要改变x
            } else if (originIndex < index) {
                addX = self.controlSize - self.controlSelectedSize;
                //如果originBtn在otherBtn左边 除了originBtn本身 都需要减去大小之间的差值 反之相加
            } else {
                addX = self.controlSelectedSize - self.controlSize;
            }
            CGFloat width = self.controlSize;
            if (i == index) {
                width = self.controlSelectedSize;
                //找到选中的btn width增加 其余的都变成normal就可以了
            }
            UIButton *btn = [self viewWithTag:i + pageControlTag];
            CGRect frame = btn.frame;
            frame.origin.x += addX;
            frame.size.width = width;
            btn.frame = frame;
        }
    }];
}

以上
如果有bug可以留言，我会看的。
目前只支持颜色改变，后面应该也会支持图片的改变啥的，等我更吧。
再次感谢观众姥爷，木瓦