- iOS自定義TabBar一般有兩種方式:
- 創(chuàng)建一個類繼承字UITabBar,在
layoutSubviews方法中重新調整按鈕的位置,再通過[self setValue:tabBar forKeyPath:@"tabBar"]方法,利用KVC設置TabBar,但是iOS 13后蘋果粑粑不鼓勵使用KVC。 -
這篇文章主要講第二種方法:創(chuàng)建一個繼承UIView的類WSTabBar,然后把系統(tǒng)UITabBar上的UITabBarItem移除,然后把WSTabBar加到系統(tǒng)TabBar的位置上,效果圖如下:
tabbar截圖.png
- 創(chuàng)建一個類繼承字UITabBar,在
一、自定義一個TabBar,其實就是自定義個UIView,然后布局5個按鈕,為了方便我請設計把圖片和文字都切在一起了。
#import "WSTabBar.h"
#import "WSTabBarButton.h"
@interface WSTabBar ()
/// 記錄上一個按鈕
@property (nonatomic, weak) UIButton *preButton;
@end
@implementation WSTabBar
+ (instancetype)tabBarWithSBNames:(NSArray *)sbNames {
WSTabBar *tabBar = [[WSTabBar alloc] init];
//創(chuàng)建圖片對應的按鈕 -- tabBarItem
for (NSString *sbName in sbNames) {
WSTabBarButton *btn = [WSTabBarButton buttonWithType:UIButtonTypeCustom];
//記錄按鈕的索引
btn.tag = tabBar.subviews.count;
[tabBar addSubview:btn];
//加載按鈕中顯示的圖片
NSString *imgName = [NSString stringWithFormat:@"TabBar_%@",sbName];
NSString *selectedImgName = [NSString stringWithFormat:@"TabBar_%@_selected",sbName];
//設置按鈕的圖片
[btn setImage:[UIImage imageNamed:imgName] forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:selectedImgName] forState:UIControlStateSelected];
[btn.imageView setContentMode:UIViewContentModeScaleAspectFit];
//給按鈕注冊點擊事件
[btn addTarget:tabBar action:@selector(btnClick:) forControlEvents:UIControlEventTouchDown];
}
//讓第一個按鈕選中
UIButton *btn = [tabBar.subviews firstObject];
[tabBar btnClick:btn];
return tabBar;
}
//點擊按鈕
- (void)btnClick:(UIButton *)sender {
//讓上一個按鈕不選中
self.preButton.selected = NO;
//讓當前按鈕選中
sender.selected = YES;
//記錄上一個按鈕
self.preButton = sender;
//合適的時機調用代理方法
if ([self.delegate respondsToSelector:@selector(tabBarDidClickedButton:selectedIndex:)]) {
[self.delegate tabBarDidClickedButton:self selectedIndex:sender.tag];
}
}
//設置按鈕的位置
- (void)layoutSubviews {
[super layoutSubviews];
CGFloat btnW = self.bounds.size.width / self.subviews.count;
CGFloat btnX = 0;
CGFloat btnH;
CGFloat btnY;
for (int i = 0; i < self.subviews.count; i++) {
UIButton *btn = self.subviews[i];
//設置按鈕的位置
if (i == 2) { // 中間不規(guī)則按鈕位置計算
btnY = -7;
btnH = 56;
} else { // 普通按鈕位置計算
btnY = 0;
btnH = self.bounds.size.height;
}
btnX = i * btnW;
btn.frame = CGRectMake(btnX, btnY, btnW, btnH);
}
}
@end
二、再自定義一個UITabBarController,將系統(tǒng)的UITabBarItem移除,防止重影,然后將自定義UIView加到UITabBar。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view;
[self configureTabbar];
}
- (void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
// 移除系統(tǒng)TabBar的UITabBarItem
for (UIView *view in self.tabBar.subviews) {
if (![view isKindOfClass:[WSTabBar class]]) {
[view removeFromSuperview];
}
}
}
/// 自定義tabbar
- (void)configureTabbar {
// tabbar圖標名稱
NSArray *sbNames = @[
@"Home",
@"Live",
@"EPG",
@"VIP",
@"Mine"
];
//2 設置自定義tabBar
WSTabBar *tabBar = [WSTabBar tabBarWithSBNames:sbNames];
//設置代理
tabBar.delegate = self;
// 加到系統(tǒng)tabbar位置
[self.tabBar addSubview:tabBar];
tabBar.frame = self.tabBar.bounds;
}
#pragma mark - WSTabbarDelegate
//自定義tabBar的代理方法
- (void)tabBarDidClickedButton:(WSTabBar *)tabBar selectedIndex:(NSInteger)selectedIndex {
//讓tabBarController中的對應子控制器顯示
self.selectedIndex = selectedIndex;
}
三、去掉按鈕的高亮狀態(tài),寫一個繼承UIButton的類WSTabBarButton
#import "WSTabBarButton.h"
@implementation WSTabBarButton
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
- (void)setHighlighted:(BOOL)highlighted {
}
@end
