自定义子tabBar

基本设置

• 设置APPIcon（直接拖图片）
• 设置启动图片

  • 将launch Screen File里的LaunchScreen.xib给删掉
    

  • 点击launch image source框内的Use Asset Catalog后

，点击Migrate就会将启动图片整合到蓝色资源文件夹里，就像APPIcon一样将图片都拖到LauncImage里

• 更改软件名，将01-百思不得姐改为百思不得姐（两种方法）

  • 在info.plist里修改，将key为Bundle name的value改为百思不得姐
    

  • 或点击蓝色的工程区域，同样在info中修改Bundle name
    

• 这个项目采用代码加xib的形式完成,将storyboard删掉后要点击蓝色项目将Main interface里的Main删掉
  

• 来到Appdelegate.m文件，在-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions这个方法中进行初始化（如：创建窗口）， 这个方法在程序启动完成后会调用一次。

• 初始化窗口

  // 创建窗口
  self.window = [[UIWindow alloc] init];
  self.window.frame = [UIScreen mainScreen].bounds;
  //设置窗口的根控制器（注意要导入ViewController.h头文件）
  self.window.rootViewController = [[ViewCotroller alloc] init];
  // 显示窗口
  [self.window makeKeyAndVisible];

• 在AppDelegate.m文件中设置跟控制器view的背景色

  self.view.backgroundColor = [UIColor redColor];

  配置tabBar

• 在使用git管理代码，每次实现一个功能后点击Source Control，选择Commit，写入commit message，并commit files。
• 搭建骨架，添加tabBar

  • 将根控制器修改为UITabBarController

    // 设置窗口的根控制器
    self.window.rootViewController = [[UITabBarController alloc] init];

  • 添加子控制器

    // 设置窗口的根控制器
    UITabBarController *tabBarController = [[UITabBarController alloc] init];
    // 添加子控制器(添加4个字控制器，代码只写一个示例)
    UIViewController *vc01 = [[UIViewController alloc] init];
    vc01.view.backgroundColor = [UIColor grayColor];    [tabBarController addChildViewController:vc01];
    self.window.rootViewController = tabBarController;

  • 用tabBarItem属性设置tabBar上的icon和title
    • 将项目图片都拖到蓝色Images.xcassets文件夹中
    • 设置icon和title
      objc vc01.tabBarItem.title = @"精华"; vc01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"]; vc01.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
• 添加子控制器的代码不应该放在APPDelegate.m文件里，要放在自定义tabBarController.（封装）

  • create一个自定义控制器ADMTabBarController，继承自UITabBarController，将根控制器设置为自己的tarBarController

    self.window.rootViewController = [[ADMTabBarController alloc] init];

• 点击选中的icon和title会被默认自动渲染为蓝色（两种解决方法）

  • 用imageWithRenderingMode方法，选择UIImageRenderingModeAlwaysOriginal属性.

    // 设置icon
    UIImage *image = [UIImage imageNamed:@"tabBar_essence_click_icon"];
    image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    vc01.tabBarItem.selectedImage = image;

  • 或直接在项目的图片的image set上面设置Render为Original Image，一劳永逸（建议用这种）
    

• 设置title（两种方法）

  • NSForegroundColorAttributeName和NSFontAttributeName

    // 属性存放在可变字典中
    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];

  • 用appearance来设置,一劳永逸(建议用这种)

      // 通过appearance统一设置所有UITabBarItem的文字属性
      // 后面带有UI_APPEARANCE_SELECTOR的方法, 都可以通过appearance对象来统一设置
      UITabBarItem *item = [UITabBarItem appearance];
      [item setTitleTextAttributes:attrs forState:UIControlStateNormal];
      [item setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];

• appearance

    // 通过appearance统一设置所有UITabBarItem的文字属性
    // 后面带有UI_APPEARANCE_SELECTOR的方法, 都可以通过appearance对象来统一设置。如：
    - (void)setTitleTextAttributes:(NSDictionary *)attributes forState:(UIControlState)state      NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
    - (NSDictionary *)titleTextAttributesForState:(UIControlState)state      NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
    //使用
    [UITabBarItem appearance];
    [UINavigationBar appearance];

自定义子控制器

