屏幕快照 2019-04-29 上午9.36.53.png
我们在写tabbar时,有时会出现如上图的要求,中间的item要突出来.
我们要想实现这个需求只需要自定义一个中间突出的item.其余的几个就可以完全使用系统创建就可以.
1.首先创建一个ApplyTabBar继承自UITabBar
ApplyTabBar.h
#import <UIKit/UIKit.h>
@class ApplyTabBar;
@protocol ApplyTabBarDelegate <NSObject>
@optional
/** 点击按钮回调方法 */
- (void)tabBarPlusBtnClick:(ApplyTabBar *)tabBar;
@end
@interface ApplyTabBar : UITabBar
/** tabbar的协议方法 */
@property (nonatomic, weak) id<ApplyTabBarDelegate> myDelegate ;
@end
ApplyTabBar.m
#import "ApplyTabBar.h"
@interface ApplyTabBar ()
/** plus按钮 */
@property (nonatomic, weak) UIButton *plusBtn ;
@property UILabel *titleLabel;
@end
@implementation ApplyTabBar
- (instancetype)initWithFrame:(CGRect)frame{
if (self=[super initWithFrame:frame]) {
self.backgroundColor = [UIColor whiteColor];
UIButton *plusBtn = [[UIButton alloc] init];
[plusBtn setBackgroundImage:[UIImage imageNamed:@"applyImage"] forState:UIControlStateNormal];
[plusBtn setBackgroundImage:[UIImage imageNamed:@"applyImage"] forState:UIControlStateHighlighted];
self.plusBtn = plusBtn;
[plusBtn addTarget:self action:@selector(plusBtnDidClick) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:plusBtn];
self.titleLabel = [[UILabel alloc] init];
self.titleLabel.text = @"申领";
self.titleLabel.textAlignment = NSTextAlignmentCenter;
self.titleLabel.font = [UIFont systemFontOfSize:11];
[self.titleLabel sizeToFit];
self.titleLabel.textColor = [UIColor grayColor];
[self addSubview:self.titleLabel];
}
return self;
}
- (void)layoutSubviews{
[super layoutSubviews];
//系统自带的按钮类型是UITabBarButton，找出这些类型的按钮，然后重新排布位置，空出中间的位置
Class class = NSClassFromString(@"UITabBarButton");
int btnIndex = 0;
CGFloat btnHeight = 0;
for (UIView *btn in self.subviews) {//遍历tabbar的子控件
if ([btn isKindOfClass:class]) {//如果是系统的UITabBarButton，那么就调整子控件位置，空出中间位置
//每一个按钮的宽度==tabbar的五分之一(因为我这里一共五个item)
btn.frame = CGRectMake(self.frame.size.width / 5 * btnIndex, btn.frame.origin.y, self.frame.size.width / 5, btn.frame.size.height);
btnHeight = btn.frame.origin.y;
btnIndex++;
//如果是索引是2(从0开始的)，直接让索引++，目的就是让消息按钮的位置向右移动，空出来发布按钮的位置
if (btnIndex == 2) {
btnIndex++;
}
}
}
self.plusBtn.center = CGPointMake(self.center.x, self.plusBtn.center.y);
//调整发布按钮的中线点Y值
self.titleLabel.center = CGPointMake(self.plusBtn.center.x, btnHeight+ 47-self.titleLabel.frame.size.height/2);
self.plusBtn.center = CGPointMake(self.plusBtn.center.x, 5);
self.plusBtn.frame = CGRectMake(self.plusBtn.frame.origin.x, self.plusBtn.frame.origin.y, self.titleLabel.frame.origin.y*2-5, self.titleLabel.frame.origin.y*2-5);
[self bringSubviewToFront:self.plusBtn];
}
//点击了发布按钮
- (void)plusBtnDidClick{
//如果tabbar的代理实现了对应的代理方法，那么就调用代理的该方法
if ([self.delegate respondsToSelector:@selector(tabBarPlusBtnClick:)]) {
[self.myDelegate tabBarPlusBtnClick:self];
}
}
@end
无论你使用storyboard还是代码设置tabbar 我们都需要自定义一个UITabBarController.用来关联storyboard中UITabBarController或者直接使用自定义UITabBarController来添加中间的突出item
这里一stroyboard为例
1.storyboard创建UITabBarController并添加四个item
屏幕快照 2019-04-29 上午10.15.30.png
2.关联自定义UITabBarController
3.在viewdidload方法中添加代码
ApplyTabBar *tabbar = [[ApplyTabBar alloc] init];
tabbar.myDelegate = self;
[self setValue:tabbar forKeyPath:@"tabBar"];
到这我们就可以运行程序中间的突出item就出来了
后来发现一个问题,当我们点击中间突出item超出tabbar高度的地方发现不会触发我们的点击方法.
在这我们需要在ApplyTabBar.m中重写- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event方法
//重写hitTest方法，去监听发布按钮的点击，目的是为了让凸出的部分点击也有反应
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
//我们只需要在tabbar未隐藏时重写当前方法
if (self.isHidden == NO) {
//将当前tabbar的触摸点转换坐标系，转换到发布按钮的身上，生成一个新的点
CGPoint newP = [self convertPoint:point toView:self.plusBtn];
//判断是否在添加按钮上
if ( [self.plusBtn pointInside:newP withEvent:event]) {
return self.plusBtn;
}else{
return [super hitTest:point withEvent:event];
}
}else {
return [super hitTest:point withEvent:event];
}
}
