UITabBarController的使用自定义UITabBar样式

秒速五厘米 2022-03-11 09:29 392阅读 0赞

UITabBarController的使用过程中，可能会出现需要自定义UITabBar样式的时候，下面介绍两种实现方法。

方法1  
存在N个视图控制器，且需要使用自定义的UITabBar样式来进行交互操作哪个视图控制器的显示。具体做法是在UITabBarController中的view中添加自定义样式的子视图，设置子视图响应方法跳转对应的视图控制器，然后再通过UITabBarController的代理方法重置自定义样式的子视图状态。

代码示例，继承UITabBarController的方式实现

#import "BaseTabBarController.h"
    #import "MainVC.h"
    #import "MineVC.h"
    #import "AddVC.h"
    
    @interface BaseTabBarController () <UITabBarControllerDelegate>
    
    @property (nonatomic, strong) UIButton *addButton;
    
    @end
    
    @implementation BaseTabBarController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        
        [self initlizeAddButton];
    }
    
    #pragma mark - 实现
    
    - (void)initlizeAddButton
    {
        self.delegate = self;
        [self addChildVc:[[MainVC alloc] init] title:@"首页" image:@"homeNormal" selectedImage:@"homeSelected"];
        [self addChildVc:[[AddVC alloc] init] title:nil image:nil selectedImage:nil];
        [self addChildVc:[[MineVC alloc] init] title:@"我的" image:@"mineNormal" selectedImage:@"mineSelected"];
    
        self.tabBar.backgroundColor = [UIColor yellowColor];
        
        self.addButton = [[UIButton alloc] initWithFrame:CGRectMake((self.tabBar.frame.size.width - 70.0) / 2, (self.view.frame.size.height - 70.0) - 44.0, 70.0, 70.0)];
        self.addButton.backgroundColor = [UIColor yellowColor];
        self.addButton.layer.cornerRadius = 35;
        self.addButton.layer.masksToBounds = YES;
        [self.addButton setImage:[UIImage imageNamed:@"addNormal"] forState:UIControlStateNormal];
        [self.addButton setImage:[UIImage imageNamed:@"addSelected"] forState:UIControlStateSelected];
        [self.addButton addTarget:self action:@selector(addClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:self.addButton];
        [self.view bringSubviewToFront:self.addButton];
    }
    
    - (void)addClick:(UIButton *)button
    {
        button.selected = YES;
        button.userInteractionEnabled = NO;
        self.selectedIndex = 1;
    }
    
    - (void)addChildVc:(UIViewController *)childVc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
    {
        // 设置子控制器的文字(可以设置tabBar和navigationBar的文字)
        if (title) {
            childVc.title = title;
        }
        
        // 设置子控制器的tabBarItem图片
        if (image) {
            childVc.tabBarItem.image = [UIImage imageNamed:image];
        }
        
        // 禁用图片渲染
        if (selectedImage) {
            childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        }
        
        // 设置文字的样式
        [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor blackColor]} forState:UIControlStateNormal];
        [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor]} forState:UIControlStateSelected];
        // 为子控制器包装导航控制器
        UINavigationController *navigationVc = [[UINavigationController alloc] initWithRootViewController:childVc];
        // 添加子控制器
        [self addChildViewController:navigationVc];
    }
    
    #pragma mark - delegate
    
    - (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
    {
        // 方法2 时
        if (self.addButton) {
            self.addButton.selected = NO;
            self.addButton.userInteractionEnabled = YES;
        }
        return YES;
    }
    
    @end

效果图  
![在这里插入图片描述][201903071823162.gif]

方法2  
存在N个视图控制器，且需要使用自定义的UITabBar样式来进行交互操作其他，N为偶数；如有两个视图控制器，然后自定义的样式控制其他视图。具体做法继承`UITabBar`，并在UITabBarController中设置。

代码示例，继承UITabBarController的方式实现

#import <UIKit/UIKit.h>
    
    @protocol AddItemTabBarDelegate <NSObject>
    
    - (void)tabBarItemClick:(UIButton *)button;
    
    @end
    
    @interface AddItemTabBar : UITabBar
    
    @property (nonatomic, weak) id<AddItemTabBarDelegate>delegate;
    
    @property (nonatomic, strong) UIButton *button;
    @property (nonatomic, strong) UILabel *label;
    
    /// 根据实际的视图数组数设置（如：实际的UITabBarController的viewControllers数量为2，则为2）
    @property (nonatomic, assign) NSInteger number;
    
    @end
    
    #import "AddItemTabBar.h"
    
    @interface AddItemTabBar ()
    
    @end
    
    @implementation AddItemTabBar
    
    - (instancetype)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
            self.translucent = NO;
            //
            self.button = [UIButton buttonWithType:UIButtonTypeCustom];
            self.button.backgroundColor = [UIColor greenColor];
            self.button.layer.masksToBounds = YES;
            [self.button setImage:[UIImage imageNamed:@"addNormal"] forState:UIControlStateNormal];
            [self.button setImage:[UIImage imageNamed:@"addSelected"] forState:UIControlStateSelected];
            [self.button addTarget:self action:@selector(plusBtnDidClick) forControlEvents:UIControlEventTouchUpInside];
            [self addSubview:self.button];
            //
            self.label = [[UILabel alloc] init];
            self.label.font = [UIFont systemFontOfSize:10];
            self.label.textColor = [UIColor blackColor];
            self.label.textAlignment = NSTextAlignmentCenter;
            [self addSubview:self.label];
        }
        return self;
    }
    
    - (void)plusBtnDidClick
    {
        if (self.delegate && [self.delegate respondsToSelector:@selector(tabBarItemClick:)]) {
            [self.delegate tabBarItemClick:self.button];
        }
    }
    
    // 调整子视图的布局
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        CGFloat width = self.frame.size.width / (self.number + 1);
        Class class = NSClassFromString(@"UITabBarButton");
        for (UIView *view in self.subviews) {
            if ([view isEqual:self.label]) {
                // self.label
                view.frame = CGRectMake(0, 0, width, 15);
                view.center = CGPointMake(self.frame.size.width / self.number, self.frame.size.height - view.frame.size.height + 8);
            } else if ([view isEqual:self.button]) {
                // self.button
                CGSize size = CGSizeMake(width, self.frame.size.height);
                size = CGSizeMake(80.0, 80.0);
                view.layer.cornerRadius = size.width / 2;
                view.frame = CGRectMake(0, 0, size.width, size.height);
    //            [view sizeToFit];
                view.center = CGPointMake(self.frame.size.width / self.number, 10);
            } else if ([view isKindOfClass:class]) {
                // system button
                CGRect frame = view.frame;
                int indexFromOrign = view.frame.origin.x/width;
                // 防止UIView *view in self.subviews 获取到的不是有序的
                if (indexFromOrign >= (3 - 1) / 2) {
                    indexFromOrign++;
                }
                CGFloat x = indexFromOrign * width;
                //如果是系统的UITabBarButton，那么就调整子控件位置，空出中间位置
                view.frame = CGRectMake(x, view.frame.origin.y, width, frame.size.height);
                
                // 调整badge postion
                for (UIView *badgeView in view.subviews){
                    NSString *className = NSStringFromClass([badgeView class]);
                    // Looking for _UIBadgeView
                    if ([className rangeOfString:@"BadgeView"].location != NSNotFound) {
                        badgeView.layer.transform = CATransform3DIdentity;
                        badgeView.layer.transform = CATransform3DMakeTranslation(-17.0, 1.0, 1.0);
                        break;
                    }
                }
            }
        }
    }
    
    
    - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
    {
        // 这一个判断是关键，不判断的话push到其他页面，点击发布按钮的位置也是会有反应的，这样就不好了
        // self.isHidden == NO 说明当前页面是有tabbar的，那么肯定是在导航控制器的根控制器页面
        // 在导航控制器根控制器页面，那么我们就需要判断手指点击的位置是否在发布按钮身上
        // 是的话让发布按钮自己处理点击事件，不是的话让系统去处理点击事件就可以了
        if (self.isHidden == NO) {
            // 将当前tabbar的触摸点转换坐标系，转换到发布按钮的身上，生成一个新的点
            CGPoint newP = [self convertPoint:point toView:self.button];
            
            // 判断如果这个新的点是在发布按钮身上，那么处理点击事件最合适的view就是发布按钮
            if ( [self.button pointInside:newP withEvent:event]) {
                return self.button;
            } else {
                //如果点不在发布按钮身上，直接让系统处理就可以了
                return [super hitTest:point withEvent:event];
            }
        } else {
            //tabbar隐藏了，那么说明已经push到其他的页面了，这个时候还是让系统去判断最合适的view处理就好了
            return [super hitTest:point withEvent:event];
        }
    }
    
    @end

