iOS仿抖音Tabbar

最近做一个项目，tabbar是抖音样式的，嗯，不会。问题不大，问一下万能的度娘！搜了半天没找到这种样式，我开始方了！当然也有可能是我搜索的姿势不对。

俗话说解决不了需求，就解决提需求的人！果断去找UI说这个太麻烦，我会但没必要，你改一个！至于结果嘛，你看我做出来的这个tabbar不就明白了嘛。。。

先上效果图 tabbar.png

效果就是这样的，下面说一下实现方式

第一步我们需要自定义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重新设置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]) {
            // 重新设置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,后续要用

第二步我们需要自定义一个TabbarController，这里边设置一下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(@"发布发布发布~~~~");
}

- (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的实例变量，后续要用

最后一步在APPDelegate中实现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;
}

更新一下，新增了一个动态改变Tabbar背景色和文字颜色的功能。附上DEMO https://github.com/MayXiaoYang/LXYDouYinTabBar

ok,这样就完成啦！有用的话点个赞再走啊~