IMG_0081.PNG
如上图是本文将要实现的界面。
没有文字带大按钮的tabbar。
创建一个UITabBarController
#import "ICETabBarController.h"
#import "ICETabbar.h"
@interface ICETabBarController ()
@end
@implementation ICETabBarController
- (void)viewDidLoad {
[super viewDidLoad];
UIViewController *vc1 = [[UIViewController alloc]init];
vc1.view.backgroundColor = [UIColor orangeColor];
UIViewController *vc2 = [[UIViewController alloc]init];
vc2.view.backgroundColor = [UIColor whiteColor];
[self loadDefaultData:vc1 image:@"btn_index_home_selected"];
[self loadDefaultData:vc2 image:@"btn_index_wd_selected"];
//利用kvc将系统的tabbar替换成ICETabbar
ICETabbar *tabbar = [[ICETabbar alloc]init];
[self setValue:tabbar forKey:@"tabBar"];
[tabbar setBtnClickBlock:^{
NSLog(@"click Center");
}];
}
/**
加载vc和图片
@param vc vc
@param img img
*/
- (void)loadDefaultData:(UIViewController *)vc image:(NSString *)img {
UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
[self addChildViewController:nav];
vc.tabBarItem.image = [UIImage imageNamed:img];
vc.tabBarItem.imageInsets = UIEdgeInsetsMake(4.5, 0, -4.5, 0);
//UIOffsetMake(CGFloat horizontal, CGFloat vertical)
//将verical设置为MAXFLOAT的时候没有title
vc.tabBarItem.titlePositionAdjustment = UIOffsetMake(0, MAXFLOAT);
}
@end
#import <UIKit/UIKit.h>
typedef void(^ICETabBarClickBlock)();
@interface ICETabbar : UITabBar
- (void)setBtnClickBlock:(ICETabBarClickBlock)block;
@end
#import "ICETabbar.h"
#import "UIView+HKExtension.h"
@interface ICETabbar ()
@property (nonatomic, strong) UIButton *centerBtn;
@property (nonatomic, copy ) ICETabBarClickBlock block;
@end
@implementation ICETabbar
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor blueColor];
[self setBackgroundImage:[UIImage new]];
[self setShadowImage:[UIImage new]];
self.centerBtn = [[UIButton alloc]init];
[self.centerBtn setBackgroundImage:[UIImage imageNamed:@"tab_launch"]
forState:UIControlStateNormal];
[self.centerBtn setBackgroundImage:[UIImage imageNamed:@"tab_launch"]
forState:UIControlStateHighlighted];
self.centerBtn.size = self.centerBtn.currentBackgroundImage.size;
[self.centerBtn addTarget:self action:@selector(centerBtnDidClick) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:self.centerBtn];
}
return self;
}
- (void)centerBtnDidClick {
if (self.block) {
self.block();
}
}
- (void)setBtnClickBlock:(ICETabBarClickBlock)block {
self.block = block;
}
- (void)layoutSubviews {
[super layoutSubviews];
//系统自带的按钮类型是UITabBarButton，找出这些类型的按钮，然后重新排布位置，空出中间的位置
Class class = NSClassFromString(@"UITabBarButton");
self.centerBtn.centerX = self.centerX;
//调整中间按钮的中线点Y值
self.centerBtn.centerY = (self.height - (self.centerBtn.height - self.height)) * 0.5;
NSInteger btnIndex = 0;
for (UIView *btn in self.subviews) {//遍历tabbar的子控件
if ([btn isKindOfClass:class]) {//如果是系统的UITabBarButton，那么就调整子控件位置，空出中间位置
//按钮宽度为TabBar宽度减去中间按钮宽度的一半
btn.width = (self.width - self.centerBtn.width) * 0.5;
//中间按钮前的宽度,这里就3个按钮，中间按钮Index为1
if (btnIndex < 1) {
btn.x = btn.width * btnIndex;
} else { //中间按钮后的宽度
btn.x = btn.width * btnIndex + self.centerBtn.width;
}
btnIndex++;
//如果是索引是0(从0开始的)，直接让索引++，目的就是让消息按钮的位置向右移动，空出来中间按钮的位置
if (btnIndex == 0) {
btnIndex++;
}
}
}
[self bringSubviewToFront:self.centerBtn];
}
/**
重写hitTest方法，去监听中间按钮的点击，目的是为了让凸出的部分点击也有反应
@param point 点击point
@param event 事件
@return view
*/
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
//判断当前手指是否点击到中间按钮上，如果是，则响应按钮点击，其他则系统处理
//首先判断当前View是否被隐藏了，隐藏了就不需要处理了
if (self.isHidden == NO) {
//将当前tabbar的触摸点转换坐标系，转换到中间按钮的身上，生成一个新的点
CGPoint newP = [self convertPoint:point toView:self.centerBtn];
//判断如果这个新的点是在中间按钮身上，那么处理点击事件最合适的view就是中间按钮
if ( [self.centerBtn pointInside:newP withEvent:event]) {
return self.centerBtn;
}
}
return [super hitTest:point withEvent:event];
}
Category
#import <UIKit/UIKit.h>
@interface UIView (HKExtension)
@property (nonatomic, assign) CGFloat x;
@property (nonatomic, assign) CGFloat y;
@property (nonatomic, assign) CGFloat width;
@property (nonatomic, assign) CGFloat height;
@property (nonatomic, assign) CGFloat centerX;
@property (nonatomic, assign) CGFloat centerY;
@property (nonatomic, assign) CGSize size;
@end
#import "UIView+HKExtension.h"
@implementation UIView (HKExtension)
- (void)setX:(CGFloat)x {
CGRect frame = self.frame;
frame.origin.x = x;
self.frame = frame;
}
- (CGFloat)x {
return self.frame.origin.x;
}
- (void)setY:(CGFloat)y {
CGRect frame = self.frame;
frame.origin.y = y;
self.frame = frame;
}
- (CGFloat)y {
return self.frame.origin.y;
}
- (void)setWidth:(CGFloat)width {
CGRect frame = self.frame;
frame.size.width = width;
self.frame = frame;
}
- (CGFloat)width {
return self.frame.size.width;
}
- (void)setHeight:(CGFloat)height {
CGRect frame = self.frame;
frame.size.height = height;
self.frame= frame;
}
- (CGFloat)height {
return self.frame.size.height;
}
- (void)setSize:(CGSize)size {
CGRect frame = self.frame;
frame.size = size;
self.frame = frame;
}
- (CGSize)size {
return self.frame.size;
}
- (void)setCenterX:(CGFloat)centerX {
CGPoint center = self.center;
center.x = centerX;
self.center = center;
}
- (CGFloat)centerX {
return self.center.x;
}
- (void)setCenterY:(CGFloat)centerY {
CGPoint center = self.center;
center.y = centerY;
self.center = center;
}
- (CGFloat)centerY {
return self.center.y;
}
利用kvc替换系统自带tabbar
[self setValue:tabbar forKey:@"tabBar"];ICETabbar 大的点击按钮超出tabbar范围重写- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event ; 方法，使超出范围可以点击。
