按钮横线标记跟随页面滑动且按钮颜色跟随页面滑动渐变

效果图:

代码:

//
//  ViewController.m
//  Demo
//
//  Created by luckyCoderCai on 2018/7/3.
//  Copyright © 2018年 Cai. All rights reserved.
//

#import "ViewController.h"
#import <Masonry/Masonry.h>

//状态栏高度
#define StatusBarHeight [[UIApplication sharedApplication] statusBarFrame].size.height
//导航栏高度
#define kNavBarHeight (StatusBarHeight + 44)

#define SCREEN_Width    ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_Height   ([UIScreen mainScreen].bounds.size.height)

static NSString *const kLeftBtnTitle = @"这是左边";
static NSString *const kRightBtnTitle = @"这是右边";

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIButton *leftBtn;
@property (nonatomic, strong) UIButton *rightBtn;
@property (nonatomic, strong) UIView *lineView;

@property (nonatomic, strong) UIScrollView *scrollView;

@end

@implementation ViewController

#pragma mark -lazy load
- (UIButton *)leftBtn
{
    if (!_leftBtn) {
        _leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [_leftBtn setTitle:kLeftBtnTitle forState:UIControlStateNormal];
        [_leftBtn setTitleColor:[UIColor colorWithRed:30/255.0 green:30/255.0 blue:30/255.0 alpha:1] forState:UIControlStateNormal];
        _leftBtn.titleLabel.font = [UIFont boldSystemFontOfSize:16];
        [_leftBtn addTarget:self action:@selector(leftBtnAction) forControlEvents:UIControlEventTouchUpInside];
    }
    return _leftBtn;
}

- (UIButton *)rightBtn
{
    if (!_rightBtn) {
        _rightBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [_rightBtn setTitle:kRightBtnTitle forState:UIControlStateNormal];
        [_rightBtn setTitleColor:[UIColor colorWithRed:210/255.0 green:210/255.0 blue:210/255.0 alpha:1] forState:UIControlStateNormal];
        _rightBtn.titleLabel.font = [UIFont boldSystemFontOfSize:16];
        [_rightBtn addTarget:self action:@selector(rightBtnAction) forControlEvents:UIControlEventTouchUpInside];
    }
    return _rightBtn;
}

- (UIView *)lineView
{
    if (!_lineView) {
        _lineView = [[UIView alloc] init];
        _lineView.backgroundColor = [UIColor redColor];
        _lineView.layer.cornerRadius = 1;
        _lineView.layer.masksToBounds = YES;
    }
    return _lineView;
}

- (UIScrollView *)scrollView
{
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectZero];
        _scrollView.backgroundColor = [UIColor whiteColor];
        _scrollView.pagingEnabled = YES;
        _scrollView.bounces = NO;
        _scrollView.contentSize = CGSizeMake(SCREEN_Width * 2, 0);
        _scrollView.delegate = self;
        
        for (int i = 0; i < 2; i++) {
            UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(i * SCREEN_Width, (SCREEN_Width - 50)/2.0, SCREEN_Width, 50)];
            label.text = [NSString stringWithFormat:@"这是第%d页", i + 1];
            label.textColor = [UIColor purpleColor];
            label.font = [UIFont systemFontOfSize:18];
            label.textAlignment = NSTextAlignmentCenter;
            [_scrollView addSubview:label];
        }
    }
    return _scrollView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.view.backgroundColor = [UIColor orangeColor];
    [self createUI];
}

- (void)createUI
{
    UIView *navView = [[UIView alloc] init];
    navView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:navView];
    [navView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.and.trailing.and.top.equalTo(@0);
        make.height.mas_equalTo(kNavBarHeight);
    }];
    
    [navView addSubview:self.leftBtn];
    [navView addSubview:self.rightBtn];
    [navView addSubview:self.lineView];
    [self.leftBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake([self singleLabelRectWithLabelText:kLeftBtnTitle Font:[UIFont boldSystemFontOfSize:16]] + 1, 44));
        make.trailing.equalTo(navView.mas_centerX).mas_offset(-41);
        make.top.mas_equalTo(StatusBarHeight);
    }];
    
    [self.rightBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(navView.mas_centerX).mas_offset(41);
        make.top.equalTo(self.leftBtn);
        make.size.mas_equalTo(CGSizeMake([self singleLabelRectWithLabelText:kRightBtnTitle Font:[UIFont boldSystemFontOfSize:16]] + 1, 44));
    }];
    
    [self.lineView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(20, 2));
        make.centerX.equalTo(self.leftBtn);
        make.top.equalTo(@62);
    }];
    
    [self.view addSubview:self.scrollView];
    
    if (@available(iOS 11.0, *)) {
        self.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAutomatic;
    }
    
    [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.and.trailing.equalTo(@0);
        make.top.mas_equalTo(kNavBarHeight);
        make.bottom.equalTo(@0);
    }];
}

- (void)leftBtnAction
{
    NSLog(@"--left btn click");
    [self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
}

- (void)rightBtnAction
{
    NSLog(@"--right btn click");
    [self.scrollView setContentOffset:CGPointMake(SCREEN_Width, 0) animated:YES];
}

#pragma mark -UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offSetX = scrollView.contentOffset.x;
    CGFloat leftWidth = [self singleLabelRectWithLabelText:kLeftBtnTitle Font:[UIFont boldSystemFontOfSize:16]] + 1;
    CGFloat rightWidth = [self singleLabelRectWithLabelText:kRightBtnTitle Font:[UIFont boldSystemFontOfSize:16]] + 1;
    
    //公式: offSetX/SCREEN_Width = 实时偏移/最终偏移
    //最终偏移 = (leftWidth + rightWidth)/2.0 + 82
    
    //实时偏移量
    CGFloat scrollOffSetX = offSetX * ((leftWidth + rightWidth)/2.0 + 82)/SCREEN_Width;
    
    //颜色实时偏移
    CGFloat colorOffSetX = offSetX * (210 - 30) / SCREEN_Width;
    
    [self.leftBtn setTitleColor:[UIColor colorWithRed:(30 + colorOffSetX)/255.0 green:(30 + colorOffSetX)/255.0 blue:(30 + colorOffSetX)/255.0 alpha:1] forState:UIControlStateNormal];
    [self.rightBtn setTitleColor:[UIColor colorWithRed:(210 - colorOffSetX)/255.0 green:(210 - colorOffSetX)/255.0 blue:(210 - colorOffSetX)/255.0 alpha:1] forState:UIControlStateNormal];
    
    [self.lineView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(20, 2));
        make.centerX.equalTo(self.leftBtn).mas_offset(scrollOffSetX);
        make.top.equalTo(@62);
    }];
}

/**
 获取文字宽度

 @param labelText 一段文字
 @param font 字体大小
 @return 文字宽度
 */
- (CGFloat)singleLabelRectWithLabelText:(NSString *)labelText Font:(UIFont *)font
{
    return [labelText sizeWithAttributes:@{NSFontAttributeName:font}].width;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end