iOS自定義TabBar

  • iOS自定義TabBar一般有兩種方式:
    1. 創(chuàng)建一個類繼承字UITabBar,在layoutSubviews方法中重新調整按鈕的位置,再通過[self setValue:tabBar forKeyPath:@"tabBar"]方法,利用KVC設置TabBar,但是iOS 13后蘋果粑粑不鼓勵使用KVC。
    2. 這篇文章主要講第二種方法:創(chuàng)建一個繼承UIView的類WSTabBar,然后把系統(tǒng)UITabBar上的UITabBarItem移除,然后把WSTabBar加到系統(tǒng)TabBar的位置上,效果圖如下:


      tabbar截圖.png

一、自定義一個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
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容