效果图
第一次转gif图，还有水印，时间有点紧，见谅见谅
Untitled1.gif
一丢丢废话
首先，我的标签栏标题比较少，就直接采用UIView来实现的，没有用UIScrollView。注意：下面的内容区还是有用UIScrollView的。具体的在UIView上面添加按钮和指示器的代码就不贴出来辣各位大神的眼睛了。
思路
直接进入正题，先说下我的思路。
思路比较简单，就是通过UIScrollView的代理方法在两个按钮转换的“过程中”，做点处理。
代码
滚动视图用了三个代理方法
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
NSInteger index = scrollView.contentOffset.x / SCREEN.width;
UITableViewController *vc = self.childViewControllers[index];
vc.view.x = scrollView.contentOffset.x;
vc.view.y = 0;
vc.view.height = scrollView.height;
[scrollView addSubview:vc.view];
}
// UIScrollView的代理方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self scrollViewDidEndScrollingAnimation:scrollView];
NSInteger index = scrollView.contentOffset.x / scrollView.width;
// 按钮的点击方法
[self buttonClick:self.titleView.subviews[index]];
// 设置上一个按钮的索引
self.buttonIndex = index;
}
// UIScrollView的代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
_buttonClick = YES;
/***************** 指示器位置渐变的代码 ******************/
CGFloat contentOffX = scrollView.contentOffset.x / SCREEN.width;
// 第一个按钮和最后一个按钮，不执行其他代码，否则会造成按钮数组越界
if (contentOffX < 0 || contentOffX > _items.count - 1) {
return;
}
// index表示选中按钮的索引(从0开始的)
NSInteger index = (NSInteger)contentOffX;
// 可以理解为按钮转换之间的进度
CGFloat progress = contentOffX - index;
// 指示器(即按钮下面的那条红色短线)的x值和宽度
CGFloat indicatorW;
CGFloat indicatorX;
// _items按钮数组
if (index == _items.count - 1) {
// _items[index].titleLabel.x表示按钮中文字的x值
indicatorX = _items[index].titleLabel.x + _items[index].width * index;
indicatorW = _items[index].titleLabel.width;
} else {
// 这边是开始渐变的代码，只要是指示器的x和宽度随着progress的变化而变化
indicatorX = (_items[index].titleLabel.x + _items[index].width * index) + (_items[index + 1].centerX - _items[index].centerX) * progress;
indicatorW = _items[index].titleLabel.width + (_items[index + 1].titleLabel.width - _items[index].titleLabel.width) * progress;
}
// 重新指定指示器的frame，或者可以直接重新指定指示器的x值和宽度
self.indicatorView.frame = CGRectMake(indicatorX, self.indicatorView.y, indicatorW, self.indicatorView.height);
/***************** 按钮颜色渐变的代码 ******************/
// fromColorRGB表示选中按钮的RGB数组，toColorRGB表示普通按钮的RGB数组
NSArray *fromColorRGB = @[@(255),@(0),@(40)];
NSArray *toColorRGB = @[@(180),@(180),@(180)];
// 防止按钮数组越界的判断
if (contentOffX > _items[index].tag) {
// 往按钮索引大的方向，progress > 0.9只是大概的判断，self.buttonIndex表示上一个按钮的索引
if (progress > 0.9 && contentOffX > self.buttonIndex) {
for (UIButton *btn in _items) {
[btn setTitleColor:ColorRGB(180, 180, 180) forState:UIControlStateNormal];
}
[_items[index + 1] setTitleColor:ColorRGB(255, 0, 0) forState:UIControlStateNormal];
} else if (progress < 0.1 && contentOffX < self.buttonIndex) {
// 往按钮索引小的方向
for (UIButton *btn in _items) {
[btn setTitleColor:ColorRGB(180, 180, 180) forState:UIControlStateNormal];
}
[_items[index] setTitleColor:ColorRGB(255, 0, 0) forState:UIControlStateNormal];
} else {
// 按钮颜色渐变的代码，让颜色跟着progress变化
[_items[index] setTitleColor:[self colorWithFromColorRGB:fromColorRGB toColorRGB:toColorRGB progress:progress] forState:UIControlStateNormal];
[_items[index + 1] setTitleColor:[self colorWithFromColorRGB:toColorRGB toColorRGB:fromColorRGB progress:progress] forState:UIControlStateNormal];
}
}
}
颜色改变的方法
- (UIColor *)colorWithFromColorRGB:(NSArray<NSNumber *> *)fromColorRGB toColorRGB:(NSArray<NSNumber *> *)toColorRGB progress:(CGFloat)progress
{
NSInteger fR = [fromColorRGB[0] integerValue];
NSInteger fG = [fromColorRGB[1] integerValue];
NSInteger fB = [fromColorRGB[2] integerValue];
NSInteger tR = [toColorRGB[0] integerValue];
NSInteger tG = [toColorRGB[1] integerValue];
NSInteger tB = [toColorRGB[2] integerValue];
return ColorRGB(fR + (tR - fR) * progress, fG + (tG - fG) * progress, fB + (tB - fB) * progress);
}
按钮的点击方法
- (void)buttonClick:(UIButton *)button
{
if (!_buttonClick) {
for (UIView *view in self.titleView.subviews) {
if ([view isKindOfClass:[UIButton class]]) {
UIButton *btn = (UIButton *)view;
[btn setTitleColor:ColorRGB(180, 180, 180) forState:UIControlStateNormal];
}
[button setTitleColor:ColorRGB(255, 0, 0) forState:UIControlStateNormal];
}
[UIView animateWithDuration:0.25 animations:^{
self.indicatorView.width = button.titleLabel.width;
self.indicatorView.centerX = button.centerX;
}];
}
CGPoint offset = self.contentView.contentOffset;
offset.x = self.contentView.width * button.tag;
[self.contentView setContentOffset:offset animated:YES];
}
结束
大概就这样了，大家借鉴借鉴就行了，能力有限，如有错误，请直接指出，3Q。共同进步，共同进步。
