自定义tabbarController

要自定义tabBarController,就要自定义tabBar.要自定义tabBar就要自定义item.所以,咱们要自定义个item,也就是button
1.自定义的按钮要文字在下面,图片在文字的上面,并且,文字和图片要相对于按钮居中

#define HXTabBarButtonImageRatio 0.6

@implementation HXTabBarButton

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 初始化
        [self initialize];
    }
    return self;
}

- (void)initialize {
    [self setBackgroundImage:[UIImage imageNamed:@"tabbar_slider"] forState:UIControlStateSelected];
    self.imageView.contentMode = UIViewContentModeCenter;
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    self.titleLabel.font = [UIFont systemFontOfSize:15];
    [self setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];
    [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}

- (void)setHighlighted:(BOOL)highlighted {
    
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect {
    CGFloat imageW = contentRect.size.width;
    CGFloat imageH = contentRect.size.height * HXTabBarButtonImageRatio;
    return CGRectMake(0, 0, imageW, imageH);
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
    CGFloat titleW = contentRect.size.width;
    CGFloat titleY = contentRect.size.height * HXTabBarButtonImageRatio;
    CGFloat titleH = contentRect.size.height * (1 - HXTabBarButtonImageRatio);
    return CGRectMake(0, titleY, titleW, titleH);
}

// item是从外界传过来的
- (void)setItem:(UITabBarItem *)item {
    _item = item;
    
    [self setTitle:item.title forState:UIControlStateNormal];
    [self setImage:item.image forState:UIControlStateNormal];
    [self setImage:item.selectedImage forState:UIControlStateSelected];
}

2.自定义tabBar,就需要用到我们的自定义按钮了

@property (nonatomic , strong) HXTabBarButton *selectButton;

给外界一个方法,让外界调用这个方法来添加item

- (void)addTabBarWithItem:(UITabBarItem *)item;

因为是自定义的按钮,需要一个代理方法

/**
 从一个控制器跳到另一个控制器
 
 @param from 现在控制器的位置
 @param to 目标控制器的位置
 */
- (void)tabbar:(HXTabBar *)tabBar didSelectButtonFrom:(NSInteger)from to:(NSInteger)to;

遵循代理

@property (nonatomic , weak) id<HXTabBarDelegate>delegate;

在.m文件中实现添加item的方法

- (void)addTabBarWithItem:(UITabBarItem *)item {
    HXTabBarButton *button = [[HXTabBarButton alloc] init];
    button.item = item;
    [self addSubview:button];
    [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
    
    // 默认选中第一个按钮
    if (self.subviews.count ==1) {
        [self buttonClick:button];
    }
}

监听按钮的点击事件

- (void)buttonClick:(HXTabBarButton *)sender {
    if ([self.delegate respondsToSelector:@selector(tabbar:didSelectButtonFrom:to:)]) {
        [self.delegate tabbar:self didSelectButtonFrom:self.selectButton.tag to:sender.tag];
    }
    
    self.selectButton.selected = NO;
    sender.selected = YES;
    self.selectButton = sender;
    
}

设置按钮的位置

- (void)layoutSubviews {
    [super layoutSubviews];
    for (int index = 0; index <self.subviews.count; index++) {
        // 1.取出按钮
        HXTabBarButton *btn = self.subviews[index];
        // 2.设置frame
        CGFloat buttonW = self.frame.size.width / self.subviews.count;
        CGFloat buttonX = index * buttonW;
        CGFloat buttonY = 0;
        CGFloat buttonH = self.frame.size.height;
        btn.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
        
        // 3.绑定tag
        btn.tag = index;
    }
}

通过一张图片,给tabBar设置背景

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"tabbar_background"]];
    }
    return self;
}

3.tabBar搞定之后,开始tabBarController

@property (nonatomic , strong) HXTabBar *customTabBar;

添加tabBar

HXTabBar *customTabBar = [[HXTabBar alloc] init];
    customTabBar.frame = self.tabBar.bounds;
    customTabBar.delegate = self;
    [self.tabBar addSubview:customTabBar];
    self.customTabBar = customTabBar;

添加了自定义的tabBar,就需要删除系统自带的tabBar

// 删除系统自带的item
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    for (UIView *child in self.tabBar.subviews) {
        if ([child isKindOfClass:[UIControl class]]) {
            [child removeFromSuperview];
        }
    }
}

遵循按钮的代理,

- (void)tabbar:(HXTabBar *)tabBar didSelectButtonFrom:(NSInteger)from to:(NSInteger)to {
//    NSLog(@"%ld , %ld" , (long)from , (long)to);
    
    self.selectedIndex = to;
}

将控制器添加到tabBarController上

- (void)setupAllChildVC {
    [self setupChildViewController:[HXHomeViewController new] title:@"首页" image:@"tabbar_home" selectImage:@"tabbar_home_selected"];
    
    [self setupChildViewController:[HXMessageViewController new] title:@"消息" image:@"tabbar_message_center" selectImage:@"tabbar_message_center_selected"];
    
    [self setupChildViewController:[HXDiscoverViewController new] title:@"广场" image:@"tabbar_discover" selectImage:@"tabbar_discover_selected"];
    
    [self setupChildViewController:[HXMainViewController new] title:@"我" image:@"tabbar_music" selectImage:@"tabbar_music_selected"];
}

添加控制器进行封装的方法

/**
 初始化一个控制器

 @param childVC 需要初始化的子控制器
 @param title 子控制器的标题
 @param image tabbar的image
 @param selectImage 选中tabbar的image
 */
- (void)setupChildViewController:(UIViewController *)childVC title:(NSString *)title image:(NSString *)image selectImage:(NSString *)selectImage {
    childVC.title = title;
    childVC.tabBarItem.image = [UIImage imageNamed:image];
    // imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal取消图片渲染
    childVC.tabBarItem.selectedImage = [[UIImage imageNamed:selectImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    UINavigationController *childNav = [[UINavigationController alloc] initWithRootViewController:childVC];
    [self addChildViewController:childNav];
    
    // 添加
    [self.customTabBar addTabBarWithItem:childVC.tabBarItem];
}

到这里就搞定了,看看效果图吧

效果图1.png