iOS自定义tabBar

iOS自定义tabBar

前段时间我们UI设计师设计了一个与系统自带样式的app的底部tabbar，它除了中间按钮要凸出来，整个tabbar的边部也是不贴边的。要做到这样的效果，就要对系统的babbar进行自定义。UITabBarController中有UITabBar这个类，这个类就是底部导航的关键控件类。

1、创建TextTabBar继承UITabBar

#import "TextTabBar.h"

#define SCREEN_WIDTH                [[UIScreen mainScreen] bounds].size.width
#define SCREEN_HEIGHT               [[UIScreen mainScreen] bounds].size.height

@interface TextTabBar ()

@property (nonatomic, strong) UIButton       *centerButton;
@property (nonatomic, strong) UIImageView    *tabbarBgImage;

@end

@implementation TextTabBar

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if(self) {
           [self addSubview:self.tabbarBgImage];
           // 去除顶部横线
            [self setBackgroundImage:[UIImage new]];
            [self setShadowImage:[UIImage new]];
    }
    return self;
}

- (void)layoutSubviews{
    [super layoutSubviews];
    // 重设tabBar的位置
    self.frame = CGRectMake(0, SCREEN_HEIGHT- 67-10, SCREEN_WIDTH, 67);
    
    // 设置中间按钮
    CGFloat width = 72;
    self.centerButton.frame = CGRectMake(0 , -15, 45, 45);
    self.centerButton.center = CGPointMake(SCREEN_WIDTH/2, 15);
    
    
    // 设置其他tabbarbtn的frame
    CGFloat tabBarButtonW = (SCREEN_WIDTH-40)/5;
    CGFloat tabBarButtonIndex = 0;
    for (UIView *child in self.subviews) {
        Class class = NSClassFromString(@"UITabBarButton");
        if ([child isKindOfClass:class]) {
            CGRect frame = CGRectMake(tabBarButtonIndex * tabBarButtonW+20, 3, tabBarButtonW, 49);
            child.frame = frame;
            tabBarButtonIndex ++;
        }
    }
}


- (UIButton *)centerButton {
    if (_centerButton == nil) {
        _centerButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [self addSubview:_centerButton];
        _centerButton.backgroundColor = [UIColor redColor];
        _centerButton.layer.cornerRadius = 45/2;
        _centerButton.layer.masksToBounds = YES;
        _centerButton.adjustsImageWhenHighlighted = false;
        [_centerButton addTarget:self action:@selector(centerTabBarBtnEvent) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return _centerButton;
}

- (UIImageView *)tabbarBgImage {
    if (_tabbarBgImage == nil) {
        _tabbarBgImage = [[UIImageView alloc] initWithFrame:CGRectMake(10, 0, SCREEN_WIDTH-20, 67)];
        _tabbarBgImage.image = [UIImage imageNamed:@"home_tabbar_bg"];
    }
    return _tabbarBgImage;
}

// 中间按钮点击事件
- (void)centerTabBarBtnEvent{
    
}

2、 在UITabBarController中去重设tabbar这个属性

因为tabbar是属于UITabBarController的私有属性，所以我们不能用“.”语法对UITabBarController的tabbar直接设值，需要用KVC的"- (void)setValue:(nullable id)value forKey:(NSString *)key; " 方法对UITabBarController的tabbar设值。

  #import "TextTabBarController.h"
@interface TextTabBarController ()

@end

@implementation TextTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    TextTabBar *tabBar = [[TextTabBar alloc] init];
    [self setValue:tabBar forKey:@"tabBar"];
  }
  

3、给tabbar的添加控制器

#import "TextTabBarController.h"
#import "TextController.h"

@interface TextTabBarController ()

@end

@implementation TextTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    TextTabBar *tabBar = [[TextTabBar alloc] init];
    [self setValue:tabBar forKey:@"tabBar"];
    
    
    // 添加tabbar控制器
    [self setupOneChildViewController:[[UINavigationController alloc] initWithRootViewController:[[TextController alloc] init]] title:@"tabbar1" image:@"home_tabbar_first" selectedImage:@"home_tabbar_first1"  tag:0];

    [self setupOneChildViewController:[[UINavigationController alloc] initWithRootViewController:[[TextController alloc] init]] title:@"tabbar2" image:@"home_tabbar_travel" selectedImage:@"home_tabbar_travel1" tag:1];

   [self setupOneChildViewController:[[UINavigationController alloc] initWithRootViewController:[[TextController alloc] init]] title:@"" image:@"" selectedImage:@"" tag:2];
    
    [self setupOneChildViewController:[[UINavigationController alloc] initWithRootViewController:[[TextController alloc] init]] title:@"tabbar3" image:@"home_tabbar_work" selectedImage:@"home_tabbar_work1" tag:3];

    [self setupOneChildViewController:[[UINavigationController alloc] initWithRootViewController:[[TextController alloc] init]] title:@"tabbar4" image:@"home_tabbar_mine" selectedImage:@"home_tabbar_mine1" tag:4];
    
}

/**
 *  初始化一个子控制器
 *
 *  @param vc            子控制器
 *  @param title         标题
 *  @param image         图标
 *  @param selectedImage 选中的图标
 */
- (void)setupOneChildViewController:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage tag:(NSInteger)tag
{
    vc.tabBarItem.title = title;
    vc.tabBarItem.tag = tag;
    if (image.length) { // 图片名有具体值
        vc.tabBarItem.image = [[UIImage imageNamed:image] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        vc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        
    }
    
    [self addChildViewController:vc];
}

效果