show.gif
可以在github下載源碼
https://github.com/orangeLong/XSimplePageControl
已提交cocoapods
podfile里添加 pod 'XSimplePageControl', '~> 0.0.1' 后pod install即可使用 如找不到 可執(zhí)行pod repo update解決
思路很簡單，布局好頁面，點擊某個control或者外部賦值當前選中頁時，選中的control寬度變寬顏色改變，上一個選中的conrtol寬度顏色變成normal，并且按方向向前或者向后改變兩個control之前control的x坐標。
首先定義好所需的各種屬性參數(shù)
/**< 頁數(shù)*/
@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;
/**< 點擊按鈕回調(diào)*/
@property (nonatomic, copy) void(^controlSelect)(XSimplePageControl *pageControl, NSUInteger index);
初始化相關(guān)屬性
- (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不展示
}
初始化布局，需要在設(shè)置相關(guān)屬性的時候重新調(diào)用，改變所有布局。
- (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后執(zhí)行回調(diào)
點擊control或者外部改變currentPage時執(zhí)行這唯一的邏輯。
- (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可以??留言，我會看的。
目前只支持顏色改變，后面應該也會支持圖片的改變啥的，等我更吧。
再次感謝觀眾姥爺，木瓦
