自定义UITabBar的两种方式

时间:2023-03-08 17:13:25

开发中,经常会遇到各种各样的奇葩设计要求,因为apple提供的UITabBar样式单一,只是简单的"图片+文字"样式,高度49又不可以改变。自定义UITabBar成为了唯一的出路。下面我就列举开发中我经常用到的两种自定义UITabBar的方式,并且通过比较他们的不同之处,能够知道何时用何种方式自定义UITabBar。

方式一:

这是真正意义上的自定义UITabBar,因为这种方式需要继承自UITabBar,但是缺点也很明显,高度永远是49,实际开发的项目中的tabBar如果和原生的UITabBar相差不大,可以考虑这种方式。废话少说,直接上代码。

#import <UIKit/UIKit.h>

@interface WSTabBar : UITabBar

@end

#import "WSTabBar.h"

@implementation WSTabBar

- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
// 初始化操作
}
return self;
} - (void)layoutSubviews
{
[super layoutSubviews];
// 布局子控件
for (UITabBarItem *item in self.subviews) {
// item.title = @"标题";
// item.image = [UIImage imageNamed:@""];
} }
@end // UITabBarController中设置自定义tabBar
- (void)setupTabBar
{
// self.tabBar = [[WSTabBar alloc] init]; // 不能直接赋值,只能通过KVC方式设置tabBar
[self setValue:[[WSTabBar alloc] init] forKeyPath:@"tabBar"];
}

以上这种方式实际上还是tabBar,只不过我们可以在tabBar的initWithFrame:方法中给tabBar做一些初始化操作,比如添加一个不同于其他item的button。另外也可以在layoutSubviews中设置每个UITabBarItem和我们自己添加的button的frame。

方式二:

第二种方式是自定义UIView代替tabBar,然后把UIView添加到tabBar控制器上。监听自定义UIView上每个按钮的点击,然后跳转到指定的tabBar子控制器。这种方式的缺点是,比第一种稍稍复杂了一点点,优点是灵活度高,我们可以天马行空的把tabBar设计成任何样式。废话少说,直接上代码。

以下是自定义UITabBar:

#import <UIKit/UIKit.h>
@class WSTabBar; @protocol WSTabBarDelegate <NSObject>
/** 控制器遵守该协议后,用于传递tabBar当前选中的按钮的索引给控制器 */
- (void)tabBar:(WSTabBar *)tabBar withSelectedIndex:(NSInteger)selectedIndex; @end @interface WSTabBar : UIView
/** tabBar的item数组 */
@property (nonatomic,strong) NSArray *items;
/** tabBar所属的tabBarController */
@property (nonatomic,strong) UITabBarController *tabBarController; /** block */
@property (nonatomic,strong) void(^selectedIndexBlock)(NSInteger); // 代理
@property (nonatomic,weak) id<WSTabBarDelegate> delegate; @end #import "WSTabBar.h" @interface WSTabBar ()
/** 当前选中的按钮 */
@property(nonatomic,strong) UIButton *selectedBtn; @end @implementation WSTabBar
//- (instancetype)initWithFrame:(CGRect)frame
//{
// if (self = [super initWithFrame:frame]) {
//
// }
//
// return self;
//} - (void)setItems:(NSArray *)items
{
_items = items; // 千万不要漏掉这一句啊!漏掉后,会导致_items为nil
NSInteger index = ;
for (UITabBarItem *item in items) {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setBackgroundImage:item.image forState:UIControlStateNormal];
[btn setBackgroundImage:item.selectedImage forState:UIControlStateSelected]; btn.tag = index;
++index;
[btn addTarget:self action:@selector(btnDidOnClick:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:btn];
}
} - (void)layoutSubviews
{
[super layoutSubviews]; for (int i = ; i < self.items.count; i++) {
UIButton *btn = self.subviews[i];
CGFloat width = self.frame.size.width / self.items.count;
CGFloat height = self.frame.size.height; btn.frame = CGRectMake(i * width, , width, height); }
}
- (void)btnDidOnClick:(UIButton *)btn
{
// 三部曲
self.selectedBtn.selected = NO; // 上一个按钮取消选中
btn.selected = YES; // 当前按钮设置选中
self.selectedBtn = btn; // 当前按钮赋值给selectedBtn // 5种方法
// 1.tabBarController属性
/*
self.tabBarController.selectedIndex = btn.tag;
*/ // 2.通知
/*
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[@"selectedIndex"] = @(btn.tag);
[[NSNotificationCenter defaultCenter] postNotificationName:@"changeSelectedIndexNotification" object:self userInfo:dict];
*/ // 3.KVO 控制器或者tabBar监听selectedBtn.tag的变化 // 4.block
/*
if (self.selectedIndexBlock) {
self.selectedIndexBlock(btn.tag);
}
*/ // 5.代理
if ([self.delegate respondsToSelector:@selector(tabBar:withSelectedIndex:)]) {
[self.delegate tabBar:self withSelectedIndex:btn.tag];
}
} - (void)dealloc
{ }

以下是使用UITabBar:

