最新项目中,遇到定制标签的需求,类试于『闲鱼』,于是找网上找了几个Demo学习,发现实现的方法大概有两种
1、创建一个UIView覆盖在原来的tabBar上方,在UIView中定义一个协议,并且通过这个协议方法回调来设置当前tabBar的index,从而实现视图的切换。当然这也能实现同样的效果,不过不推荐使用这种方法,毕竟这始终是一种土方法,后期添加功能不方便,例如添加红点。
2、通过继承重写的方法,修改原生tabBar的布局,中间的『加号』是通过创建一个按钮,添加原生tabBar上的,并且通过协议方法回调加号按钮的点击事件。
详细请看代码:
tabBarViewController子类
#import "MZTabBarViewController.h"
#import "OneViewController.h"
#import "TwoViewController.h"
#import "ThreeViewController.h"
#import "FoureViewController.h"
#import "MZTabBar.h"
#import "MZNavigationController.h"
@interface MZTabBarViewController ()<MZTabBarDelegate>
@end
@implementation MZTabBarViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self addViewController:[OneViewController new] title:@"闲鱼" ItemImage:[UIImage imageNamed:@"home_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"home_highlight@2x.png"]];
[self addViewController:[OneViewController new] title:@"鱼塘" ItemImage:[UIImage imageNamed:@"fish_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"fish_highlight@2x.png"]];
[self addViewController:[OneViewController new] title:@"消息" ItemImage:[UIImage imageNamed:@"message_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"message_highlight@2x.png"]];
[self addViewController:[OneViewController new] title:@"我的" ItemImage:[UIImage imageNamed:@"account_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"account_highlight@2x.png"]];
MZTabBar *tabBar = [[MZTabBar alloc]init];
tabBar.delegate = self;
//重点:因为系统的tabBar的属性是只读的,所以只能通过KVC方式替换系统的tabBar
//替换tabBar的目的:1、创建"发布按钮" 2、重新布局item的位置
[self setValue:tabBar forKey:@"tabBar"];
}
- (void)addViewController:(UIViewController *)vc title:(NSString *)title ItemImage:(UIImage *)image ItemSelectedImage:(UIImage *)selectedImage{
vc.title = title;
vc.tabBarItem.image = image;
//设置item选中图片,前提是要设置图片的模式『原图』展示
vc.tabBarItem.selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
NSDictionary *dicNor = @{
NSForegroundColorAttributeName:[UIColor colorWithRed:123/255.0 green:123/255.0 blue:123/255.0 alpha:1.0]
};
[vc.tabBarItem setTitleTextAttributes:dicNor forState:UIControlStateNormal];
NSDictionary *dicSelected = @{
NSForegroundColorAttributeName:[UIColor orangeColor]
};
[vc.tabBarItem setTitleTextAttributes:dicSelected forState:UIControlStateSelected];
MZNavigationController *nac = [[MZNavigationController alloc]initWithRootViewController:vc];
[self addChildViewController:nac];
}
#pragma mark - MZTabBar Delegate
- (void)tabBarDidClickPlusButton:(MZTabBar *)tabBar{
NSLog(@"中间加号按钮点击");
}
NavigationCtroller 子类
#import "MZNavigationController.h"
@interface MZNavigationController ()
@end
@implementation MZNavigationController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
}
+ (void)initialize{
UIBarButtonItem *barItem = [UIBarButtonItem appearance];
//设置普通状态
NSDictionary *dicNormal = @{NSForegroundColorAttributeName:[UIColor orangeColor],NSFontAttributeName:[UIFont systemFontOfSize:13]};
[barItem setTitleTextAttributes:dicNormal forState:UIControlStateNormal];
//设置不可用状态
NSDictionary *dicDisabled = @{NSForegroundColorAttributeName:[UIColor colorWithRed:0.6 green:0.6 blue:0.6 alpha:0.7],NSFontAttributeName:[UIFont systemFontOfSize:13]};
[barItem setTitleTextAttributes:dicDisabled forState:UIControlStateDisabled];
}
//重写这个方法,目的是拦截所有push进来的控制器
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{
if (self.viewControllers.count>0) {
//这是push进来的控制器不是第一个控制器
viewController.hidesBottomBarWhenPushed = YES;
}
[super pushViewController:viewController animated:animated];
}
@end
tabBar的子类
#import <UIKit/UIKit.h>
@class MZTabBar;
@protocol MZTabBarDelegate<UITabBarDelegate>
- (void)tabBarDidClickPlusButton:(MZTabBar *)tabBar;
@end
@interface MZTabBar : UITabBar
@property (nonatomic,weak) id<MZTabBarDelegate>delegate;
@end
#import "MZTabBar.h"
@interface MZTabBar()
@property (nonatomic,strong) UIButton *plusBtn;
@end
@implementation MZTabBar
- (instancetype)init{
self = [super init];
if (self) {
UIButton *plusBtn = [[UIButton alloc]init];
[plusBtn setBackgroundImage:[UIImage imageNamed:@"post_normal@2x.png"] forState:UIControlStateNormal];
[plusBtn addTarget:self action:@selector(plusBtnClick:) forControlEvents:UIControlEventTouchUpInside];
CGSize newSize = plusBtn.currentBackgroundImage.size;
plusBtn.frame = CGRectMake(0, 0, newSize.width, newSize.height);
[self addSubview:plusBtn];
_plusBtn = plusBtn;
}
return self;
}
- (void)plusBtnClick:(UIButton *)sender{
[self.delegate tabBarDidClickPlusButton:self];
}
- (void)layoutSubviews{
[super layoutSubviews];
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
//设置发布按钮的位置
_plusBtn.center = CGPointMake(width/2, height/2-20);
//遍历tabBar的所有控件,并重新布局,中间的位置空出来
//系统自带的按钮类型是UITabBarButton
Class class = NSClassFromString(@"UITabBarButton");
int index = 0;
for (UIView *btn in self.subviews) {
if ([btn isKindOfClass:class]) {
CGRect rect = btn.frame;
rect.origin.x = width/5 * index;
rect.size.width = width/5;
btn.frame = rect;
index++;
//如果是中间位置,则直接跳过,空出来
if (index == 2) {
index++;
}
}
}
}
//重写hitTest方法,去监听发布按钮的点击,目的按时为了让凸出部分点击也有反应
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
/*
这个判断是关键,不判断的话push到其他页面,点击发布按钮的位置也是会有反应的,这样就不好了
self.isHidden == NO 说明当前页面是有tabBar的,那么肯定是再导航控制器的根控制器页面
在导航控制器根控制器页面,那么我们就需要判断手指点击的位置是否再发布按钮身上
是的话,让发布按钮自己处理点击事件,不是的话让系统去处理点击事件就可以了
这里有一个理解的关键点:传动链是从下往上的,也就是从最底层开始往顶层遍历UIResporter的子类
因为这个框架是UITabBar -- UINavigation -- ViewController -- view,所以Window首先
是把UIEvent事件传递给UITabBar的,这时重写hitTest方法,拦截事件并返回plusBtn,系统就会继续调用
plusBtn的hitTest方法遍历其所有的子类,确定事件的第一响应者。
*/
if (self.isHidden == NO) {
//将当前tabBar的触摸点转换坐标系,转换到发布按钮的身上,生成一个新的点
CGPoint newPoint = [self convertPoint:point toView:self.plusBtn];
//判断这个新的点是否在发布按钮身上,若是,那么处理点击事件的最合适的view就是发布按钮
if ([self.plusBtn pointInside:newPoint withEvent:event]) {
return self.plusBtn;
}else{
//如果不在发布按钮身上,直接让系统处理就好
return [super hitTest:point withEvent:event];
}
}else{
//tabBar隐藏了,那么说明已经push到其他的页面了,这个时候还是让系统去判断最合适的view处理就好了
return [super hitTest:point withEvent:event];
}
}