iOS实现左右滑动标签栏功能

iOS左右滑动导航栏标签

很早就想写一篇关于左右滑动标签的文章了，因为刚开始学习iOS的时候，就练习过，先上个效果图吧：

未命名.gif

这个效果很多地方都可以用的到，网易新闻、腾讯视频等等都会有，一般我们看到这种需求可能第一反应就是网上好多的第三方库，而且用法超级简单，一两分钟搞定，的确，使用第三方库确实舒服，但是作为一个程序员吧，我觉得如果有时间的话还是自己写，因为这个东西说实话，确实很简单，总共就那么几个控件：一个UIScrollView 、三个按钮、一个滑动条。自己也就话1个小时就搞定的事 ，为何不自己写，而且还有一个最重要的点，使用别人的东西可定制性就低了，也许稍微有一点和这个第三方库不一致你可能就要去改别人的源码，或者干脆用不了了，既然如此 为何不自己去写呢？

那么下面就进入我们的重点吧：
1.整体思路：在一个控制器中放置一个UIScrollView，新建三个子控制器，并将这三个子控制器的view加入到scrollView中，在导航栏的titleView中加入三个按钮以及一个滑动的Label

2.代码部分：

//这是我们的最外层控制器
//  YJYYMainViewController.h
//  YJYYSlideControls
//
//  Created by 遇见远洋 on 16/8/25.
//  Copyright © 2016年 遇见远洋. All rights reserved.
//

#import 

@interface YJYYMainViewController : UIViewController
@end

//
//  YJYYMainViewController.m
//  YJYYSlideControls
//
//  Created by 遇见远洋 on 16/8/25.
//  Copyright © 2016年 遇见远洋. All rights reserved.
//

#import "YJYYMainViewController.h"
#import "YJYYFirstViewController.h"
#import "YJYYSecondViewController.h"
#import "YJYYThirdViewController.h"
#define kScreenWidth [UIScreen mainScreen].bounds.size.width

@interface YJYYMainViewController ()
@property (strong,nonatomic)UIScrollView *mainScrollView;/**<滚动scrollView*/
@property (strong,nonatomic)YJYYFirstViewController *firstVc;/**<第一个控制器*/
@property (strong,nonatomic)YJYYSecondViewController *secondVc;/**<第二个控制器*/
@property (strong,nonatomic)YJYYThirdViewController *thirdVc;/**<第三个控制器*/
@property (strong,nonatomic)UIView *btnContainerView;/**<按钮容器视图*/
@property (strong,nonatomic)UILabel *slideLabel;/**<滚动条*/
@property (strong,nonatomic)NSMutableArray *btnsArray;/**<按钮数组*/

@end

@implementation YJYYMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //1.设置scrollView
    [self setMainSrollView];
}

/**
 *  设置scrollView
 */
-(void)setMainSrollView{
    _mainScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, self.view.frame.size.height)];
    _mainScrollView.delegate = self;
    _mainScrollView.backgroundColor = [UIColor whiteColor];
    _mainScrollView.pagingEnabled = YES;
    _mainScrollView.showsHorizontalScrollIndicator = NO;
    _mainScrollView.showsVerticalScrollIndicator = NO;
    [self.view addSubview:_mainScrollView];
    
    NSArray *views = @[self.firstVc.view,self.secondVc.view,self.thirdVc.view];
    for (NSInteger i = 0; i

关键代码就这么多，下面再说说最重要的几个点吧：
1.点击导航栏上的按钮让scrollView滚动怎么实现：

其实就是通过设置contentOffset，这里的sender是被点击的按钮 通过给每一个按钮绑定一个tag来实现滚动距离的设置
    [UIView animateWithDuration:0.3 animations:^{
        _mainScrollView.contentOffset = CGPointMake(kScreenWidth*(sender.tag), 0);
    } completion:^(BOOL finished) {
        
    }];

2.滑动scrollView时 让滚动条滚动到对应的按钮位置怎么实现？

这个其实也很简单 在代理方法中通过一个tag值来让导航栏上的按钮被选中就可以了
//scrollView滑动代理监听
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    double index_ = scrollView.contentOffset.x/kScreenWidth;
    [self sliderAnimationWithTag:(int)(index_+0.5)];
}

最后放上demo吧，我就不封装了，因为网上很多人都封装过，做重复的轮子没啥用，主要是看思路，不过我这个demo没什么技术含量 也就是教教大家思路而已
https://github.com/wxh794708907/YJYYSlideController.git