• 写一个方法将重复的代码封装起来
• 方法如下

      //添加子控制器
      [self seuupChildVc:@"精华" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
         /**
           *初始化子控制器
           */
      -(void)setupChildVc:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
      {
        // 设置文字和图片
          vc.tabBarItem.title = title;
          vc.tabBarItem.image = [UIImage imageNamed:image];
          vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
          vc.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0                         blue:arc4random_uniform(100)/100.0 alpha:1.0];
          // 添加为子控制器
          [self addChildViewController:vc];
        }

• 为了方法的扩展性，方法改为(建议)：

  //添加子控制器
    [self setupChildVc:[[XMGEssenceViewController alloc] init] title:@"精华" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];

    [self setupChildVc:[[XMGNewViewController alloc] init] title:@"新帖" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];

    [self setupChildVc:[[XMGFriendTrendsViewController alloc] init] title:@"关注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];

    [self setupChildVc:[[XMGMeViewController alloc] init] title:@"我" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];

 /**
   *初始化子控制器
   */
  - (void)setupChildVc:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
  {
    // 设置文字和图片
      vc.tabBarItem.title = title;
      vc.tabBarItem.image = [UIImage imageNamed:image];
      vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
      vc.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];
      // 添加为子控制器
      [self addChildViewController:vc];
    }

自定义tabBar

• 这个是UITabBarController里面的TabBar,注意该属性是readonly的。

  @property(nonatomic,readonly) UITabBar *tabBar NS_AVAILABLE_IOS(3_0); // Provided for -[UIActionSheet showFromTabBar:]. Attempting to modify the contents of the tab bar directly will throw an exception.

• command+R运行后，点击调试工具，在左边点击UIWindow，选择UITabBar，展开后可看tabBar的内部结构。

• 尝试直接在tabBar上添加按钮

  //添加加号发布按钮
  UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCoustom];
  [publishButton setBackgroundImage:[UIImage imageNamed:@"tabB_publish_icon"] forState:UIControlStateNormal];
  [publishButton setBackgroundImage:[UIImage imageNamed:@"tab_publish_click_icon"] forState:UIControlStateHighlighted];
  publishButton.bounds = CGRectMake(0, 0, publishButton.currentBackgroundImage.size.width, publishButton.currentBackgroundImage.size.height);
  publishButton.center = CGPointMake(self.tabBar.frame.size.width*0.5,self.tabBar.frame.size.height*0.5);
  [self.tabBar addSubview:publishButton];

- 运行结果如图![](images/publishButton.png)
- 点击加号发布按钮，没有反应，因为被其他4个按钮给覆盖住,解决办法为自定义tabBar![](images/fugai.png)

• 自定义tabBar：
• New File一个XMGTabBar继承自UITarBar@interface XMGTabBar : UITabBar

• 更换tarBar

        // 更换tabBar，readonly，无法字节赋值，可以使用KVC
         //  self.tabBar = [[XMGTabBar alloc] init];
        // KVC
        [self setValue:[[XMGTabBar alloc] init] forKeyPath:@"tabBar"];

• XMGTabBar.m

#import "XMGTabBar.h"

@interface XMGTabBar()
/** 发布按钮 */
@property (nonatomic, weak) UIButton *publishButton;
@end

@implementation XMGTabBar

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [publishButton setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
        [publishButton setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
        [self addSubview:publishButton];
        self.publishButton = publishButton;
    }
    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    // 设置发布按钮的frame
    self.publishButton.bounds = CGRectMake(0, 0, self.publishButton.currentBackgroundImage.size.width, self.publishButton.currentBackgroundImage.size.height);
    self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);

    // 设置其他UITabBarButton的frame
    CGFloat buttonY = 0;
    CGFloat buttonW = self.frame.size.width / 5;
    CGFloat buttonH = self.frame.size.height;
    NSInteger index = 0;
    for (UIView *button in self.subviews) {
//        if (![button isKindOfClass:NSClassFromString(@"UITabBarButton")]) continue;
        if (![button isKindOfClass:[UIControl class]] || button == self.publishButton) continue;

        // 计算按钮的x值
        CGFloat buttonX = buttonW * ((index > 1)?(index + 1):index);
        button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);

        // 增加索引
        index++;
    }
}

@end

• 运行结果如图：