iOS多彩的Tabbar

前一段时间项目有需求,在TabbarController不同的页面之间进行切换的时候TabBarItem的颜色(图标和Title)要跟着改变,所以研究了一下如何设置TabbarItem的颜色, 在此记录一下。

样式如下图所示:

最终效果

iOS10之后苹果新增加了一个设置颜色的API:

tabBarController.tabBar.unselectedItemTintColor

对于只适配iOS10以后的APP使用这个方法可以轻松修改TabbarItem的颜色,但是iOS9及以前版本的要修改成需要的颜色还是比较麻烦,查找各种文档没有找到直接设置TabBarItemImage颜色的方法(各位大神如果发现欢迎指正),所以现在按照以下思路来解决:

  • Image的渲染模式改为UIImageRenderingModeAlwaysOriginal,然后设置给图标;
  • 通过算法计算出图标的颜色,再设置成Title的颜色。

将图片的渲染模式改为AlwaysOriginal可以有两种方式

  1. 如下图所示:

    图片渲染方式一

    适用于Storyboard中设置图片。

  2. 使用代码设置。例如:

     UIImage *image = [[UIImage new] imageWithRenderingMode:(UIImageRenderingModeAlwaysOriginal)];
    

引入文件自动计算并设置Title的颜色

  • 可以自定义一个类MyTabbarItem继承自UITabBarItem,并在设置TabbarItem的时候将UITabBarItem替换为自定义的类,以下为.m文件:

      #import "SHTabBarItem.h"
      @implementation SHTabBarItem
      - (instancetype)initWithCoder:(NSCoder *)aDecoder {
        if (self = [super initWithCoder:aDecoder]) {
      
        self.image = [self.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        self.selectedImage = [self.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
      
        [self setTitleTextAttributes:@{NSForegroundColorAttributeName : [self mostColorWithImage:self.image]}
                          forState:UIControlStateNormal];
      
      [self setTitleTextAttributes:@{NSForegroundColorAttributeName : [self mostColorWithImage:self.selectedImage]}
                          forState:UIControlStateSelected];
         }
         return self
      }
      - (void)setImage:(UIImage *)image {
        [super setImage:image];
        [self setTitleTextAttributes:@{NSForegroundColorAttributeName : [self mostColorWithImage:self.image]}
                      forState:UIControlStateNormal];
      }
      - (void)setSelectedImage:(UIImage *)selectedImage {
         [super setSelectedImage:selectedImage];
         [self setTitleTextAttributes:@{NSForegroundColorAttributeName : [self mostColorWithImage:self.selectedImage]}
               forState:UIControlStateSelected];
      }
      - (UIColor*)mostColorWithImage:(UIImage *)image {
      #if __IPHONE_OS_VERSION_MAX_ALLOWED > __IPHONE_6_1
         int bitmapInfo = kCGBitmapByteOrderDefault | kCGImageAlphaPremultipliedLast;
      #else
         int bitmapInfo = kCGImageAlphaPremultipliedLast;
      #endif
      // 第一步 先把图片缩小 加快计算速度. 但越小结果误差可能越大
         CGSize thumbSize = CGSizeMake(50, 50); 
         CGColorSpaceRef colorSpace =
         CGColorSpaceCreateDeviceRGB();
         CGContextRef context = CGBitmapContextCreate(NULL,
                                               thumbSize.width,
                                               thumbSize.height,
                                               8,//bits per component
                                               thumbSize.width * 4,
                                               colorSpace,
                                               bitmapInfo);
                                               CGRect drawRect = CGRectMake(0, 0, thumbSize.width, thumbSize.height);
                                               CGContextDrawImage(context, drawRect, image.CGImage);
                                               CGColorSpaceRelease(colorSpace);    
        // 第二步 取每个点的像素值
        unsigned char* data = CGBitmapContextGetData (context);
        if (data == NULL) return nil;
        NSCountedSet *cls = [NSCountedSet setWithCapacity:thumbSize.width*thumbSize.height];
        for (NSInteger x = 0; x < thumbSize.width; x++) {
        for (NSInteger y=0; y < thumbSize.height; y++) {
          
          NSInteger offset = 4 * ( x * y );
          
          NSInteger red = data[offset];
          NSInteger green = data[offset + 1];
          NSInteger blue = data[offset + 2];
          NSInteger alpha =  data[offset + 3];
          
          if (alpha != 255) continue;
          
          NSArray *clr=@[@(red),@(green),@(blue),@(alpha)];
          [cls addObject:clr];
          
          }
      }
          CGContextRelease(context);
          // 第三步 找到出现次数最多的那个颜色
          NSEnumerator *enumerator = [cls objectEnumerator];
          NSArray *curColor = nil;
          NSArray *MaxColor=nil;
          NSUInteger MaxCount=0;
          while ( (curColor = [enumerator nextObject]) != nil ) {
          NSUInteger tmpCount = [cls countForObject:curColor];
      
          if ( tmpCount < MaxCount ) continue;
      
          MaxCount=tmpCount;
          MaxColor=curColor;
          }
          return [UIColor colorWithRed:([MaxColor[0] intValue] / 255.0f) green:([MaxColor[1] intValue] / 255.0f) blue:([MaxColor[2] intValue] / 255.0f) alpha:1.0];
      }
      @end
    
  • 如果不想自定义可以直接下载Demo,直接拖到工程中;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,875评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,569评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,475评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,459评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,537评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,563评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,580评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,326评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,773评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,086评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,252评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,921评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,566评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,190评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,435评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,129评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,125评论 2 352

推荐阅读更多精彩内容