应新项目需求，标签栏中间的按钮要自定义，老板还必须要原生的效果，毛玻璃之类的，所以之前封装过的都用不上了，重新弄一个。
换了一家新公司，之前都比较忙，项目节点，为了让老板觉得我比较忙，给自己找点事干~~~
上张图看效果
1、原理
- 思路就是
tabbar上 四个tabbarItem和中间一个button。 - 修改四个
tabbarItem的位置，空出中间button的位置。 - 如果中心的
button是像图中突出来的，超出tabbar的部分可能没有点击效果，所以还要重写一下hitTest: withEvent:方法。
2、上代码
2.1 New File... 一个UITabBar的继承类。添加实例方法
.h
#import <UIKit/UIKit.h>
#define RGB_S(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
@interface Tabbar : UITabBar
@property (strong, nonatomic) UIButton *centerButton;
- (instancetype)initWithCenterImage:(NSString *)centerImage selectImage:(NSString *)selectImage target:(id)target action:(SEL)action;
.m
- (instancetype)initWithCenterImage:(NSString *)centerImage selectImage:(NSString *)selectImage target:(id)target action:(SEL)action {
if (self = [super init]) {
self.userInteractionEnabled = YES;
self.tintColor = RGB_S(0x0FB5BA);
self.translucent = YES;
[self.centerButton setBackgroundImage:[UIImage imageNamed:centerImage] forState:UIControlStateNormal];
[self.centerButton setBackgroundImage:[UIImage imageNamed:selectImage] forState:UIControlStateHighlighted];
[self.centerButton setBackgroundImage:[UIImage imageNamed:selectImage] forState:UIControlStateSelected];
[self.centerButton addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
[self addSubview:self.centerButton];
}
return self;
}
layoutSubviews
- (void)layoutSubviews {
[super layoutSubviews];
CGFloat centerW = self.centerButton.currentBackgroundImage.size.width;
CGFloat centerH = self.centerButton.currentBackgroundImage.size.height;
self.centerButton.frame = CGRectMake((self.frame.size.width-centerW)/2, -14, centerW, centerH);
CGFloat itemW = self.frame.size.width / 5;
CGFloat itemIndex = 0;
// 计算每个item位置
for (UIView *child in self.subviews) {
Class class = NSClassFromString(@"UITabBarButton");
if ([child isKindOfClass:class]) {
child.frame = CGRectMake(itemIndex *itemW, child.frame.origin.y, itemW, child.frame.size.height);
itemIndex ++;
if (itemIndex == 2) {
itemIndex ++;
}
}
}
}
重写hitTest
#pragma mark - 重写hitTest方法
// TODO: 如果不重写此方法，centerButton超出tabbar的部分点击无效
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
// 1. isHidden==NO 表示当前在tabbar页面
if (self.isHidden == NO) {
// 1.1 获取触摸点坐标系转化到centerButton上的CGPoint
CGPoint newPoint = [self convertPoint:point toView:self.centerButton];
// 1.2 判断point是否在centerButton上，如果在，centerButton来处理点击事件
if ( [self.centerButton pointInside:newPoint withEvent:event]) {
return self.centerButton;
}
// 1.3 如不在，系统自行处理
else{
return [super hitTest:point withEvent:event];
}
}
// 2. 不在tabbar页面，系统自行处理点击事件
else {
return [super hitTest:point withEvent:event];
}
}
- (UIButton *)centerButton {
if (_centerButton == nil) {
_centerButton = [UIButton buttonWithType:UIButtonTypeCustom];
}
return _centerButton;
}
重点在重写hisTest 和修改item位置, 代码都在这了。
2.2 New File... 一个 UITabBarController的继承类
这里就看个人习惯了，怎么简单怎么敲吧，只是多了一个Button的点击事件
.m
- (void)viewDidLoad {
[super viewDidLoad];
// 首页
HomeViewController *homeVC = [[HomeViewController alloc]init];
[self setViewController:homeVC title:@"首页" image:@"TB_home_normal" selectImage:@"TB_home_press"];
// 功能
FunctionViewController *funcVC = [[FunctionViewController alloc]init];
[self setViewController:funcVC title:@"功能" image:@"TB_function_normal" selectImage:@"TB_function_press"];
// 社区
CommunityViewController *commVC = [[CommunityViewController alloc]init];
[self setViewController:commVC title:@"社区" image:@"TB_community_normal" selectImage:@"TB_community_press"];
// 我的
MineViewController *mineVC = [[MineViewController alloc]init];
[self setViewController:mineVC title:@"我的" image:@"TB_mine_normal" selectImage:@"TB_mine_press"];
self.customTabbar = [[Tabbar alloc]initWithCenterImage:@"homePage_saoyisao" selectImage:@"homePage_saoyisao" target:self action:@selector(CenterButtonClick)];
[self setValue:self.customTabbar forKey:@"tabBar"];
}
- (void)CenterButtonClick {
CenterViewController *centerVC = [[CenterViewController alloc]init];
[self presentViewController:centerVC animated:YES completion:nil];
}
自定义添加控制器方法
#pragma mark - 添加子控制器
-(void)setViewController:(UIViewController *)viewController title:(NSString *)title image:(NSString *)image selectImage:(NSString *)selectImage {
static NSInteger index = 0;
viewController.tabBarItem.title = title;
viewController.title = title;
viewController.tabBarItem.image = [[UIImage imageNamed:image] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
viewController.tabBarItem.selectedImage = [[UIImage imageNamed:selectImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
viewController.tabBarItem.tag = index;
index++;
UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:viewController];
[self addChildViewController:nav];
}
使用原生tabbar的好处一是视觉效果：半透明毛玻璃效果还是很高大上的（捂脸），还有转场效果，自己做还是挺浪费时间的。
二则是适配 iPhone X 省力很多，自定义的要适配好tabbar的高度，原生的根本不用你管。
代码不多，在网上找了几个demo，这个是整理出来的代码比较少，效果比较好的，不足请指正（再次捂脸）。
