美文网首页电商
关于TabBar中间添加一个突出按钮

关于TabBar中间添加一个突出按钮

作者: 这位网友 | 来源:发表于2016-10-25 11:40 被阅读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
    
    

    以上,希望我没有说错;
    有什么问题,请留言;

    相关文章

      网友评论

        本文标题:关于TabBar中间添加一个突出按钮

        本文链接:https://www.haomeiwen.com/subject/jqjruttx.html