【Objective-c】 自定制 tabBar

Paste_Image.png
最新项目中,遇到定制标签的需求,类试于『闲鱼』,于是找网上找了几个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];
    }

}

完整Demo20161130
出自JSOfJackChen

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容