自定義UITabBar實現(xiàn)傳統(tǒng)的框架(一)

這個文章介紹的是一個普遍使用的傳統(tǒng)框架,底層是一個UITabBarController,然后上面是導航控制器UINavigationController。如下圖:


image.png

具體方法如下:

  • 1,創(chuàng)建自定義控制器QBYTabBarController繼承UITabBarController,然后解決UITabBarItem的字體問題,因為只需要執(zhí)行一次,所以在load方法中實現(xiàn)。

objc
//只會調用一次
+(void)load{
// 獲取哪個類的UITabBarItem
UITabBarItem *tabItem = [UITabBarItem appearanceWhenContainedIn:self, nil];
// 設置按鈕選中標題的顏色:富文本:描述一個文字顏色,字體,陰影,空心,圖文混排
// 創(chuàng)建一個描述文本屬性的字典
NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
attrs[NSForegroundColorAttributeName] = [UIColor blackColor];
[tabItem setTitleTextAttributes:attrs forState:UIControlStateSelected];

// *設置字體尺寸:只有設置正常狀態(tài)下,才會有效果
NSMutableDictionary *attrsNor = [NSMutableDictionary dictionary];
attrsNor[NSFontAttributeName] = [UIFont systemFontOfSize:13];
[tabItem setTitleTextAttributes:attrsNor forState:UIControlStateNormal];

}

- 2,接下來就是在viewDidLoad方法中做以下幾件事情:

```objc```
#pragma mark -生命周期的方法
-(void)viewDidLoad{
    [super viewDidLoad];
    // 1 添加子控制器(5個子控制器) -> 自定義控制器 -> 劃分項目文件結構
    [self setUpAllChildViewController];
    // 2 設置tabBar上按鈕內容 -> 由對應的子控制器的tabBarItem屬性
    [self setUpAllTitleButton];
    // 3.自定義tabBar
    [self setUpTabBar];

}
  • 3,添加所有的子控制器:

objc
-(void)setUpAllChildViewController{
// 精華
QBYEssenceViewController *essenceVC = [[QBYEssenceViewController alloc]init];
UINavigationController *nav = [[QBYNavigationController alloc]initWithRootViewController:essenceVC];
[self addChildViewController:nav];

// 新帖
QBYNewViewController *newVc = [[QBYNewViewController alloc] init];
UINavigationController *nav1 = [[QBYNavigationController alloc] initWithRootViewController:newVc];
[self addChildViewController:nav1];

// 關注
QBYFriendThreadViewController *ftVc = [[QBYFriendThreadViewController alloc] init];
UINavigationController *nav3 = [[QBYNavigationController alloc] initWithRootViewController:ftVc];
[self addChildViewController:nav3];

// 我
 QBYMeViewController *meVc = [[QBYMeViewController alloc] init];
 UINavigationController *nav4 = [[QBYNavigationController alloc] initWithRootViewController:meVc];
 [self addChildViewController:nav4];

}

- 4,添加對應子控制器上的tabBarItem內容:
```objc```
#pragma mark -添加TabBar上的按鈕
-(void)setUpAllTitleButton{
    
    // 0:nav
    UINavigationController *nav = self.childViewControllers[0];
    nav.tabBarItem.title = @"精華";
    nav.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
    // 快速生成一個沒有渲染圖片
    nav.tabBarItem.selectedImage = [UIImage imageOriginalWithName:@"tabBar_essence_click_icon"];
    
    // 1:新帖
    UINavigationController *nav1 = self.childViewControllers[1];
    nav1.tabBarItem.title = @"新帖";
    nav1.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
    nav1.tabBarItem.selectedImage = [UIImage imageOriginalWithName:@"tabBar_new_click_icon"];
    
    // 3.關注
    UINavigationController *nav3 = self.childViewControllers[2];
    nav3.tabBarItem.title = @"關注";
    nav3.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
    nav3.tabBarItem.selectedImage = [UIImage imageOriginalWithName:@"tabBar_friendTrends_click_icon"];
    
    // 4.我
    UINavigationController *nav4 = self.childViewControllers[3];
    nav4.tabBarItem.title = @"我";
    nav4.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
    nav4.tabBarItem.selectedImage = [UIImage imageOriginalWithName:@"tabBar_me_click_icon"];
}

注意:這里存在一個問題,選中按鈕的圖片被渲染 -> iOS7之后默認tabBar上按鈕圖片都會被渲染 1.修改圖片 2.通過代碼 √
我的做法是新建一個UIImage分類實現(xiàn):

objc

  • (UIImage *)imageOriginalWithName:(NSString *)imageName{

    UIImage *image = [UIImage imageNamed:imageName];

    return [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

}

- 5,利用kvc替換掉原來的tabBar:
```objc```
-(void)setUpTabBar{
    QBYTabBar * tabBar = [[QBYTabBar alloc]init];
    [self setValue:tabBar forKey:@"tabBar"];
}
  • 6,接下來我們就來實現(xiàn)下自定義QBYTabBar繼承UITabBar,首先懶加載一個中間加好按鈕,然后用layoutSubviews方法布局,一定要加super的方法:

objc
@interface QBYTabBar()
@property (nonatomic,weak) UIButton *plusButton;
@end
@implementation QBYTabBar

-(UIButton *)plusButton{

if (_plusButton == nil) {
    UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateSelected];
    [btn sizeToFit];
    [self addSubview:btn];
    _plusButton = btn;
}
return _plusButton;

}

-(void)layoutSubviews{
[super layoutSubviews];

NSInteger count = self.items.count;

CGFloat btnW = self.qby_width / (count + 1);
CGFloat btnH = self.qby_height;
CGFloat x = 0;
int i = 0;

// 私有類:打印出來有個類,但是敲出來沒有,說明這個類是系統(tǒng)私有類
// 遍歷子控件 調整布局
for (UIView * tabBarButton in self.subviews) {
    if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
        if (i == 2) {
            i++;
        }
        
        x = btnW * i;
        
        tabBarButton.frame = CGRectMake(x, 0, btnW, btnH);
        i++;
    }
}
self.plusButton.center = CGPointMake(self.qby_width * 0.5, self.qby_height * 0.5);

}

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容