iOS 自定义TabBar--- 中间凸起按钮

使用KVO实现UITabBar中间按钮放大的方法

demo

.h文件实现

#import <UIKit/UIKit.h>
//进入弹层状态的通知
static NSString *AlivcNotificationQuPlay_EnterMask = @"AlivcNotificationQuPlay_EnterMask";
//退出弹层状态的通知
static NSString *AlivcNotificationQuPlay_QutiMask = @"AlivcNotificationQuPlay_QutiMask";

@class AlivcShortVideoTabBar;

NS_ASSUME_NONNULL_BEGIN

@interface AlivcShortVideoTabBar : UITabBar
/**
 中间凸起的按钮
 */
@property (nonatomic, strong) UIButton *centerBtn;

@end

NS_ASSUME_NONNULL_END


.m文件实现方法

#import "AlivcShortVideoTabBar.h"

@interface AlivcShortVideoTabBar ()


/**
 生成的用于回调的barItem,认准tag101
 */
@property (nonatomic, strong) UITabBarItem *centerItem;
@end

@implementation AlivcShortVideoTabBar

- (UIButton *)centerBtn
{
    if (_centerBtn == nil) {
        _centerBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 80, 60)];
        [_centerBtn setImage:[AlivcImage imageNamed:@"alivc_svHome_add"] forState:UIControlStateNormal];
        [_centerBtn setImage:[AlivcImage imageNamed:@"alivc_svHome_addClose"] forState:UIControlStateSelected];
        [_centerBtn addTarget:self action:@selector(clickCenterBtn:) forControlEvents:UIControlEventTouchUpInside];
        
        self.centerItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemSearch tag:101];
        [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(quitMask) name:AlivcNotificationQuPlay_QutiMask object:nil];
    }
    return _centerBtn;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    // 把 tabBarButton 取出来(把 tabBar 的 subViews 打印出来就明白了)
    NSMutableArray *tabBarButtonArray = [NSMutableArray array];
    for (UIView *view in self.subviews) {
        if ([view isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
            [tabBarButtonArray addObject:view];
        }
    }
    
    CGFloat barWidth = self.bounds.size.width;
    CGFloat barHeight = self.bounds.size.height;
    CGFloat centerBtnWidth = CGRectGetWidth(self.centerBtn.frame);
    CGFloat centerBtnHeight = CGRectGetHeight(self.centerBtn.frame);
    
    // 重新布局其他 tabBarItem
    // 平均分配其他 tabBarItem 的宽度
    CGFloat barItemWidth = (barWidth - centerBtnWidth) / tabBarButtonArray.count;
    // 逐个布局 tabBarItem,修改 UITabBarButton 的 frame
    __block CGFloat centerBtn_cx = barHeight / 2;
    [tabBarButtonArray enumerateObjectsUsingBlock:^(UIView *  _Nonnull view, NSUInteger idx, BOOL * _Nonnull stop) {
        CGFloat beside = barItemWidth / 4; //偏移量
        CGRect frame = view.frame;
        // 只能适应2个item的情况,多个item需要另外改代码
        if (idx >= tabBarButtonArray.count / 2) {
            // 重新设置 x 坐标,如果排在中间按钮的右边需要加上中间按钮的宽度
            frame.origin.x = idx * barItemWidth + centerBtnWidth + beside;
        } else {
            frame.origin.x = idx * barItemWidth - beside;
        }
        // 重新设置宽度
        frame.size.width = barItemWidth;
        view.frame = frame;
        centerBtn_cx = view.center.y;
    }];
    
    // 设置中间按钮的位置,居中,凸起一丢丢
    self.centerBtn.center = CGPointMake(barWidth / 2, centerBtn_cx - 10);
    
    // 把中间按钮带到视图最前面
    if (self.centerBtn.superview == nil) {
        [self addSubview:self.centerBtn];
    }
    [self bringSubviewToFront:self.centerBtn];
}

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    if (self.clipsToBounds || self.hidden || (self.alpha == 0.f)) {
        return nil;
    }
    UIView *result = [super hitTest:point withEvent:event];
    // 如果事件发生在 tabbar 里面直接返回
    if (result) {
        return result;
    }
    // 这里遍历那些超出的部分就可以了,不过这么写比较通用。
    for (UIView *subview in self.subviews) {
        // 把这个坐标从tabbar的坐标系转为 subview 的坐标系
        CGPoint subPoint = [subview convertPoint:point fromView:self];
        result = [subview hitTest:subPoint withEvent:event];
        // 如果事件发生在 subView 里就返回
        if (result) {
            return result;
        }
    }
    return nil;
}

