大多数应用使用系统自带的Tabbar就能够满足需求
通常情况都是在AppDelegate.m里创建一个UITabBarController将其它的控制器用UINavigationController包装一层,再添加到UITabBarController的viewControllers里。再将UITabBarController设置为self.window的rootViewController。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UITabBarController * tabBarController = [[UITabBarController alloc] init];
NSArray * array = @[@"OneViewController",@"TwoViewController",@"ThreeViewController",@"FourViewController"];
NSArray * titleArray = @[@"乾",@"兑",@"离",@"震"];
NSArray * nomalImageNameArray = @[@"home_32_black",@"wode_32_black",@"home_32_black",@"wode_32_black"];
NSArray * selectedImageNameArray = @[@"home_32_red",@"wode_32_red",@"home_32_red",@"wode_32_red"];
NSMutableArray * viewControllers = @[].mutableCopy;
for (int i = 0; i < array.count; i ++) {
id viewController = [[NSClassFromString(array[i]) alloc] init];
[self setItemWithViewController:viewController
title:titleArray[i]
normalColor:[UIColor blackColor]
selectedColor:[UIColor redColor]
normalImage:[UIImage imageNamed:nomalImageNameArray[i]]
selectedImage:[UIImage imageNamed:selectedImageNameArray[i]]];
UINavigationController * navigationController = [[UINavigationController alloc] initWithRootViewController: viewController];
navigationController.navigationBar.barTintColor = [UIColor whiteColor];
[viewControllers addObject:navigationController];
}
tabBarController.viewControllers = viewControllers;
tabBarController.tabBar.barTintColor = [UIColor whiteColor];
self.window.rootViewController = tabBarController;
[self.window makeKeyAndVisible];
return YES;
}
- (void)setItemWithViewController:(UIViewController *)viewController title:(NSString *)title normalColor:(UIColor *)normalColor selectedColor:(UIColor *)selectedColor normalImage:(UIImage *)normalImage selectedImage:(UIImage *)selectedImage{
viewController.tabBarItem.title = title;
[viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:normalColor} forState:UIControlStateNormal];
[viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:selectedColor} forState:UIControlStateSelected];
viewController.tabBarItem.image = [normalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
viewController.tabBarItem.selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];//禁止渲染
}
设置tabbar的主要部分提出到了下面的方法里
设置标题:
viewController.tabBarItem.title = title;
设置未选中时标题颜色:
[viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:normalColor} forState:UIControlStateNormal];
设置设置选中时标题颜色:
[viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:selectedColor} forState:UIControlStateSelected];
设置未选中时图片:
viewController.tabBarItem.image = [normalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
设置选中时的图片:
viewController.tabBarItem.selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];//禁止渲染
其中的禁止图片渲染一般会用到,否则的话图片会被渲染成系统默认的颜色,而不是你的图片颜色。
这里面选用的图片需要大小合适,如果过大就会超出范围而不是只显示tabBarItem大小。
自定义的Tabbar就可以更方便的实现更多的功能,如设置背景图片,控制每个按钮大小,设置按钮凸出,给按钮添加动画等等。
首先继承自UIView创建一个FTTabbar类
FTTabbar.h中设置了三个属性:
@property(nonatomic, strong)NSArray * items;
@property(nonatomic, assign)NSInteger selectedIndex;
@property(nonatomic, copy)void(^onClickChangeSelectedIndex)(NSInteger selectedIndex);
其中items用来传入标题,图片,字体大小,颜色等信息。
selectedIndex用来传入当前启动时显示的界面下标(从0开始)。
onClickChangeSelectedIndex block 也可以用代理来写,用作点击按钮的回调,通知TabbarController切换界面。
FTTabbar.m中也是三个主要内容,先贴上全部代码
#import "FTTabBar.h"
#import "DEButton.h"
@interface FTTabBar()
@property(nonatomic, strong)UIImageView * backImageView;
@property(nonatomic, strong)DEButton * currentButton;
@end
typedef NS_ENUM(NSInteger,TabBarBtnTag) {
FirstTabBarBtnTag = 100,
};
@implementation FTTabBar
- (id)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setUp];
}
return self;
}
- (void)setUp{
[self addBackImageView];
}
- (void)addBackImageView{
self.backImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, self.frame.size.height)];
self.backImageView.userInteractionEnabled = YES;
self.backImageView.backgroundColor = [UIColor yellowColor];
[self addSubview:self.backImageView];
}
- (void)setItems:(NSArray *)items{
_items = items;
[self setButtons];
}
- (void)setButtons{
CGFloat width = self.frame.size.width;
CGFloat btnW = width/_items.count;
for (int i = 0; i < _items.count; i ++) {
DEButton * button = [[DEButton alloc] initWithFrame:CGRectMake(btnW * i, 0, btnW, self.frame.size.height)
arrangementType:ArrangementTypeTextDown
imageSize:CGSizeMake(30, 30)];
button.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.f green:arc4random()%255/255.f blue:arc4random()%255/255.f alpha:1];
NSDictionary * dict = _items[i];
button.titleLabel.textAlignment = NSTextAlignmentCenter;
button.titleLabel.font = [UIFont systemFontOfSize:12];
[button setImage:[UIImage imageNamed:dict[@"imageNormal"]] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:dict[@"imageSelected"]] forState:UIControlStateSelected];
[button setTitleColor:dict[@"colorNormal"] forState:UIControlStateNormal];
[button setTitleColor:dict[@"colorSelected"] forState:UIControlStateSelected];
[button setTitle:dict[@"title"] forState:UIControlStateNormal];
[button addTarget:self action:@selector(onClickButton:) forControlEvents:UIControlEventTouchUpInside];
button.tag = FirstTabBarBtnTag + i;
[self.backImageView addSubview:button];
if (i == self.selectedIndex) {
button.selected = YES;
self.currentButton = button;
}
}
}
- (void)onClickButton:(DEButton *)sender{
if (self.onClickChangeSelectedIndex) {
self.onClickChangeSelectedIndex(sender.tag - FirstTabBarBtnTag);
}
self.currentButton.selected = NO;
sender.selected = YES;
self.currentButton = sender;
}
@end
backImageView用来设置自定义tabbar的背景图片,也可以不使用
currentButton表示当前选中的按钮,此处按钮为自定义按钮前面有一篇按钮图片和文字的排列说的就是这个按钮
接下来
第一步就是在initWithFrame的方法里创建背景ImageView图片和颜色随意设置
- (void)addBackImageView{
self.backImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, self.frame.size.height)];
self.backImageView.userInteractionEnabled = YES;
self.backImageView.backgroundColor = [UIColor yellowColor];
[self addSubview:self.backImageView];
}
第二步是在items的setter中根据传入的数据来创建tabbar的按钮
- (void)setButtons{
CGFloat width = self.frame.size.width;
CGFloat btnW = width/_items.count;
for (int i = 0; i < _items.count; i ++) {
DEButton * button = [[DEButton alloc] initWithFrame:CGRectMake(btnW * i, 0, btnW, self.frame.size.height)
arrangementType:ArrangementTypeTextDown
imageSize:CGSizeMake(30, 30)];
button.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.f green:arc4random()%255/255.f blue:arc4random()%255/255.f alpha:1];
NSDictionary * dict = _items[i];
button.titleLabel.textAlignment = NSTextAlignmentCenter;
button.titleLabel.font = [UIFont systemFontOfSize:12];
[button setImage:[UIImage imageNamed:dict[@"imageNormal"]] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:dict[@"imageSelected"]] forState:UIControlStateSelected];
[button setTitleColor:dict[@"colorNormal"] forState:UIControlStateNormal];
[button setTitleColor:dict[@"colorSelected"] forState:UIControlStateSelected];
[button setTitle:dict[@"title"] forState:UIControlStateNormal];
[button addTarget:self action:@selector(onClickButton:) forControlEvents:UIControlEventTouchUpInside];
button.tag = FirstTabBarBtnTag + i;
[self.backImageView addSubview:button];
if (i == self.selectedIndex) {
button.selected = YES;
self.currentButton = button;
}
}
}
最后在按钮的点击方法进行回调将点击信息传递给TabbarController
- (void)onClickButton:(DEButton *)sender{
if (self.onClickChangeSelectedIndex) {
self.onClickChangeSelectedIndex(sender.tag - FirstTabBarBtnTag);
}
self.currentButton.selected = NO;
sender.selected = YES;
self.currentButton = sender;
}
使用方法,在这里是创建了一个自定义个MyTabbarController继承自TabbarController
MyTabbarController.m的全部代码
#import "MyTabbarController.h"
#import "FTTabBar.h"
@interface MyTabbarController ()
@property(nonatomic, strong)NSMutableArray * items;
@end
@implementation MyTabbarController
- (void)viewDidLoad {
[super viewDidLoad];
[self addViewControllers];
[self addTabbar];
}
- (void)addViewControllers{
NSMutableArray * arrayM = @[].mutableCopy;
self.items = @[].mutableCopy;
NSArray * titleArray = @[@"首页",@"第二页",@"第三页",@"我的"];
NSArray * imageArray = @[@"home_32_black",@"wode_32_black",@"home_32_black",@"wode_32_black"];
NSArray * selectedArray = @[@"home_32_red",@"wode_32_red",@"home_32_red",@"wode_32_red"];
NSArray * viewControllerNameArray = @[@"UIViewController",@"UIViewController",@"UIViewController",@"UIViewController"];
for (int i = 0; i < viewControllerNameArray.count; i ++) {
UIViewController * viewController = [[NSClassFromString(viewControllerNameArray[i]) alloc] init];
UINavigationController * nav = [[UINavigationController alloc] initWithRootViewController:viewController];
viewController.view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.f green:arc4random()%255/255.f blue:arc4random()%255/255.f alpha:1];
[arrayM addObject:nav];
NSMutableDictionary * dictM = @{}.mutableCopy;
dictM[@"imageNormal"] = imageArray[i];
dictM[@"imageSelected"] = selectedArray[i];
dictM[@"colorNormal"] = [UIColor darkGrayColor];
dictM[@"colorSelected"] = [UIColor redColor];
dictM[@"title"] = titleArray[i];
[self.items addObject:dictM];
}
[self setViewControllers:arrayM animated:YES];
}
- (void)addTabbar{
FTTabBar * tabbar = [[FTTabBar alloc] initWithFrame:CGRectMake(0, 0, self.tabBar.frame.size.width, self.tabBar.frame.size.height)];
[self.tabBar addSubview:tabbar];
tabbar.items = self.items;
__weak MyTabbarController * weakSelf = self;
tabbar.onClickChangeSelectedIndex = ^(NSInteger selectedIndex) {
weakSelf.selectedIndex = selectedIndex;
};
}
@end
还是两个步骤:
1.添加子控制器到TabBarController也就是addViewControllers方法
2.添加自定义tabbar到系统的tabbar上也就是addTabbar方法