經常會有一些可以水平切換的多頁面視圖，如圖，這里先不討論大于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在不同的項目中改來改去，可能會有一些兼容問題