字体渐变、导航栏滑动、遮罩实现文字颜色启示

公司应用内部实现上面小功能按钮，下面简单说一下思路：

一，先说视图的创建，我写了五层

1. 底部放一个浅色的view叫baseView吧，就上面看浅蓝的，颜色自己设

2.baseView上面放几个按钮（根据需求），都是未点击状态的按钮

3.baseView上再放一个view，蓝色的，用来当做滑动的视图，这里叫moveView

4.moveView上放一个基础view ，要和上面的baseView一样大，超出moveView，这里叫moveSubView

5.moveSubView上放对应的几个label/button ，显示成点击状态的样式，就是字体和上面不一样

二，逻辑的实现

1 . 点击button改变moveView的中心点，和点击的按钮中心点一样

2 . 改变moveSubView 的 中心点

三，实现这种效果主要是靠clipsToBounds这个剪切效果，超出视图的子视图会不显示

设置父视图的clipsToBounds为YES的时候是下面效果，子视图超出的部分也会显示

设置clipsToBounds为NO的时候是下面效果，子视图超出的部分不会显示

利用上面这个效果，就会实现视觉效果的按钮滑动

附上代码

实现：

#import <UIKit/UIKit.h>
typedef void(^btnClickBlock) (UIButton *button);
@interface HuaDongView : UIView

@property (nonatomic , copy) btnClickBlock buttonClick;

-(instancetype)initWithFrame:(CGRect)frame nameArr:(NSArray*)arr;
@end

//
//  HuaDongView.m
//  text
//
//  Created by hfios on 2018/11/16.
//  Copyright © 2018年 iOS. All rights reserved.
//

#import "HuaDongView.h"
#define ScreenSize                  [UIScreen mainScreen].bounds.size
#define ScreenSizeW                 [UIScreen mainScreen].bounds.size.width
#define ScreenSizeH                 [UIScreen mainScreen].bounds.size.height
#define RGBA(r,g,b,a)               [UIColor colorWithRed:r/255.0f green:g/255.0f blue:b/255.0f alpha:a]
@interface HuaDongView()
@property (nonatomic , strong) UIView *moveView;//滑动的那个view
@property (nonatomic , strong) UIView *moveSubView;
@property (nonatomic , assign) CGRect baseFrame;
@property (nonatomic , strong) NSArray *nameArr;
@end

@implementation HuaDongView

-(instancetype)initWithFrame:(CGRect)frame nameArr:(NSArray*)arr{
    if (self = [super initWithFrame:frame]) {
        self.baseFrame = frame;
        self.nameArr = arr;
        [self loadSubviewsWithFrame:frame];
    }
    return self;
}

-(void)loadSubviewsWithFrame:(CGRect)frame{
    [self loadButtonAddBackViewWithFrame:frame];
    self.moveView.frame = CGRectMake(0, 0, frame.size.width/self.nameArr.count, frame.size.height);
    self.moveSubView.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
    [self loadLabelAddMoveViewWithFrame:frame];
}

-(void)buttonClick:(UIButton *)button{
    
    [UIView animateWithDuration:0.5 animations:^{
        
        CGPoint p3 = self.moveSubView.center;
        
        CGPoint p1 = self.moveView.center;
        CGPoint p2 = button.center;
        CGFloat offsetX = p2.x - p1.x;
        p3.x -= offsetX;
        
        self.moveView.frame = button.frame;
        
        self.moveSubView.center = p3;
        
    }];
    self.buttonClick(button);
}

//添加到跟视图上显示的button
-(void)loadButtonAddBackViewWithFrame:(CGRect)frame{
    NSInteger number = self.nameArr.count;
    for (NSInteger i = 0; i<number; i++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.frame = CGRectMake(frame.size.width/number * i, 0, frame.size.width/number, frame.size.height);
        [button setTitle:self.nameArr[i] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
        button.titleLabel.font = [UIFont systemFontOfSize:16];
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:button];
    }
}


//添加到移动view上的白色label
-(void)loadLabelAddMoveViewWithFrame:(CGRect)frame{
    NSInteger number = self.nameArr.count;
    for (NSInteger i = 0; i<number; i++) {
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(frame.size.width/number * i, 0, frame.size.width/number, frame.size.height)];
        label.text = self.nameArr[i];
        label.textColor = [UIColor whiteColor];
        label.font = [UIFont systemFontOfSize:16];
        label.userInteractionEnabled = NO;
        label.textAlignment = NSTextAlignmentCenter;
        [self.moveSubView addSubview:label];
    }
}

-(UIView *)moveView{
    if (!_moveView) {
        _moveView = [[UIView alloc]init];
        _moveView.backgroundColor = RGBA(23, 134, 251, 1);
        _moveView.layer.cornerRadius = self.baseFrame.size.height/2;
        _moveView.layer.masksToBounds = YES;
        _moveView.userInteractionEnabled = NO;
        _moveView.clipsToBounds = YES;
        [self addSubview:_moveView];
    }
    return _moveView;
}

-(UIView *)moveSubView{
    if (!_moveSubView) {
        _moveSubView = [[UIView alloc]init];
        _moveSubView.layer.cornerRadius = self.baseFrame.size.height/2;
        _moveSubView.layer.masksToBounds = YES;
        _moveSubView.userInteractionEnabled = NO;
        _moveSubView.backgroundColor = [UIColor clearColor];
        [self.moveView addSubview:_moveSubView];
    }
    return _moveSubView;
}
@end

调用：

#import "ViewController.h"
#import "HuaDongView.h"
#define ScreenSize                  [UIScreen mainScreen].bounds.size
#define ScreenSizeW                 [UIScreen mainScreen].bounds.size.width
#define ScreenSizeH                 [UIScreen mainScreen].bounds.size.height
#define RGBA(r,g,b,a)               [UIColor colorWithRed:r/255.0f green:g/255.0f blue:b/255.0f alpha:a]
@interface ViewController ()
@property (nonatomic , strong) HuaDongView *moveView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self.view addSubview:self.moveView];
}

-(HuaDongView *)moveView{
    if (!_moveView) {
        _moveView = [[HuaDongView alloc]initWithFrame:CGRectMake(0, 200, ScreenSizeW, 50) nameArr:@[@"你好",@"不好",@"很好"]];
        _moveView.layer.cornerRadius = 25;
        _moveView.layer.masksToBounds = YES;
        _moveView.backgroundColor = RGBA(221, 235, 250, 1);
        _moveView.buttonClick = ^(UIButton *button) {
            NSLog(@"%@",button.titleLabel.text);
        };
    }
    return _moveView;
}

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


@end

下载路径：

简单版：​​​​​​​类似附带几个button的view，点击button的时候，实现button动画移动-iOS代码类资源-CSDN下载https://download.csdn.net/download/wang_bo_justone/10789624

二，新增了一个联动的功能

这个功能和上面的那个功能合成的，需要在点击事件中去进行判断和计算，没什么难度

内部写了十个按钮，数据是临时的，然后我规定的是一个屏幕宽度占整五个按钮，使用者可以自己去NavView类里面自己去设置，或者对外暴露一个方法去传内部数据和其他限制条件，根据个人自定义。

下载链接：

 ​​​​​​​联动版：

类似附带几个button的view，点击button实现视觉效果上是按钮在移动，并新增联动功能-iOS代码类资源-CSDN下载https://download.csdn.net/download/wang_bo_justone/10803291