經(jīng)常會(huì)有一些可以水平切換的多頁(yè)面視圖涌矢，如圖掖举，這里先不討論大于3個(gè)頁(yè)面的情況，專(zhuān)心解決2-3頁(yè)面切換娜庇，頂部tabbar的問(wèn)題拇泛。

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

避免重復(fù)的工作

頂部tabbar功能和顯示基本都一樣，按鈕思灌、指示器、狀態(tài)恭取、位置變化泰偿，封裝一下，按需求配置一下標(biāo)題蜈垮、文字顏色耗跛、字體大小等等就可以。

滑動(dòng)問(wèn)題

在使用一些App的時(shí)候攒发，往往是頁(yè)面完全切換完成了调塌，tabbar的指示器才切換過(guò)去，讓人感覺(jué)像有延遲一樣惠猿。解決方案就是監(jiān)聽(tīng)scrollView的滑動(dòng)事件羔砾，來(lái)控制指示器的滑動(dòng)。既然偶妖，指示器是放在頂部tabbar里面姜凄，那就讓頂部tabbar來(lái)處理這個(gè)問(wèn)題。

使用的話(huà)寫(xiě)了一個(gè)小的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];
    
    //必須配置完成才設(shè)置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 @[@"頭條", @"美食", @"玩樂(lè)"];
}

#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

效果是滑動(dòng)scrollView的時(shí)候趾访，上面的指示器跟著滑态秧，scrollView觸發(fā)了翻頁(yè)，上面的按鈕的選中狀態(tài)也會(huì)改變扼鞋。點(diǎn)擊tabbar上面的按鈕申鱼，scrollView和指示器都會(huì)跟著滑。

項(xiàng)目地址：https://github.com/xxdzyyh/XFFoundation

存在問(wèn)題和未來(lái)擴(kuò)展

1. scrollView的page數(shù)必須和tabbar的titles數(shù)相同云头。這個(gè)問(wèn)題在XFHSwipeViewController中已經(jīng)解決了
2. 指示器和按鈕還不支持自定義
3. tabbar顯示不下需要滑動(dòng)的問(wèn)題
4. XFFoundation在不同的項(xiàng)目中改來(lái)改去捐友，可能會(huì)有一些兼容問(wèn)題