iOS利用`quartz2D`绘出tabBar的背景图片

Snip20160611_31.png

1.场景需求:

• 如上图,产品需求要tabBar中间的item特殊设置,中间item背景始终是深黑色;

2.分析

• 1.让UI设计师设计张tabBar背景图片,然后直接设置到tabBar上;
• 2.利用quartz2D技术,自己绘制背景图片,然后设置到tabBar上

下面利用quartz2D技术绘制背景图片

3.核心代码

-(void)configTabBars{
  CGSize tabSize = CGSizeMake(CGRectGetWidth(self.tabBarController.view.frame), 49);
  UIGraphicsBeginImageContext(tabSize);
  CGContextRef context = UIGraphicsGetCurrentContext();

  // draw whole image background color
  CGContextSetFillColorWithColor(context,[FTFColor colorWithHexString:@"#383838" withAlpha:1.0].CGColor);
  CGContextFillRect(context, CGRectMake(0, 0, tabSize.width, tabSize.height));
  
  // draw special middle item color
  CGContextSetFillColorWithColor(context, [FTFColor colorWithHexString:@"0x2b2b2b"].CGColor);
  CGFloat width=tabSize.width/5;
  CGContextFillRect(context, CGRectMake(width*2, 0, width, tabSize.height));
  
  UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  
  // setting tabBar backgroundImage
  self.tabBarController.tabBar.backgroundImage = img;
  // setting tabBar image color
  self.tabBarController.tabBar.tintColor = [FTFColor mainGolden];
  
  // setting tabBar title color
  for (UITabBarItem *item in self.tabBarController.tabBar.items) {
   // item.imageInsets = UIEdgeInsetsMake(0, 0, 0, 0);
    [item setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor whiteColor]} forState:UIControlStateNormal];
    
    [item setTitleTextAttributes:@{NSForegroundColorAttributeName:[FTFColor mainGolden]} forState:UIControlStateSelected];
  }
}