@interface BaseTabBarController : UITabBarController
    
    @property (nonatomic, copy) void (^showClick)(UIButton *button);
    
    @end
    
    #import "BaseTabBarController.h"
    #import "MainVC.h"
    #import "MineVC.h"
    #import "AddVC.h"
    
    #import "AddItemTabBar.h"
    
    @interface BaseTabBarController () <AddItemTabBarDelegate, UITabBarControllerDelegate>
    
    @property (nonatomic, strong) UIButton *addButton;
    
    @end
    
    @implementation BaseTabBarController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        
        //  自定义样式
        [self initlizeAddItemController];
    }
    
    #pragma mark - 自定义tabbarItem
    
    - (void)initlizeAddItemController
    {
        [self setupVC];
        
        AddItemTabBar *tab = [[AddItemTabBar alloc] initWithFrame:CGRectZero];
        tab.number = 2;
        tab.delegate = self;
        [self setValue:tab forKey:@"tabBar"];
    }
    
    - (void)setupVC
    {
        self.delegate = self;
        
        [self addChildVc:[[MainVC alloc] init] title:@"首页" image:@"homeNormal" selectedImage:@"homeSelected"];
        [self addChildVc:[[MineVC alloc] init] title:@"我的" image:@"mineNormal" selectedImage:@"mineSelected"];
    }
    
    - (void)addChildVc:(UIViewController *)childVc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
    {
        // 设置子控制器的文字(可以设置tabBar和navigationBar的文字)
        if (title) {
            childVc.title = title;
        }
        
        // 设置子控制器的tabBarItem图片
        if (image) {
            childVc.tabBarItem.image = [UIImage imageNamed:image];
        }
        
        // 禁用图片渲染
        if (selectedImage) {
            childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        }
        
        // 设置文字的样式
        [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor blackColor]} forState:UIControlStateNormal];
        [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor]} forState:UIControlStateSelected];
        // 为子控制器包装导航控制器
        UINavigationController *navigationVc = [[UINavigationController alloc] initWithRootViewController:childVc];
        // 添加子控制器
        [self addChildViewController:navigationVc];
    }
    
    - (void)tabBarItemClick:(UIButton *)button
    {
        button.selected = !button.selected;
        if (self.addButton == nil) {
            self.addButton = button;
        }
        if (self.showClick) {
            self.showClick(button);
        }
    }
    
    #pragma mark - delegate
    
    - (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
    {
        if (self.addButton) {
            self.addButton.selected = NO;
        }
    
        UIApplication.sharedApplication.delegate.window.backgroundColor = [UIColor whiteColor];
        
        return YES;
    }
    
    @end

BaseTabBarController *rootVC = [[BaseTabBarController alloc] init];
        self.window.rootViewController = rootVC;
        self.window.backgroundColor = [UIColor whiteColor];
        [self.window makeKeyAndVisible];
        
        rootVC.showClick = ^(UIButton * _Nonnull button) {
            self.window.backgroundColor = [UIColor orangeColor];
        };

效果图  
![在这里插入图片描述][20190307184125279.gif]

[201903071823162.gif]: /images/20220311/f9a7fb13e1314ef3bcb6d175dc69c8c7.png
[20190307184125279.gif]: /images/20220311/f720242eabf34fc8bad063f39ebbf849.png