滚轮标题标签栏颜色的渐变

效果图
第一次转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。共同进步，共同进步。