iOS UITabBar中间按钮突起

选中前.png
选中后.png

这种效果在App中非常常见, 下面我们来讲解一下怎么实现.

1.创建一个继承自UITabBar的类(MainTabbar)

.h文件

#import <UIKit/UIKit.h>
@class MainTabbar;

@protocol MainTabbarDelegate <NSObject>

/**
 点击中间按钮 代理
 */
- (void)clickCenterBtnActionMainTabbar:(MainTabbar *_Nullable)mainTabbar;

@end


NS_ASSUME_NONNULL_BEGIN

@interface MainTabbar : UITabBar

/** 中间按钮 */
@property (nonatomic, strong) HighilgthedBtn *centerBtn;

/** 代理 */
@property (weak, nonatomic) id<MainTabbarDelegate> mainTabbarDelegate;

@end

.m文件

#import "MainTabbar.h"
#import "UIView+NTES.h"
#import "UIImage+Exction.h"

@interface MainTabbar ()

@end

@implementation MainTabbar

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

#pragma mark - 初始化UI
- (void)initView {
    self.backgroundColor = [UIColor clearColor];
    
    UIImageView *bottomImg = [[UIImageView alloc] init];
    bottomImg.image = [UIImage imageNamed:@"底部导航背景"];
    bottomImg.contentMode = UIViewContentModeScaleAspectFill;
    bottomImg.left = 0;
    bottomImg.top = -33;
    bottomImg.width = [UIScreen mainScreen].bounds.size.width;
    bottomImg.height = 82;
    [self addSubview:bottomImg];
    
    self.centerBtn = [HighilgthedBtn buttonWithType:UIButtonTypeCustom];
    //  设定button大小为适应图片
    UIImage *normalImage = [UIImage imageNamed:@"韩影"];
    self.centerBtn.size = normalImage.size;
    self.centerBtn.centerX = [UIScreen mainScreen].bounds.size.width / 2.0;
    self.centerBtn.top = -normalImage.size.height / 2.0 + 10;
    [self.centerBtn setImage:normalImage forState:UIControlStateNormal];
    [self.centerBtn setImage:[UIImage imageNamed:@"韩影选中"] forState:UIControlStateSelected];
    [self.centerBtn addTarget:self action:@selector(clickCenterBtnAction) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:self.centerBtn];

}

//重写hitTest方法，去监听"+"按钮和“添加”标签的点击，目的是为了让凸出的部分点击也有反应
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    
    //这一个判断是关键，不判断的话push到其他页面，点击“+”按钮的位置也是会有反应的，这样就不好了
    //self.isHidden == NO 说明当前页面是有TabBar的，那么肯定是在根控制器页面
    //在根控制器页面，那么我们就需要判断手指点击的位置是否在“+”按钮或“添加”标签上
    //是的话让“+”按钮自己处理点击事件，不是的话让系统去处理点击事件就可以了
    if (self.isHidden == NO)
    {
        
        //将当前TabBar的触摸点转换坐标系，转换到“+”按钮的身上，生成一个新的点
        CGPoint newA = [self convertPoint:point toView:self.centerBtn];
        
        //判断如果这个新的点是在“+”按钮身上，那么处理点击事件最合适的view就是“+”按钮
        if ( [self.centerBtn pointInside:newA withEvent:event])
        {
            return self.centerBtn;
        }
        else
        {//如果点不在“+”按钮身上，直接让系统处理就可以了
            
            return [super hitTest:point withEvent:event];
        }
    }
    else
    {
        //TabBar隐藏了，那么说明已经push到其他的页面了，这个时候还是让系统去判断最合适的view处理就好了
        return [super hitTest:point withEvent:event];
    }
}



- (void)layoutSubviews {
    [super layoutSubviews];
    //去掉TabBar上部的横线
    for (UIView *view in self.subviews) {
        //横线的高度为0.5
      if ([view isKindOfClass:[UIImageView class]] && view.bounds.size.height <= 1) {
        UIImageView *line = (UIImageView *)view;
        line.hidden = YES;
       }
    }
}


#pragma mark - 中间按钮 点击事件
- (void)clickCenterBtnAction {
    // 执行代理
    if ([self.mainTabbarDelegate respondsToSelector:@selector(clickCenterBtnActionMainTabbar:)]) {
        self.centerBtn.selected = YES;
        [self.mainTabbarDelegate clickCenterBtnActionMainTabbar:self];
    }
}
@end

使用MainTabbar, 创建一个继承自UITabBarController的类(MainTabBarVC)

@interface MainTabBarVC ()<MainTabbarDelegate, UITabBarControllerDelegate>
/** tababr */
@property (nonatomic, strong) MainTabbar *mainTabbar;
@end

@implementation MainTabBarVC

- (void)viewDidLoad {
    [super viewDidLoad];
    MainTabbar *mainTabbar = [[MainTabbar alloc] init];
    //透明设置为NO，显示白色，view的高度到tabbar顶部截止，YES的话到底部
    mainTabbar.translucent = NO;
    mainTabbar.mainTabbarDelegate = self;
    //利用KVC 将自己的tabbar赋给系统tabBar
    [self setValue:mainTabbar forKeyPath:@"tabBar"];
    
    // 赋值
    self.mainTabbar = mainTabbar;
    
    // 代理
    self.delegate = self;
    
    [self addChildVC:[[MovieLibraryVC alloc] init] imageName:@"影库" selectedImage:@"影库选中"];
    [self addChildVC:[[FigureShadowVC alloc] init] imageName:@"图影" selectedImage:@"图影选中"];
    [self addChildVC:[[HanYingVC alloc] init] imageName:@"" selectedImage:@""];
    [self addChildVC:[[KoreanDramasVC alloc] init] imageName:@"韩剧" selectedImage:@"韩剧选中"];
    [self addChildVC:[[YS_MyVC alloc] init] imageName:@"我的" selectedImage:@"我的选中"];
    
}

- (void)addChildVC:(UIViewController *)vc imageName:(NSString *)imageName selectedImage:(NSString *)selectedImage {
    vc.tabBarItem.image = [UIImage imageNamed:imageName];
    vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
    MainNav *nav = [[MainNav alloc] initWithRootViewController:vc];
    [self addChildViewController:nav];
}

#pragma mark - UITabBarControllerDelegate 代理
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    self.mainTabbar.centerBtn.selected = (tabBarController.selectedIndex == 2);
}


#pragma mark - MainTabbarDelegate 代理
- (void)clickCenterBtnActionMainTabbar:(MainTabbar *)mainTabbar {
    self.selectedIndex = 2;
}

这样就可以实现效果了.