多页面切换顶部tabbar

经常会有一些可以水平切换的多页面视图，如图，这里先不讨论大于3个页面的情况，专心解决2-3页面切换，顶部tabbar的问题。

Simulator Screen Shot 2016年12月22日 下午5.28.10.png

避免重复的工作

顶部tabbar功能和显示基本都一样，按钮、指示器、状态、位置变化，封装一下，按需求配置一下标题、文字颜色、字体大小等等就可以。

滑动问题

在使用一些App的时候，往往是页面完全切换完成了，tabbar的指示器才切换过去，让人感觉像有延迟一样。解决方案就是监听scrollView的滑动事件，来控制指示器的滑动。既然，指示器是放在顶部tabbar里面，那就让顶部tabbar来处理这个问题。

使用的话写了一个小的demo

#import "XFTopbarDemoViewController.h"

#import <YYKit/YYKit.h>
#import "XFTopTabBar.h"

@interface XFTopbarDemoViewController () <XFTopTabBarDelegate>

@property (strong, nonatomic) XFTopTabBar *topbar;

@property (strong, nonatomic) UIScrollView *scrollView;

@property (strong, nonatomic) UIViewController *vc0;
@property (strong, nonatomic) UIViewController *vc1;
@property (strong, nonatomic) UIViewController *vc2;

@end

@implementation XFTopbarDemoViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.edgesForExtendedLayout = UIRectEdgeNone;
    
    [self.scrollView addSubview:self.vc0.view];
    [self.scrollView addSubview:self.vc1.view];
    [self.scrollView addSubview:self.vc2.view];
    
    [self.view addSubview:self.scrollView];
    
        //scrollView的page必须和topbar的titles.count相同
    self.topbar.scrollView = self.scrollView;
    [self.view addSubview:self.topbar];
    
    //必须配置完成才设置delegate
    self.topbar.delegate = self;
}

- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];
    
    self.topbar.frame = CGRectMake(0, 0, self.view.width, 45);
    self.scrollView.frame = CGRectMake(0, self.topbar.bottom, self.view.width, self.view.height-self.topbar.height);
    
    self.scrollView.contentSize = CGSizeMake(self.view.width*3,self.scrollView.height);
}

#pragma mark - 

- (NSArray *)titlesForTopTabbar:(XFTopTabBar *)topTabBar {
    return @[@"头条", @"美食", @"玩乐"];
}

#pragma mark - setter & getter

- (UIViewController *)vc0 {
    if (_vc0 == nil) {
        _vc0 = [[UIViewController alloc] init];
        
        _vc0.view.frame = CGRectMake(0, 0, YYScreenSize().width, YYScreenSize().height-64-45);
        
        _vc0.view.backgroundColor = [UIColor lightTextColor];
    }
    return _vc0;
}

- (UIViewController *)vc1 {
    if (_vc1 == nil) {
        _vc1 = [[UIViewController alloc] init];
        
        _vc1.view.frame = CGRectMake(YYScreenSize().width, 0, YYScreenSize().width, YYScreenSize().height-64-45);
        
        _vc1.view.backgroundColor = [UIColor yellowColor];
    }
    return _vc1;
}

- (UIViewController *)vc2 {
    if (_vc2 == nil) {
        _vc2 = [[UIViewController alloc] init];
        
        _vc2.view.frame = CGRectMake(YYScreenSize().width*2, 0, YYScreenSize().width, YYScreenSize().height-64-45);
        _vc2.view.backgroundColor = [UIColor greenColor];
    }
    return _vc2;
}

- (XFTopTabBar *)topbar {
    if (_topbar == nil) {
        _topbar = [[XFTopTabBar alloc] initWithFrame:CGRectMake(0, 0, YYScreenSize().width, 45)];
        
        _topbar.backgroundColor    = [UIColor whiteColor];
        _topbar.normalStateColor   = [UIColor grayColor];
        _topbar.selectedStateFont  = [UIFont systemFontOfSize:17];
        _topbar.selectedStateColor = [UIColor greenColor];
    }
    return _topbar;
}

- (UIScrollView *)scrollView {
    if (_scrollView == nil) {
        _scrollView = [UIScrollView new];
        
        _scrollView.pagingEnabled = YES;
        _scrollView.backgroundColor = [UIColor orangeColor];
    }
    return _scrollView;
}

@end

效果是滑动scrollView的时候，上面的指示器跟着滑，scrollView触发了翻页，上面的按钮的选中状态也会改变。点击tabbar上面的按钮，scrollView和指示器都会跟着滑。

项目地址：https://github.com/xxdzyyh/XFFoundation

存在问题和未来扩展

1. scrollView的page数必须和tabbar的titles数相同。这个问题在XFHSwipeViewController中已经解决了
2. 指示器和按钮还不支持自定义
3. tabbar显示不下需要滑动的问题
4. XFFoundation在不同的项目中改来改去，可能会有一些兼容问题