ios基础篇(九)——自定义UITabBar

时间:2025-03-17 17:33:31

上一篇讲到了UITabBarViewController,接着说说UITabBarViewController中怎么自定义TabBar.

今天仿写了微博,发现底部tabbar中间的button和其他有所不同,button较大且着色;而且我们平时工作中也有很多类似这样的问题,有些app有一个看起来像标准 tabBarController,但是呢,tabBar的中间是凸起的或者着色的。我们怎样做可以构建这种现实效果呢?

如图:

ios基础篇(九)——自定义UITabBar

ios基础篇(九)——自定义UITabBar

这些标签栏除了中间项以外看起来都相当的标准,所以我们会从一个标准的包含一个tabBar的UITabBarController开始;查看应用内的图片,显而易见的是中间的标签是一个简单的自定义button,一个UITabBar 包含了一个UITabBaritems的数组,UITabBaritem继承自UIBarItem。但是和同样继承自UIBarItem的UIBarButtonItem不同,苹果官方没有提供给UITabBarItem创建自定义视图的api。

我们的基本方案是子类化UITabBarController然后添加一个自定义的button再UITabBar上面。

代码实现:(这里我用第二张图片举例)

 //
// TabBarViewController.m
// WeiBo
//
// Created by Oran Wu on 15-11-18.
// Copyright (c) 2015年 Xinxin. All rights reserved.
// #import "TabBarViewController.h"
#import "ViewAdditions.h"
#import "AddViewController.h" @interface TabBarViewController ()<UITabBarControllerDelegate>{ UITabBar *tabBar;
UIImageView *tabBarView;
UIButton *lastSelectedButton; UILabel *titleLabel; } @end @implementation TabBarViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view. //把原tabBar隐藏
self.tabBar.hidden = YES; //在底部创建一个tabBarView替代原tabBar
tabBarView =[[UIImageView alloc] initWithFrame:(CGRect){,self.view.height-,self.view.width,}];
[self.view addSubview:tabBarView];
//可交互
tabBarView.userInteractionEnabled = YES; //创建常见的四个tabBarButton
[self creatButtonWithNormalName:@"tabbar_home" andSelectedName:@"tabbar_home_selected" andTitle:@"首页" andIndex:];
[self creatButtonWithNormalName:@"tabbar_message_center" andSelectedName:@"tabbar_message_center_selected" andTitle:@"消息" andIndex:];
[self creatButtonWithNormalName:@"tabbar_discover" andSelectedName:@"tabbar_discover_selected" andTitle:@"发现" andIndex:];
[self creatButtonWithNormalName:@"tabbar_profile" andSelectedName:@"tabbar_profile_selected" andTitle:@" 我" andIndex:];
[self creatCenterButton:@"jia"]; //这里用了通知,切换页面时用来隐藏tabBar
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(hideTabbar:) name:@"HideTabbar" object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(showTabbar) name:@"ShowTapBar" object:nil];
} - (void)hideTabbar:(NSNotification *)notification{
// NSNumber *number = notification.object; tabBarView.hidden = YES;
} - (void)showTabbar{ tabBarView.hidden = NO;
} //自定义方法用来设置button两种状态的图片
- (void)creatButtonWithNormalName:(NSString*)normal andSelectedName:(NSString*)selected andTitle:(NSString*)title
andIndex:(int)index{ //初始化button
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.tag = index+; CGFloat buttonWidth = tabBarView.width/;
CGFloat buttonHeight = tabBarView.height;
//设置button位置及大小,注意:要留出中间特殊button的位置
if (index<) {
button.frame = (CGRect){+*index,,buttonWidth,buttonHeight};
}else
button.frame = (CGRect){+*(index+),,buttonWidth,buttonHeight}; [button setImage:[UIImage imageNamed:normal] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:selected] forState:UIControlStateSelected]; //设置buttonLabel(tabBar的文字)
[button.titleLabel setFont:[UIFont systemFontOfSize:]];
[button setTitle:title forState:UIControlStateNormal];
[button setTitleColor:[UIColor colorWithWhite:0.5 alpha:] forState:UIControlStateNormal];
[button setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected]; [button setTitleEdgeInsets:(UIEdgeInsets){, -, , }]; //button动作
[button addTarget:self action:@selector(changeViewController:) forControlEvents:UIControlEventTouchUpInside];
button.imageView.contentMode =UIViewContentModeCenter;
[tabBarView addSubview:button]; UIButton *bt = tabBarView.subviews[];
[self changeViewController:bt]; } - (void)creatCenterButton:(NSString*)centerImage{ //初始化中间特殊button
UIButton *centerButton = [UIButton buttonWithType:UIButtonTypeCustom];
//位置及大小
centerButton.frame = (CGRect){,,,tabBarView.height-};
//图片
[centerButton setImage:[UIImage imageNamed:centerImage] forState:UIControlStateNormal];
//动作
[centerButton addTarget:self action:@selector(addViewController) forControlEvents:UIControlEventTouchUpInside];
//加到tabBarView上
[tabBarView addSubview:centerButton]; } //换页和button的动作关联上
- (void)changeViewController:(UIButton*)button { if (self.selectedIndex == button.tag-) {
return;
} self.selectedIndex = button.tag-; button.selected = YES; if (lastSelectedButton != button) {
lastSelectedButton.selected = NO;
}
lastSelectedButton = button; self.tabBarController.selectedViewController = [self.tabBarController.viewControllers objectAtIndex:self.selectedIndex]; } //中间button点击动作
- (void)addViewController{
AddViewController *AddVC = [[AddViewController alloc] init];
[self presentViewController:AddVC animated:YES completion:nil]; }