#import <UIKit/UIKit.h>

@interface WSTabBarController : UITabBarController

@end

#import "WSTabBarController.h"
#import "WSTabBar.h"
#import "OneChildViwController.h"
#import "TwoChildViwController.h"
#import "ThreeChildViwController.h"
#import "FourChildViwController.h"
#import "FiveChildViwController.h" @interface WSTabBarController ()<WSTabBarDelegate>
@property(nonatomic,strong) NSMutableArray *items;
@property(nonatomic,strong) WSTabBar *WSTabBar; @end @implementation WSTabBarController - (NSMutableArray *)items
{
if (!_items) {
_items = [NSMutableArray array];
}
return _items;
} - (void)viewDidLoad {
[super viewDidLoad]; [self setupChildVC];
[self setupTabBar]; // 2.注册监听通知
// [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changeSelectedIndex:) name:@"changeSelectedIndexNotification" object:nil]; // // 3.KVO
// [self addObserver:self forKeyPath:@"WSTabBar.selectedBtn.tag" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil]; } - (void)changeSelectedIndex:(NSNotification *)noti
{
self.selectedIndex = [noti.userInfo[@"selectedIndex"] integerValue];
} - (void)dealloc
{
// 移除通知监听
[[NSNotificationCenter defaultCenter] removeObserver:self];
// 移除KVO监听
[self removeObserver:self forKeyPath:@"WSTabBar.selectedBtn.tag"];
}
- (void)setupChildVC
{
OneChildViwController *oneVC = [[OneChildViwController alloc] init];
TwoChildViwController *twoVC = [[TwoChildViwController alloc] init];
ThreeChildViwController *threeVC = [[ThreeChildViwController alloc] init];
FourChildViwController *fourVC = [[FourChildViwController alloc] init];
FiveChildViwController *fiveVC = [[FiveChildViwController alloc] init]; [self setupChildVC:oneVC image:@"TabBar_Arena_new" selectedImage:@"TabBar_Arena_selected_new" title:@"竞技场"];
[self setupChildVC:twoVC image:@"TabBar_Discovery_new" selectedImage:@"TabBar_Discovery_selected_new" title:@"发现"];
[self setupChildVC:threeVC image:@"TabBar_History_new" selectedImage:@"TabBar_History_selected_new" title:@"开奖信息"];
[self setupChildVC:fourVC image:@"TabBar_LotteryHall_new" selectedImage:@"TabBar_LotteryHall_selected_new" title:@"购彩大厅"];
[self setupChildVC:fiveVC image:@"TabBar_MyLottery_new" selectedImage:@"TabBar_MyLottery_selected_new" title:@"我的彩票"]; } - (void)setupChildVC:(UIViewController *)childVC image:(NSString *)image selectedImage:(NSString *)selectedImage title:(NSString *)title
{
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:childVC]; childVC.tabBarItem.image = [UIImage imageNamed:image];
childVC.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
childVC.tabBarItem.title = title;
[self.items addObject:childVC.tabBarItem]; [self addChildViewController:nav];
} - (void)setupTabBar
{
WSTabBar *tabBar = [[WSTabBar alloc] init];
tabBar.frame = CGRectMake(, [UIScreen mainScreen].bounds.size.height - , [UIScreen mainScreen].bounds.size.width, );
// iphone 4、5、6 tabBar高度为49 // iPhone 4、5、6 UINavigationBar高度为44
// iphone 4、5、6 UINavigationBarBackGround高度为64 所以会有状态栏被导航栏同化的现象 tabBar.items = self.items; // 不能 tabBar.items = self.tabBar.items; tabBar.backgroundColor = [UIColor orangeColor];
[self.view addSubview:tabBar];
// 1.WSTabBar的tabBarController属性
// tabBar.tabBarController = self; // 3.KVO(tabBar监听)
// [tabBar addObserver:self forKeyPath:@"selectedBtn.tag" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil]; // 3.KVO(让控制器监听)
// self.WSTabBar = tabBar;
// [self addObserver:self forKeyPath:@"WSTabBar.selectedBtn.tag" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil]; // 4.block方式
// tabBar.selectedIndexBlock = ^(NSInteger selectedIndex){
// self.selectedIndex = selectedIndex;
// }; // 5.代理
tabBar.delegate = self; } // KVO监听到键值变化
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
NSInteger new = [change[NSKeyValueChangeNewKey] integerValue];
self.selectedIndex = new;
} - (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
for (UIView *subView in self.tabBar.subviews) {
if (![subView isKindOfClass:[WSTabBar class]]) {
// 移除原生tabBar上的item
[subView removeFromSuperview];
}
}
} #pragma mark - WSTabBarDelegate
- (void)tabBar:(WSTabBar *)tabBar withSelectedIndex:(NSInteger)selectedIndex
{
self.selectedIndex = selectedIndex;
}
@end

以上第二种方式,笔者使用了5中方式在自定义的tabBar和tabBarController之间传值,实现tabBar子控制器的切换。

详细代码demo:https://github.com/nlgb/WSTabBar/tree/master/WSTabBar