iOS 自定义 TabBarController

产品:" tabBar 上要6个标签栏"
"iOS 官方设置,最多有5个.而且6个用户体验不太好"
"安卓那边可以,你跟进一下"
so,你需要自定义 tabBar

设置类似于微博的 tabBar

  • 自定义 tabBarController ,定义4个VC,添加到 tabBarController 中
- (void)creatAddVC:(UIViewController *)vc title:(NSString *)title imgName:(NSString *)imgName{
    
    vc.title = title;
    vc.tabBarItem.image = [[UIImage imageNamed:imgName]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    NSString *selImgName = [NSString stringWithFormat:@"%@_sel",imgName];
    vc.tabBarItem.selectedImage = [[UIImage imageNamed:selImgName]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal
                                   ];
    UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
    
    [self addChildViewController:nav];
}
  • 自定义一个继承自 UITabBar 的 TabBar,通过KVC,将该自定义的 tabBar 设置为 tabBarController 的 tabBar
    // 将代码放在 viewDidLoad中
    UIViewController *vc4 = [UIViewController new];
    vc4.view.backgroundColor = [UIColor purpleColor];
    [self creatAddVC:vc4 title:@"我" imgName:@"me"];

    HSTabBar *customTabBar = [HSTabBar new];
    customTabBar.delegate = self;
    // KVC
    [self setValue:customTabBar forKeyPath:@"tabBar"];
  • 在自定义的 tabBar 加入一个额外的加号按钮,并对 tabBarItem和加号按钮重新布局
//  layoutsubViews中重新布局,并添加'+'按钮,
- (void)layoutSubviews{
    [super layoutSubviews];
    
    CGFloat width = self.frame.size.width / 5.0;
    CGFloat height = self.frame.size.height;
    
    int idx = 0;
    for (UIView *subView in self.subviews) {
        if (subView.class != NSClassFromString(@"UITabBarButton")) {
            continue;
        }
        if (idx <2) {
            subView.frame = CGRectMake(width * idx, 0, width, height);
        }else if(idx >= 2){
            subView.frame = CGRectMake(width * idx + width, 0, width, height);
        }
        idx++;
    }
    
    UIButton *addBtn = [UIButton new];
    [addBtn setImage:[UIImage imageNamed:@"add"] forState:UIControlStateNormal];
    [addBtn setImage:[UIImage imageNamed:@"add"] forState:UIControlStateHighlighted];
    [addBtn addTarget:self action:@selector(addClick) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:addBtn];
    addBtn.frame = CGRectMake(width * 2, 0, width, height);
}

// 这里使用代理进行点击回调
- (void)addClick{
    if ([self.delegate respondsToSelector:@selector(click2Add)]) {
        [self.delegate click2Add];
    }
}

含有6个标签的 tabBar

用上述的方法确实可以实现一些自定义 tabBar 的需求,但是受限与苹果方法的限制,这还不能显示标签,无法达到产品的需求.所以,上述办法不可用.这里介绍另一个简单的方法方法:

  • 写一个自定义的tabBarController ,添加6个 VC
_vcArr = @[vc1 , vc2, vc3, vc4, vc5, vc6];
    for (UIViewController *vc in _vcArr) {
        UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
        [self addChildViewController:nav];
    }
    self.selectedIndex = 0;
  • 定一个继承自 UIView 的 tabBarView,将这个 tabBarView 添加到自定义的 tabBarController 上
SSBarView *barView = [[SSBarView alloc]initWithFrame:self.tabBar.bounds];
    self.barView = barView;
    [self.tabBar addSubview:barView];
    barView.delegate = self;
  • 在定义的 tabBarView 中,设置6个按钮,按照要求布局好
- (void)creatUI{
    
    self.userInteractionEnabled = YES;
    self.backgroundColor = [UIColor orangeColor];
    NSArray *arr = @[@"我", @"是", @"中", @"国", @"人", @"民"];
    
    CGFloat btnW = self.frame.size.width / arr.count;
    CGFloat btnH = self.frame.size.height;
    for (NSString *text in arr) {
        NSUInteger idx = [arr indexOfObject:text];
        UIButton *btn = [UIButton new];
        [self addSubview:btn];
        btn.frame = CGRectMake(btnW * idx, 0, btnW, btnH);
        btn.tag = tagId + idx;
        [btn setTitle:text forState:UIControlStateNormal];
        [btn setTitle:text forState:UIControlStateSelected];
        [btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];
        [self.btnArr addObject:btn];
    }
}
  • 通过代理或者 block 回调,在点击某个按钮的时候,tabBarController 切换不同的 selectedIndex
// BarView 的代理
- (void)click2GetIndex:(int)index{
    self.selectedIndex = index;
}

具体的请参考:demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容