1）前言
仿闲鱼APP，中间凸起Tab页面；
屏幕快照 2019-09-30 下午4.54.48.png
2）解决方案
首先创建CCTabBarController继承于UITabBarController，
然后和常规一样创建5个Item,中间的按钮不设置图片，代码如下
//添加子控制器
- (void)addChildViewControllers{
CCFishViewController *fish = [[CCFishViewController alloc] init];
fish.tabBarItem.title = @"闲鱼";
fish.tabBarItem.image = [UIImage imageNamed:@"home_normal"];
fish.tabBarItem.selectedImage = [UIImage imageNamed:@"home_highlight"];
CCPondViewController *pond = [[CCPondViewController alloc] init];
pond.tabBarItem.title = @"鱼塘";
pond.tabBarItem.image = [UIImage imageNamed:@"fishpond_normal"];
pond.tabBarItem.selectedImage = [UIImage imageNamed:@"fishpond_highlight"];
//不设置图片,先占位
CCReleaseViewController *release = [[CCReleaseViewController alloc] init];
release.tabBarItem.title = @"发布";
CCNewsViewController *news = [[CCNewsViewController alloc] init];
news.tabBarItem.title = @"消息";
news.tabBarItem.image = [UIImage imageNamed:@"message_normal"];
news.tabBarItem.selectedImage = [UIImage imageNamed:@"message_highlight"];
CCManagerViewController *manager = [[CCManagerViewController alloc] init];
manager.tabBarItem.title = @"我的";
manager.tabBarItem.image = [UIImage imageNamed:@"account_normal"];
manager.tabBarItem.selectedImage = [UIImage imageNamed:@"account_highlight"];
NSArray *itemArrays = @[fish,pond,release,news,manager];
self.viewControllers = itemArrays;
self.tabBar.tintColor = [UIColor blackColor];
}
这样实现后，应该是这个样子的
屏幕快照 2019-09-30 下午4.07.36.png
3)添加凸起按钮
现在我们可以在UITabBar上添加凸起按钮,让他的位置在没有设置的中间按钮偏上，
按钮的点击事件和中间按钮点击事件绑定。
⚠️这样直接添加会有问题，
①因为添加的按钮超过了UITabBar的父视图，这样超过了区域点击按钮会没有响应（如图红色区域所示）
屏幕快照 2019-09-30 下午4.04.41.png
②由于UITabBar是只读的，所以我们不能直接对他进行赋值，利用KVC访问私有变量将CCTabBar赋值给 UITabBar
代码实现如下
CCTabBar.h文件
@interface CCTabBar : UITabBar
@property (nonatomic,strong)UIButton *centerBtn;//中间按钮
@end
CCTabBar.m文件
- (instancetype)init{
self = [super init];
if (self) {
[self setUI];
}
return self;
}
//设置UI布局
- (void)setUI{
self.centerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//设置button大小为图片尺寸
UIImage *normalImage = [UIImage imageNamed:@"post_normal"];
self.centerBtn.frame = CGRectMake(0,0,normalImage.size.width,normalImage.size.height);
[self.centerBtn setImage:normalImage forState:UIControlStateNormal];
//去除选择时高亮
self.centerBtn.adjustsImageWhenHighlighted = NO;
//设置图片位置居中显示
self.centerBtn.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - normalImage.size.width)/2, - normalImage.size.height/2,normalImage.size.width, normalImage.size.height);
[self addSubview:self.centerBtn];
}
//解决超出superView点击无效问题
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
UIView *view = [super hitTest:point withEvent:event];
if (!view){
//转换坐标
CGPoint tempPoint = [self.centerBtn convertPoint:point fromView:self];
//判断点击的点是否在按钮区域内
if (CGRectContainsPoint(self.centerBtn.bounds, tempPoint)){
//返回按钮
return self.centerBtn;
}
}
return view;
}
利用KVC赋值
// CCTabBarController.m文件
@interface CCTabBarController ()<UITabBarControllerDelegate>
@property (nonatomic,strong)CCTabBar *tabBar;
@end
- (void)viewDidLoad {
[super viewDidLoad];
self.delegate = self;
self.tabBar = [[CCTabBar alloc] init];
[self.tabBar.centerBtn addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];
//设置背景颜色不透明
self.tabBar.translucent = NO;
//利用KVC,将自定义tabBar,赋给系统tabBar
[self setValue:self.tabBar forKeyPath:@"tabBar"];
[self addChildViewControllers];
}
点击按钮事件
- (void)buttonAction{
//关联中间按钮
self.selectedIndex = 2;
//播放动画
[self rotationAnimation];
}
tabBar相关代理事件
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{
if (tabBarController.selectedIndex == 2){
//选中中间的按钮
[self rotationAnimation];
}else {
[self.tabBar.centerBtn.layer removeAllAnimations];
}
}
旋转动画
- (void)rotationAnimation{
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI*0.5];
rotationAnimation.duration = 1.0;
rotationAnimation.repeatCount = DOMAIN;
[self.tabBar.centerBtn.layer addAnimation:rotationAnimation forKey:@"key"];
}
