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可以👇留言，我会看的。
目前只支持颜色改变，后面应该也会支持图片的改变啥的，等我更吧。
再次感谢观众姥爷，木瓦
