自定义滑动导航栏

• 此例子仅供自己学习使用
• 参考链接 https://github.com/zhengwenming/SliderTab

#import "MainViewController.h"

#define kScreenWidth [UIScreen mainScreen].bounds.size.width

@interface MainViewController ()<UIScrollViewDelegate>

@property(nonatomic,strong)UIView *navView; // 滑动导航view
@property(nonatomic,strong)UIButton *firstBtn; // 第一个按钮
@property(nonatomic,strong)UIButton *secondBtn; // 第二个按钮
@property(nonatomic,strong)UILabel *slider; // 滑动下标
@property(nonatomic,strong)UIScrollView *mainScroll;
@property(nonatomic,strong)UIView *firstView;
@property(nonatomic,strong)UIView *secondView;

@property(nonatomic,assign)NSUInteger selectedIndex; // 选中索引

@end

@implementation MainViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self navView];
    [self firstBtn];
    [self secondBtn];
    [self slider];
    [self mainScroll];
    
    [self firstView];
    [self secondView];
    
    [self selectedIndexWithTag:1];
    
    
}

#pragma mark - lazy method
-(UIView *)navView
{
    if (!_navView) {
        _navView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, 200, 40)];
        _navView.backgroundColor = [UIColor grayColor];
        [self.view addSubview:_navView];
    }
    return _navView;
}

-(UIButton *)firstBtn
{
    if (!_firstBtn) {
        _firstBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _firstBtn.frame = CGRectMake(0, 0, 100, 30);
        _firstBtn.selected = YES;
        _firstBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        _firstBtn.tag = 1;
        [_firstBtn setTitle:@"First" forState:UIControlStateNormal];
        [_firstBtn setBackgroundColor:[UIColor orangeColor]];
        [_firstBtn setTitleColor:[UIColor grayColor] forState:UIControlStateSelected];
        [_firstBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [_firstBtn addTarget:self action:@selector(sliderBtnClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.navView addSubview:_firstBtn];
    }
    return _firstBtn;
}

-(UIButton *)secondBtn
{
    if (!_secondBtn) {
        _secondBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _secondBtn.frame = CGRectMake(100, 0, 100, 30);
        _secondBtn.tag = 2;
        _secondBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        [_secondBtn setTitle:@"Second" forState:UIControlStateNormal];
        [_secondBtn setBackgroundColor:[UIColor orangeColor]];
        [_secondBtn setTitleColor:[UIColor grayColor] forState:UIControlStateSelected];
        [_secondBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [_secondBtn addTarget:self action:@selector(sliderBtnClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.navView addSubview:_secondBtn];
    }
    return _secondBtn;
}

-(UILabel *)slider
{
    if (!_slider) {
        _slider = [[UILabel alloc] initWithFrame:CGRectMake(0, 30, 50, 10)];
        _slider.backgroundColor = [UIColor redColor];
        [self.navView addSubview:_slider];
    }
    return _slider;
}

-(UIScrollView *)mainScroll
{
    if (!_mainScroll) {
        _mainScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 104, self.view.frame.size.width, 100)];
        _mainScroll.delegate = self;
        _mainScroll.backgroundColor = [UIColor greenColor];
        _mainScroll.pagingEnabled = YES;
        _mainScroll.showsVerticalScrollIndicator = NO;
        _mainScroll.showsHorizontalScrollIndicator = NO;
        _mainScroll.contentSize = CGSizeMake(self.view.frame.size.width * 2, 0);
        [self.view addSubview:_mainScroll];
    }
    return _mainScroll;
}

-(UIView *)firstView
{
    if (!_firstView) {
        _firstView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100)];
        _firstView.backgroundColor = [UIColor blueColor];
        [self.mainScroll addSubview:_firstView];
    }
    return _firstView;
}

-(UIView *)secondView
{
    if (!_secondView) {
        _secondView = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width, 0, self.view.frame.size.width, 100)];
        _secondView.backgroundColor = [UIColor brownColor];
        [self.mainScroll addSubview:_secondView];
    }
    return _secondView;
}

#pragma mark - private method
/*
 选项按钮点击事件
 @param UIButton *button
 */
-(void)sliderBtnClick:(UIButton *)button
{
    if (_selectedIndex == button.tag) {
        return;
    }
    [self sliderAnimationWithTag:button.tag];
    __weak MainViewController *weakVC = self;
    [UIView animateWithDuration:0.3 animations:^{
        weakVC.mainScroll.contentOffset = CGPointMake(kScreenWidth*(button.tag-1), 0);
    } completion:^(BOOL finished) {
        
    }];
}

// 下标滑动动画
-(void)sliderAnimationWithTag:(NSInteger)tag
{
    _selectedIndex = tag;
    _firstBtn.selected = NO;
    _secondBtn.selected = NO;
    UIButton *button = [self buttonSelectedStatusWithTag:tag];
    button.enabled = YES;
    // 动画
    __weak MainViewController *weakVC = self;
    [UIView animateWithDuration:0.3 animations:^{
        weakVC.slider.frame = CGRectMake(button.frame.origin.x, 30, 50, 10);
    } completion:^(BOOL finished) {
        
    }];
}

// 根据选中的值来返回对应的按钮
-(UIButton *)buttonSelectedStatusWithTag:(NSUInteger)tag
{
    if (tag == 1) {
        return _firstBtn;
    } else if (tag == 2) {
        return _secondBtn;
    } else {
        return nil;
    }
}

// 选中索引值的设置
-(void)selectedIndexWithTag:(NSUInteger)tag
{
    _selectedIndex = tag;
    _firstBtn.selected = NO;
    _secondBtn.selected = NO;
    UIButton *button = [self buttonSelectedStatusWithTag:tag];
    button.selected = YES;
    //  动画
    _slider.frame = CGRectMake(button.frame.origin.x, _slider.frame.origin.y, _slider.frame.size.width, _slider.frame.size.height);
}


#pragma mark - UIScrollViewDelegate

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat contentOffSetX = scrollView.contentOffset.x;
    CGFloat X= contentOffSetX / kScreenWidth * 100;
    CGRect frame = _slider.frame;
    frame.origin.x = X;
    _slider.frame = frame;
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    CGFloat contentOffSetX = scrollView.contentOffset.x;
    int index = contentOffSetX / kScreenWidth;
    [self selectedIndexWithTag:index+1];
}