关于TabBar中间添加一个突出按钮
2016-10-25 本文已影响543人
这位网友
1.由于老板突然让做个小项目，我擦，那就做吧。
2.然后老板又突然说，你给中间加个这种App的按钮吧，我擦，那好吧。
3.我不知道该如何描述，应该就是五个按钮吧，tabbar.Items[4]。然后最中间那个很突出，点击有一点遮盖效果，下边放图你们瞄一眼就懂了。
根据热心网友的提示，进行了一些简单的修改，我也没有运行查看效果。
另外，给大家分享一个好的，高度自定义的TabBar控件，修改于：2019/1/31 17:12
1.png
2.png
如上边这俩图，大致就是这效果了，点击中间的按钮出现遮盖层，点击遮盖就销毁这个页面。
然后这里说一下，我是百度找的代码，然后修改了一下，这里放一下参考文档
你可能先要把代码复制粘贴下来，那我们就直接上代码，后边说需要用到的补充的东西。
先建一个@interface MyTabBar : UITabBar 不要问我是什么意思。
在MyTabbar.h中：
#import <UIKit/UIKit.h>
@class MyTabBar;
//MyTabBar的代理必须实现addButtonClick，以响应中间“+”按钮的点击事件
@protocol MyTabBarDelegate <NSObject>
-(void)addButtonClick:(MyTabBar *)tabBar;
@end
@interface MyTabBar : UITabBar
//指向MyTabBar的代理
@property (nonatomic,weak) id<MyTabBarDelegate> myTabBarDelegate;
@end
在MyTabbar.m中：
#import "MyTabbar.h"
#import "UIView+LD.h"
#define AddButtonMargin 10
@interface MyTabBar()
//指向中间“+”按钮
@property (nonatomic,weak) UIButton *addButton;
//指向“添加”标签
@property (nonatomic,weak) UILabel *addLabel;
@end
@implementation MyTabBar
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
-(instancetype)initWithFrame:(CGRect)frame
{
if(self = [super initWithFrame:frame])
{
//创建中间“+”按钮
UIButton *addBtn = [[UIButton alloc] init];
//设置默认背景图片
[addBtn setBackgroundImage:[UIImage imageNamed:@"app_button01"] forState:UIControlStateNormal];
//设置按下时背景图片
[addBtn setBackgroundImage:[UIImage imageNamed:@"app_button01"] forState:UIControlStateHighlighted];
//添加响应事件
[addBtn addTarget:self action:@selector(addBtnDidClick) forControlEvents:UIControlEventTouchUpInside];
//将按钮添加到TabBar
[self addSubview:addBtn];
self.addButton = addBtn;
//创建并设置“+”按钮下方的文本为“添加”
UILabel *addLbl = [[UILabel alloc] init];
addLbl.text = @"添加";
addLbl.font = [UIFont systemFontOfSize:11];
addLbl.textColor = [UIColor grayColor];
[addLbl sizeToFit];
[self addSubview:addLbl];
self.addLabel = addLbl;
}
return self;
}
//响应中间“+”按钮点击事件
-(void)addBtnDidClick
{
if([self.myTabBarDelegate respondsToSelector:@selector(addButtonClick:)])
{
[self.myTabBarDelegate addButtonClick:self];
}
}
-(void)layoutSubviews
{
[super layoutSubviews];
//去掉TabBar上部的横线
for (UIView *view in self.subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.bounds.size.height <= 1) //横线的高度为0.5
{
UIImageView *line = (UIImageView *)view;
line.hidden = YES;
}
}
//设置“+”按钮的位置
self.addButton.center = CGPointMake(self.centerX, self.frame.size.height * 0.5 - 1.5 * AddButtonMargin);
//设置“+”按钮的大小为图片的大小
self.addButton.size = CGSizeMake(self.addButton.currentBackgroundImage.size.width, self.addButton.currentBackgroundImage.size.height);
//设置“添加”label的位置
self.addLabel.center = CGPointMake(self.addButton.centerX, CGRectGetMaxY(self.addButton.frame) + 1 * AddButtonMargin);
int btnIndex = 0;
//系统自带的按钮类型是UITabBarButton，找出这些类型的按钮，然后重新排布位置，空出中间的位置
Class class = NSClassFromString(@"UITabBarButton");
for (UIView *btn in self.subviews) {//遍历TabBar的子控件
if ([btn isKindOfClass:class]) {//如果是系统的UITabBarButton，那么就调整子控件位置，空出中间位置
//每一个按钮的宽度等于TabBar的五分之一
btn.width = self.width / 5;
btn.x = btn.width * btnIndex;
btnIndex++;
//如果索引是1(即“+”按钮)，直接让索引加一
if (btnIndex == 2) {
btnIndex++;
}
}
}
//将“+”按钮放到视图层次最前面
[self bringSubviewToFront:self.addButton];
}
//重写hitTest方法，去监听"+"按钮和“添加”标签的点击，目的是为了让凸出的部分点击也有反应
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
//这一个判断是关键，不判断的话push到其他页面，点击“+”按钮的位置也是会有反应的，这样就不好了
//self.isHidden == NO 说明当前页面是有TabBar的，那么肯定是在根控制器页面
//在根控制器页面，那么我们就需要判断手指点击的位置是否在“+”按钮或“添加”标签上
//是的话让“+”按钮自己处理点击事件，不是的话让系统去处理点击事件就可以了
if (self.isHidden == NO)
{
//将当前TabBar的触摸点转换坐标系，转换到“+”按钮的身上，生成一个新的点
CGPoint newA = [self convertPoint:point toView:self.addButton];
//将当前TabBar的触摸点转换坐标系，转换到“添加”标签的身上，生成一个新的点
CGPoint newL = [self convertPoint:point toView:self.addLabel];
//判断如果这个新的点是在“+”按钮身上，那么处理点击事件最合适的view就是“+”按钮
if ( [self.addButton pointInside:newA withEvent:event])
{
return self.addButton;
}
//判断如果这个新的点是在“添加”标签身上，那么也让“+”按钮处理事件
else if([self.addLabel pointInside:newL withEvent:event])
{
return self.addButton;
}
else
{//如果点不在“+”按钮身上，直接让系统处理就可以了
return [super hitTest:point withEvent:event];
}
}
else
{
//TabBar隐藏了，那么说明已经push到其他的页面了，这个时候还是让系统去判断最合适的view处理就好了
return [super hitTest:point withEvent:event];
}
}
@end
上边这个MyTabbar就算是你自定义的一个UITabBar，里边编辑了中间那个突出的按钮。
然后我们还要自定义一个@interface MyTabbarController : UITabBarController
在MyTabbarController.h中 啥都没有
在MyTabbarController.m中:
#import "HHTabBarViewController.h"
#import "HHBaseNavigationController.h"
#import "MyTabbar.h"
#import "OneViewController.h"
#import "TwoViewController.h"
#import "ThreeViewController.h"
#import "FourViewController.h"
#import "HomeView.h"
@interface HHTabBarViewController ()<MyTabBarDelegate> //实现自定义TabBar协议
@end
@implementation HHTabBarViewController
+ (void)initialize {
// 设置UITabBarItem主题
[self setupTabBarItemTheme];
// 设置UITabBar主题
[self setupTabBarTheme];
}
+ (void)setupTabBarItemTheme {
UITabBarItem *tabBarItem = [UITabBarItem appearance];
/**设置文字属性**/
// 普通状态
[tabBarItem setTitleTextAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:12.0f], NSForegroundColorAttributeName : [UIColor grayColor]} forState:UIControlStateNormal];
// 选中状态
[tabBarItem setTitleTextAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:12.0f],NSForegroundColorAttributeName : [UIColor orangeColor]} forState:UIControlStateSelected];
}
+ (void)setupTabBarTheme {
// UITabBar *tabBar = [UITabBar appearance];
}
- (void)viewDidLoad {
[super viewDidLoad];
// 添加所有子控制器
[self addAllViewControllers];
// 创建自定义TabBar
[self addCustomTabBar];
}
#pragma mark - 添加所有子控制器
- (void)addAllViewControllers {
//将需要绑定的页面添加进来
OneViewController *OneVc = [OneViewController new];
[self addOneChildVc:OneVc title:@"幼儿园" imageName:@"app_icon02" selectedImageName:@"app_icon02_b"];
TwoViewController *TwoVc = [TwoViewController new];
[self addOneChildVc:TwoVc title:@"家庭教育" imageName:@"app_icon03" selectedImageName:@"app_icon03_b"];
ThreeViewController *ThreeVc = [ThreeViewController new];
[self addOneChildVc:ThreeVc title:@"发现" imageName:@"app_icon04" selectedImageName:@"app_icon04_b"];
FourViewController *FourVc = [FourViewController new];
[self addOneChildVc:FourVc title:@"我" imageName:@"app_icon01" selectedImageName:@"app_icon01_b"];
//创建自定义TabBar
MyTabBar *myTabBar = [[MyTabBar alloc] init];
myTabBar.myTabBarDelegate = self;
//利用KVC替换默认的TabBar
[self setValue:myTabBar forKey:@"tabBar"];
}
#pragma mark - 添加一个子控制器
- (void)addOneChildVc:(UIViewController *)childVc title:(NSString *)title imageName:(NSString *)imageName selectedImageName:(NSString *)seletedImageName {
childVc.tabBarItem.title = title;
childVc.tabBarItem.image = [UIImage imageNamed:imageName];
childVc.tabBarItem.selectedImage = [[UIImage imageNamed:seletedImageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//将NavigationController给包含进来。
[self addChildViewController:[[HHBaseNavigationController alloc] initWithRootViewController:childVc]];
}
#pragma mark - 自定义TabBar
- (void)addCustomTabBar {
// GLTabBar *tabBar = [GLTabBar new];
// tabBar.tabBarDelegate = self;
// [self setValue:tabBar forKeyPath:@"tabBar"];
}
#pragma mark - MyTabBarDelegate
-(void)addButtonClick:(MyTabBar *)tabBar
{
//测试中间“+”按钮是否可以点击并处理事件
// UIAlertController *controller = [UIAlertController alertControllerWithTitle:@"test" message:@"Test" preferredStyle:UIAlertControllerStyleAlert];
// UIAlertAction *action = [UIAlertAction actionWithTitle:@"test" style:UIAlertActionStyleDefault handler:nil];
// [controller addAction:action];
// [self presentViewController:controller animated:YES completion:nil];
HomeView *home = [[HomeView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:home];
}
@end
在项目中我们一般同样需要一个NavigationController，然后与TabBarController关联，可以参考另一片文章——
关于简单的自定义NavigationController和TabBarController
以上内容基本都算完成了，不过你可能问我#import "UIView+LD.h"是什么，这是一个分类，就是自己创建的对UIView的补充，里边有我们常用到的内容，怎么创建请去百度，具体内容，给你个链接看下——iOS开发-很有用的UIView分类
最后你可能还需要一点，就是那个遮盖层，因为没有内容，我就随便胡写了一下，你知道什么意思就行。重点是：它是一个UIView
#import "HomeView.h"
@implementation HomeView
#pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self initUI]; // 界面
}
return self;
}
#pragma mark - 创建UI
-(void)initUI
{
self.alpha = 0.5;
self.backgroundColor = [UIColor darkGrayColor];
[self addTapGesture];
}
#pragma mark - TapGesture
-(void)addTapGesture
{
// 单击的 Recognizer
UITapGestureRecognizer* singleRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(SingleTap)];
//点击的次数
singleRecognizer.numberOfTapsRequired = 1; // 单击
//给self.view添加一个手势监测；
[self addGestureRecognizer:singleRecognizer];
}
-(void)SingleTap
{
if (self) {
[self removeFromSuperview];
}
}
@end
以上，希望我没有说错；
有什么问题，请留言；
