美文网首页
iOS自定义UITabBar

iOS自定义UITabBar

作者: SmileYang966 | 来源:发表于2020-05-30 16:21 被阅读0次

1. 需求

自定义tabBar.png

如图所示,有时候,传统的4个tabBarButton不能满足我们的要求,比如说我们想多添加一个plusButton,这个plusButton的样式明显与其它的4个tabBarButton不同。

2. 设计思路

2.1 利用KVC替换掉系统自带的tabBar

在自定义的SCTabBarController里面做一些操作,替换掉系统自带的tabBar

    SCTabBar *newDefinedTabBar = [[SCTabBar alloc]init];
    [self setValue:newDefinedTabBar forKey:@"tabBar"];

2.2 添加子navigationController控制器作为tabbarController的item。

完成步骤1后,再执行系统添加子控制器的操作,这时候,相关联的tabBarButton其实是与新的SCTabBar相关联了

    HomeViewController *homeVC = [[HomeViewController alloc]init];
    [self addViewControlerWithController:homeVC title:@"首页" tabBarItemImageName:@"tabbar_home" selectedTabBarItemImageName:@"tabbar_home_selected"];

2.3 创建并添加plusButton

可以在SCTabBarController里添加子plusButton,设置其位置在中间显示
但最好是放在自定义的SCTabBar里面

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        //1.将button加入到self.tabBar中去,并设置其frame
        UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(0,0,64,44)];
        [button setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
        [button setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
        [button setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
        [self addSubview:button];
        
        [button addTarget:self action:@selector(plusButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
    }
    return self;
}

2.4 重写layoutSubViews方法,对其子控件进行重新布局

- (void)layoutSubviews{
    [super layoutSubviews];
    
    //重新排布tabBar的位置
    int count = 5;
    NSLog(@"self.subViews.count=%ld",self.subviews.count);
    CGFloat width = self.width / count*1.0f;
    CGFloat height = self.height;
    CGFloat  tabBarButtonIndex = 0;
    for (UIView *subView in self.subviews) {
        
        //设置center的中心位置
        if ([subView isKindOfClass:[UIButton class]]) {
            NSLog(@"self.centerX is %f",self.centerX);
            subView.centerX = self.centerX;
        }
        
        Class classStr = NSClassFromString(@"UITabBarButton");
        if ([subView isKindOfClass:classStr]) {
            subView.width = width;
            subView.height = height;
            subView.x = width * tabBarButtonIndex;
            
            tabBarButtonIndex++;
            if (tabBarButtonIndex==2) {
                tabBarButtonIndex++;
            }
        }
    }
}

相关文章

网友评论

      本文标题:iOS自定义UITabBar

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