最近做一個項目，tabbar是抖音樣式的，嗯，不會。問題不大，問一下萬能的度娘！搜了半天沒找到這種樣式，我開始方了！當(dāng)然也有可能是我搜索的姿勢不對。

俗話說解決不了需求，就解決提需求的人！果斷去找UI說這個太麻煩，我會但沒必要，你改一個！至于結(jié)果嘛，你看我做出來的這個tabbar不就明白了嘛。。。

先上效果圖

tabbar.png

效果就是這樣的，下面說一下實現(xiàn)方式

第一步我們需要自定義tabbar解決中間按鈕的問題，遍歷tabbar找到UITabBarButton，自定義一個按鈕放在合適的位置。附上代碼

#define ScreenWidth  ([UIScreen mainScreen].bounds.size.width)
#define ScreenHeight  ([UIScreen mainScreen].bounds.size.height)
#import "PSTabBar.h"

@interface PSTabBar ()
@property (nonatomic, strong)UIButton *issueBtn;

@end

@implementation PSTabBar

// layoutSubviews遍歷子控件尋找UITabBarButton，給UITabBarButton重新設(shè)置frame
- (void)layoutSubviews {
    [super layoutSubviews];
    [self addSubview:self.indicatorLine];
    CGFloat width = 50;
    self.issueBtn.frame = CGRectMake((ScreenWidth-width)/2, 2, width, width);
    CGFloat tabBarButtonW = ScreenWidth / 5;
    CGFloat tabBarButtonIndex = 0;
    for (UIView *child in self.subviews) {
        Class class = NSClassFromString(@"UITabBarButton");
        if ([child isKindOfClass:class]) {
            // 重新設(shè)置frame
            CGRect frame = CGRectMake(tabBarButtonIndex * tabBarButtonW, 0, tabBarButtonW, 49);
            child.frame = frame;
            // 增加索引
            if (tabBarButtonIndex == 1) {
                tabBarButtonIndex++;
            }
            tabBarButtonIndex++;
        }
    }
}

- (void)issueBtnAction:(UIButton *)sender{
    [[NSNotificationCenter defaultCenter]postNotificationName:@"issueBtnActionNotification" object:nil];
}


- (UIButton *)issueBtn {
    if (!_issueBtn) {
        _issueBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [self addSubview:_issueBtn];
        [_issueBtn setImage:[UIImage imageNamed:@"tabbar_camera_image_selected"] forState:UIControlStateNormal];
        _issueBtn.adjustsImageWhenHighlighted = false;
        [_issueBtn addTarget:self action:@selector(issueBtnAction:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _issueBtn;
}
- (UIView *)indicatorLine{
    if (!_indicatorLine) {
        _indicatorLine = [[UIView alloc]initWithFrame:CGRectMake(1/15.0f*[UIScreen mainScreen].bounds.size.width, 45, 1/15.0f*[UIScreen mainScreen].bounds.size.width, 2)];
        _indicatorLine.backgroundColor = PSBaseColor;
        [self addSubview:_indicatorLine];
    }
    return _indicatorLine;
}

這是自定義的tabbar的.m文件，記得在.h文件中聲明一下_indicatorLine,后續(xù)要用

第二步我們需要自定義一個TabbarController，這里邊設(shè)置一下tabbarItem的文字的位置和大小，附代碼

#import "PSTabBarController.h"

@interface PSTabBarController ()

@end

@implementation PSTabBarController

- (void)dealloc{
    [[NSNotificationCenter defaultCenter]removeObserver:self name:@"issueBtnActionNotification" object:nil];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.ps_tabbar = [PSTabBar new];
    [self setValue:self.ps_tabbar forKey:@"tabBar"];
    
    [self addCustomChildVC:[UIViewController new] title:@"首頁" imageName:nil withSelectedImage:nil];
    [self addCustomChildVC:[UIViewController new] title:@"參賽"  imageName:nil withSelectedImage:nil];
    [self addCustomChildVC:[UIViewController new] title:@"消息"  imageName:nil withSelectedImage:nil];
    [self addCustomChildVC:[UIViewController new] title:@"我"  imageName:nil withSelectedImage:nil];
    
    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(presentIssueVC:) name:@"issueBtnActionNotification" object:nil];
}

- (void)presentIssueVC:(NSNotification *)notification{
    NSLog(@"發(fā)布發(fā)布發(fā)布~~~~");
}

- (void)addCustomChildVC:(UIViewController *)vc title:(NSString *)title imageName:(NSString *)imageName withSelectedImage:(NSString *)selectedImage {
    if (imageName) {
        vc.tabBarItem.image = [UIImage imageNamed:imageName];
    }
    if (selectedImage) {
        vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
    }
    vc.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256) / 255.0 green:arc4random_uniform(256) / 255.0 blue:arc4random_uniform(256) / 255.0 alpha:1];
    PSNavigationController *nav = [[PSNavigationController alloc]initWithRootViewController:vc];
    nav.tabBarItem.title = title;
    NSDictionary *textTitleOptions = @{NSForegroundColorAttributeName:rgba(102, 102, 102, 1),NSFontAttributeName:[UIFont systemFontOfSize:15]};
    NSDictionary *textTitleOptionsSelected = @{NSForegroundColorAttributeName:PSBaseColor,NSFontAttributeName:[UIFont systemFontOfSize:15]};
    [nav.tabBarItem setTitleTextAttributes:textTitleOptions forState:UIControlStateNormal];
    [nav.tabBarItem setTitleTextAttributes:textTitleOptionsSelected forState:UIControlStateSelected];
    self.tabBar.tintColor = PSBaseColor;
    [self addChildViewController:nav];
    [[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -15)];
}

同樣的需要在.h文件中聲明一個PSTabbar的實例變量，后續(xù)要用

最后一步在APPDelegate中實現(xiàn)tabbarControllerDelegate,在點擊事件中改變_indicatorLine的位置，附代碼

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    NSInteger index = [tabBarController.viewControllers indexOfObject:viewController];
//    NSLog(@"index------>>>%ld",index);
    
    PSTabBarController *tabbar_c = (PSTabBarController *)tabBarController;
    tabbar_c.ps_tabbar.indicatorLine.backgroundColor = PSBaseColor;
    
    CGRect frame = tabbar_c.ps_tabbar.indicatorLine.frame;
    if (index == 0) {
        frame.origin.x = 1/15.0f*[UIScreen mainScreen].bounds.size.width;
    }else if (index == 1){
        frame.origin.x = 4/15.0f*[UIScreen mainScreen].bounds.size.width;
    }else if (index == 2){
        frame.origin.x = 10/15.0f*[UIScreen mainScreen].bounds.size.width;
    }else if (index == 3){
        frame.origin.x = 13/15.0f*[UIScreen mainScreen].bounds.size.width;
    }
    tabbar_c.ps_tabbar.indicatorLine.frame = frame;
}

更新一下，新增了一個動態(tài)改變Tabbar背景色和文字顏色的功能。附上DEMO https://github.com/MayXiaoYang/LXYDouYinTabBar

ok,這樣就完成啦！有用的話點個贊再走啊~