自定义Tabbar

网上有很多自定义的tabbar，但是我还是倾向于使用系统自带的tabbar。

我自己使用的过程中遇到过下面几个需求。

1、要求有消息时显示红点，不是红圈数字。

2、要求隐藏导航栏上的title

传送门：https://github.com/wangfaguo/QLTabBar

先说说一些基本的设置：

tabbar的图片要使用imageWithRenderingMode方法才能保持原来效果，

titleOffset 可以让tabbaritem 的title文字移动位置，一般只向上移动一点就行（如果产品经理让你移动的话）。

红圈数字这个系统自带，这里不再说了。

 

//设置文字属性
    NSDictionary *attributesNormal = @{NSForegroundColorAttributeName:[UIColor grayColor]};
    NSDictionary *attributesSelected = @{NSForegroundColorAttributeName:[UIColor colorWithRed:0/ 255.0 green:168 / 255.0 blue:212 / 255.0 alpha:1.0]};
    //title位置偏移
    UIOffset titleOffset = UIOffsetMake(0, -2);
    //首页
    UIImage *homeImage = [[UIImage imageNamed:@"table_icon_home_default"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    UIImage *homeSelectedImage = [[UIImage imageNamed:@"table_icon_home_over"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    UITabBarItem *homeItem = [[UITabBarItem alloc]initWithTitle:@"首页" image:homeImage selectedImage:homeSelectedImage];
    homeItem.titlePositionAdjustment = titleOffset;
    [homeItem setTitleTextAttributes:attributesNormal forState:UIControlStateNormal];
    [homeItem setTitleTextAttributes:attributesSelected forState:UIControlStateSelected];
    //理财
    UIImage *financialImage = [[UIImage imageNamed:@"table_icon_financial_default"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    UIImage *financialSelectedImage = [[UIImage imageNamed:@"table_icon_financial_over"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    UITabBarItem *financialItem = [[UITabBarItem alloc]initWithTitle:@"理财" image:financialImage selectedImage:financialSelectedImage];
    financialItem.titlePositionAdjustment = titleOffset;
    [financialItem setTitleTextAttributes:attributesNormal forState:UIControlStateNormal];
    [financialItem setTitleTextAttributes:attributesSelected forState:UIControlStateSelected];
    //我
    UIImage *memberImage = [[UIImage imageNamed:@"table_icon_member_default"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    UIImage *memberSelectedImage = [[UIImage imageNamed:@"table_icon_member_over"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    UITabBarItem *memberItem = [[UITabBarItem alloc]initWithTitle:@"我" image:memberImage selectedImage:memberSelectedImage];
    memberItem.titlePositionAdjustment = titleOffset;
    [memberItem setTitleTextAttributes:attributesNormal forState:UIControlStateNormal];
    [memberItem setTitleTextAttributes:attributesSelected forState:UIControlStateSelected];
    
    ViewController *vc1 = [[ViewController alloc]init];
    ViewController *vc2 = [[ViewController alloc]init];
    ViewController *vc3 = [[ViewController alloc]init];
    UINavigationController *navi1 = [[UINavigationController alloc]initWithRootViewController:vc1];
    UINavigationController *navi2 = [[UINavigationController alloc]initWithRootViewController:vc2];
    UINavigationController *navi3 = [[UINavigationController alloc]initWithRootViewController:vc3];
    navi1.tabBarItem = homeItem;
    navi2.tabBarItem = financialItem;
    navi3.tabBarItem = memberItem;
    [self setViewControllers:@[navi1,navi2,navi3]];
    homeItem.badgeValue = @"100";
    //显示红点
    [self.tabBar showDotAtItemIndex:1];

显示红点的话，可以在tabbar上画一个，为了偷懒从网上搜了一串代码。

#define TabbarItemNums 3.0    //tabbar的数量 如果是5个设置为5.0

#import "UITabBar+badge.h"

@implementation UITabBar (badge)


//显示小红点
-(void)showDotAtItemIndex:(NSInteger)index{
    //移除之前的小红点
    [self removeBadgeOnItemIndex:index];
    
    //新建小红点
    UIView *badgeView = [[UIView alloc]init];
    badgeView.tag = 8888 + index;
    badgeView.layer.cornerRadius = 5;//圆形
    badgeView.backgroundColor = [UIColor redColor];//颜色：红色
    CGRect tabFrame = self.frame;
    
    //确定小红点的位置
    float percentX = (index +0.6) / TabbarItemNums;
    CGFloat x = ceilf(percentX * tabFrame.size.width);
    CGFloat y = ceilf(0.1 * tabFrame.size.height);
    badgeView.frame = CGRectMake(x, y, 10, 10);//圆形大小为10
    [self addSubview:badgeView];
}

//隐藏小红点
-(void)hideDotAtItemIndex:(NSInteger)index{
    //移除小红点
    [self removeBadgeOnItemIndex:index];
}
//移除小红点
- (void)removeBadgeOnItemIndex:(NSInteger)index{
    //按照tag值进行移除
    for (UIView *subView in self.subviews) {
        if (subView.tag == 8888 + index) {
            [subView removeFromSuperview];
        }
    }
}
@end

隐藏导航栏上的title

  // navigationBar 颜色
    self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:0/ 255.0 green:168 / 255.0 blue:212 / 255.0 alpha:1.0];
    self.navigationController.navigationBar.backgroundColor = [UIColor colorWithRed:0/ 255.0 green:168 / 255.0 blue:212 / 255.0 alpha:1.0];
    //去掉阴影，黑线
    self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init];
    [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
    // navigationBar 不透明
    self.navigationController.navigationBar.translucent = NO;
    
    //改变titleView既能隐藏title，又能使push以后的返回按钮title显示
    UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 40)];
    view.backgroundColor = [UIColor colorWithRed:0/ 255.0 green:168 / 255.0 blue:212 / 255.0 alpha:1.0];
    [view sizeToFit];
    self.navigationItem.titleView = view;

效果如下