#pragma mark - UIRespon
- (void)clickCenterBtn:(UIButton *)button{
    button.selected = !button.selected;
    if (button.selected) {
        [[NSNotificationCenter defaultCenter]postNotificationName:AlivcNotificationQuPlay_EnterMask object:nil];
    }else{
        [[NSNotificationCenter defaultCenter]postNotificationName:AlivcNotificationQuPlay_QutiMask object:nil];
    }
  
}

- (void)quitMask{
    self.centerBtn.selected = NO;
}

@end

使用方式

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface AlivcShortVideoQuHomeTabBarController : UITabBarController

@end

NS_ASSUME_NONNULL_END

#import "AlivcShortVideoQuHomeTabBarController.h"
#import "AlivcShortVideoPersonalViewController.h"
#import "AlivcShortVideoPlayViewControler.h"
#import "AlivcShortVideoTabBar.h"
#import "AlivcDefine.h"

@interface AlivcShortVideoQuHomeTabBarController ()

@property (strong, nonatomic) AlivcShortVideoTabBar *customBar;

@end

@implementation AlivcShortVideoQuHomeTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    // 利用KVO来使用自定义的tabBar
    self.customBar = [[AlivcShortVideoTabBar alloc]init];
    [self setValue:[[AlivcShortVideoTabBar alloc] init] forKey:@"tabBar"];
    [self addChildVC];
    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(centerButtonSelectedToNo) name:AlivcNotificationVideoStartPublish object:nil];
}

- (void)dealloc{
    [[NSNotificationCenter defaultCenter]removeObserver:self];
}

- (void)addChildVC {
    
    self.tabBar.barTintColor = [UIColor whiteColor];
    self.tabBar.tintColor = [UIColor whiteColor];

    self.tabBar.backgroundImage = [[UIImage alloc] init];
    self.tabBar.shadowImage = [[UIImage alloc] init];

    AlivcShortVideoPlayViewControler *playVC =
        [[AlivcShortVideoPlayViewControler alloc] init];
    playVC.tabBarItem.image = [[AlivcImage imageNamed:@"alivc_svHome_icon"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    playVC.tabBarItem.selectedImage = [[AlivcImage imageNamed:@"alivc_svHome_icon_selected"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    [self addChildViewController:playVC];

    AlivcShortVideoPersonalViewController *personalVC =
        [[AlivcShortVideoPersonalViewController alloc] init];
    personalVC.tabBarItem.image = [[AlivcImage imageNamed:@"alivc_svHome_me"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    personalVC.tabBarItem.selectedImage = [[AlivcImage imageNamed:@"alivc_svHome_me_selected"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    [self addChildViewController:personalVC];
}

- (void)centerButtonSelectedToNo{
    self.customBar.centerBtn.selected = NO;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [[NSNotificationCenter defaultCenter]postNotificationName:AlivcNotificationQuPlay_QutiMask object:nil];
    });
    
}

#pragma mark -
- (BOOL)shouldAutorotate{
    return [self.selectedViewController shouldAutorotate];
}

- (UIInterfaceOrientationMask)supportedInterfaceOrientations{
    return [self.selectedViewController supportedInterfaceOrientations];
}

- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation{
    return [self.selectedViewController preferredInterfaceOrientationForPresentation];
}

#pragma mark - UITabBarDelegate
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item{
    [[NSNotificationCenter defaultCenter]postNotificationName:AlivcNotificationQuPlay_QutiMask object:nil];
}



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

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,082评论 1 32
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 今天感触蛮深的,心里也很难过,只希望跟着我的人能把愿望实现,很多人在事业当中久了以后就把初心忘了,我希望今...
    亚楠宝贝阅读 163评论 0 1
  • 脚下的鹅软石,踩起来“ 脚底传来微痛但又不失在痛中的舒适”真正的舒适是在你忍受之时伴生的! 你的皮囊,不仅仅是...
    凝梦成丝阅读 414评论 1 3
  • 本想一口一口吃掉烦恼,结果一口一口吃成胖子。黑椒烤全腿,让我忽然思考:扔一只鸡腿,狗会跟着跑吗?其实内心最真实的想...
    桑尼冉阅读 361评论 0 0