2-配置tabbar

weixin_34116110發表於2016-06-16
tabBar

先搭建骨架，底部tabbar，切換控制器

2013506-fa60540eed479190.gif
object.gif

先建立TabBarController

   UIViewController *vc01 = [[UIViewController alloc] init];
    vc01.tabBarItem.title = @"精華";
    vc01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
    
    UIImage * image = [UIImage imageNamed:@"tabBar_essence_click_icon"];
    image =  [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    vc01.tabBarItem.selectedImage = image;
    vc01.view.backgroundColor = [UIColor redColor];
    [self addChildViewController:vc01];

    UIViewController *vc02 = [[UIViewController alloc] init];
    vc02.tabBarItem.title = @"新帖";
    vc02.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
    vc02.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_new_click_icon"];
    vc02.view.backgroundColor = [UIColor orangeColor];
    [self addChildViewController:vc02];
    
    UIViewController *vc03 = [[UIViewController alloc] init];
    vc03.tabBarItem.title = @"關注";
    vc03.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
    vc03.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_friendTrends_click_icon"];
    vc03.view.backgroundColor = [UIColor yellowColor];
    [self addChildViewController:vc03];
    
    UIViewController *vc04 = [[UIViewController alloc] init];
    vc04.tabBarItem.title = @"我";
    vc04.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
    vc04.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_me_click_icon"];
    vc04.view.backgroundColor = [UIColor greenColor];
    [self addChildViewController:vc04];

但是，有沒有覺得有大量重複程式碼，顯得很爛啊，稍等再精簡一下下吧
由於蘋果給tabbar渲染過效果，所以tabbar看起來是

2013506-c6dd134b2d937fc9.png
螢幕快照01.png

與要求不符，要做修改
方式一

 UIViewController *vc01 = [[UIViewController alloc] init];
    vc01.tabBarItem.title = @"精華";
    vc01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
    
    UIImage * image = [UIImage imageNamed:@"tabBar_essence_click_icon"];
    image =  [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
  //RenderingMode渲染模式 原始  
    vc01.tabBarItem.selectedImage = image;
    vc01.view.backgroundColor = [UIColor redColor];
    [self addChildViewController:vc01];

效果圖


2013506-021ab4dfe64e3677.png
螢幕快照02.png

但是這種程式碼還是這麼多，還得寫四個，不想寫啊。還有，如果以後這個圖片用到其他地方也不想被渲染，就還得寫一遍

2013506-6572ee2e8e565633.jpg
u=1844650690,767290937&fm=21&gp=0.jpg

好的，那麼在找一個簡單一點的方法吧，
如圖，找到需要的圖片選中

2013506-a55c136019272a79.png
螢幕快照03

就好了


2013506-3fa14257ee75fe06.png
螢幕快照04

緊接著還有一個問題，( ⊙o⊙ )?文字怎麼還是藍色的？！既然設定文字和檢視屬性用tabbarItem，那麼文字顏色呢

 UIViewController *vc01 = [[UIViewController alloc] init];
    vc01.tabBarItem.title = @"精華";
    vc01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
    
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
    attrs[NSForegroundColorAttributeName] = [UIColor grayColor];
    [vc01.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];
    
    NSMutableDictionary *selectedAttrs = [NSMutableDictionary dictionary];
    selectedAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
    selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
    [vc01.tabBarItem setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

    vc01.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
    vc01.view.backgroundColor = [UIColor redColor];
    [self addChildViewController:vc01];

文字顏色就可以改變了，但是還得寫4個

[vc02.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];
[vc02.tabBarItem setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

[vc03.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];
[vc03.tabBarItem setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

[vc04.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];
[vc04.tabBarItem setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

所以要優化一下（一改全改）
進入方法中檢視，其結尾有

UI_APPEARANCE_SELECTOR

凡是帶有UI_APPEARANCE_SELECTOR巨集的，都可以用另一種方法去設定，就是拿到APPEARANCE。那麼先把上邊01，02，03，04設定文字顏色的方法註釋掉，

    //通過appearance統一設定所有UITabBarItem的文字屬性
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
    attrs[NSForegroundColorAttributeName] = [UIColor grayColor];
    
    NSMutableDictionary *selectedAttrs = [NSMutableDictionary dictionary];
    selectedAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
    selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
    //好處就是，只要給appearance設定，以後都是一個效果
   UITabBarItem * item = [UITabBarItem appearance];//appearance外觀
    [item setTitleTextAttributes:attrs forState:(UIControlStateNormal)];
    [item setTitleTextAttributes:selectedAttrs forState:(UIControlStateSelected)];
//必須結尾有UI_APPEARANCE_SELECTOR

相關文章