Changing Tint / Background color of UITabBar


28

down vote

favorite

46

share [fb]

share [tw]


The UINavigationBar and UISearchBar both have a tintColor property that allows you to change the tint color (surprising, I know) of both of those items. I want to do the same thing to the UITabBar in my application, but have found now way to change it from the default black color. Any ideas?

iphone uitabbarcontroller


link|edit


asked Feb 20 '09 at 20:02

pixel

2,15451824

86% accept rate


These are great answers. If you're allowing autorotation, it's helpful to set the autoresizingMask of the subview to have flexible margins and size, or the new background won't resize with the tab bar. – pmjordan Jul 2 '10 at 16:52


up vote

31

down vote

accepted


I have been able to make it work by subclassing a UITabBarController and using private classes:

@interface UITabBarController (private)

- (UITabBar *)tabBar;

@end

@implementation CustomUITabBarController

- (void)viewDidLoad {

    [super viewDidLoad];

    CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, 48);

    UIView *v = [[UIView alloc] initWithFrame:frame];

    [v setBackgroundColor:kMainColor];

    [v setAlpha:0.5];

    [[self tabBar] addSubview:v];

    [v release];

}

@end


link|edit


answered Mar 14 '09 at 17:17

coneybeare

12.6k33162


This is sort of an odd solution in that it just places semi transparent brown rectangle on top of the tabbar. The problem is that all the buttons are turned brown, not just the background. However this seems to be the best option anyone's presented so far. – Jonah Aug 18 '09 at 20:04


is this a private API? if i used this in my app would i get refused? – Frank Nov 16 '10 at 18:23


there doesnt appear to be any private calls in there no – tigermain Nov 25 '10 at 18:02


the tabbar property used to not be accessible. – coneybeare Nov 26 '10 at 18:24


this modifies the tabbar background, not the "selected item" highlight, which i would be more interested in – Ryan Sullivan Nov 27 '10 at 20:33

show 3 more comments

feedback


up vote

25

down vote


I have an addendum to the final answer. While the essential scheme is correct, the trick of using a partially transparent color can be improved upon. I assume that it's only for letting the default gradient to show through. Oh, also, the height of the TabBar is 49 pixels rather than 48, at least in OS 3.

So, if you have a appropriate 1 x 49 image with a gradient, this is the version of viewDidLoad you should use:

- (void)viewDidLoad {

    [super viewDidLoad]; 

    CGRect frame = CGRectMake(0, 0, 480, 49);

    UIView *v = [[UIView alloc] initWithFrame:frame];

    UIImage *i = [UIImage imageNamed:@"GO-21-TabBarColorx49.png"];

    UIColor *c = [[UIColor alloc] initWithPatternImage:i];

    v.backgroundColor = c;

    [c release];

    [[self tabBar] addSubview:v];

    [v release];

}

Here's what the UITabBar looks like: http://www.lehigh.edu/sol0/TabBarGradient.jpg


link|edit


answered Dec 30 '09 at 20:51

pabugeater

25132


1


 


if you want to make it pretty with a background picture, see this: duivesteyn.net/2010/01/16/iphone-custom-tabbar-background-image – norskben Feb 12 '10 at 12:58


I think it needs to be: [[self tabBar] insertSubview:v atIndex:0]; – Vibhor Goyal Aug 17 '10 at 20:49


I know the answer is old but that worked for me. Since i needed a custom image instead of a color, i mixed your answer with this one tint on bars - UITabBar part – RaphaelDDL Nov 18 at 19:25

feedback


up vote

17

down vote


when you just use addSubview your buttons will loose clickability, so instead of

[[self tabBar] addSubview:v];

use:

[[self tabBar] insertSubview:v atIndex:0];


link|edit


answered Oct 5 '09 at 10:45

Marcin Zbijowski

19917


1


 


thanks it worked for me.. – Biranchi Apr 2 '10 at 6:03

feedback


up vote

4

down vote


There is no simple way to do this, you basically need to subclass UITabBar and implement custom drawing to do what you want. It is quite a bit of work for the effect, but it may be worth it. I recommend filing a bug with Apple to get it added to a future iPhone SDK.


link|edit


answered Feb 20 '09 at 20:11

Louis Gerbarg

20.3k3656


1


 


Sir, did you filled up a bug with apple? – Spark Oct 30 '09 at 18:37

feedback


up vote

2

down vote


[v setBackgroundColor ColorwithRed: Green: Blue: ];


link|edit


answered Jun 8 '09 at 6:45

jlthero


feedback


up vote

2

down vote


[[self tabBar] insertSubview:v atIndex:0]; works perfectly for me.


link|edit


edited Aug 4 at 19:15

Legolas

3,3411218


answered Jun 3 '10 at 18:12

jimmy

632


feedback


up vote

0

down vote


Another solution (which is a hack) is to set the alpha on the tabBarController to 0.01 so that it is virtually invisible yet still clickable. Then set a an ImageView control on the bottom of the MainWindow nib with your custom tabbar image underneath the alpha'ed tabBarCOntroller. Then swap the images, change colors or hightlight when the tabbarcontroller switches views.

However, you lose the '...more' and customize functionality.


link|edit


answered Aug 3 at 11:09

user855723

93


feedback

 

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 330987132 | Go:217696290 | Python:336880185 | 做人要厚道,转载请注明出处!http://www.cnblogs.com/sunshine-anycall/archive/2011/12/13/2285784.html

时间: 2024-09-12 04:13:33

Changing Tint / Background color of UITabBar的相关文章

css3教程:background属性调整增强

网页制作Webjx文章简介:css3.0对background的调整与增强. (注:仅对css3对background的调整.增加的属性进行了翻译)css3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用","逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显

CSS3对background的调整和增加的属性

CSS3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用","逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下: background-image: url(top-image.jpg), url(middle-image.jpg), url(bo

Bootstrap的Color Palette颜色选择器

Color Palette是一个颜色选择器,基于Bootstrap前端开发框架,适用于Bootstrap 2.3.2+以上的版本,依赖于jQuery插件库,支持自定义配置预设的颜色,轻量级的颜色选择jQuery插件. 依赖关系 Bootstrap 2.3.2+ jQuery 1.8.1+ 安装方法 如果你习惯使用Git,你可以使用下面的命令获取到插件的文件: git https://github.com/extremeFE/bootstrap-colorpalette.git 如果你不知道Git

css教程:CSS背景background属性的应用

The CSS background properties define the background effects of an element. CSS的background属性可为元素定义背景效果. 设置背景颜色 Set the background color This example demonstrates how to set the background color for an element. 实例:  代码如下 复制代码 body {background-color: ye

背景(Background)如何缩写?

Background背景的属性如下: ●background-color:#f00;  ●background-image:url(background.gif);  ●background-repeat:no-repeat;  ●background-attachment:fixed;  ●background-position:0 0;  可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是backgroun

[引用] Taking a look at SWT Images

From: http://www.eclipse.org/articles/Article-SWT-images/graphics-resources.html This first section of this article gives an introduction to colors and shows how an image records the color value of each pixel. Introduction Image lifecycle ImageData C

VBS、ASP代码语法加亮显示的类 (二)

显示|语法 <!--#include file="token.asp"--><% ' *************************************************************************' This is all test/example code showing the calling syntax of the ' cBuffer class ... the interface to the cBuffer objec

Programming Microsoft Office 2000 Web Components第一

第一章第二节 Office Web Components是什么? Office Web Components是一组的COM控件,设计的目的是为众多的控件容器提供交互的电子表格建模,数据报表和数据可视化功能.OWC库包含四个主要的组件:电子表格组件,图表组件,透视表组件和数据源组件.我们将在这一节中简要论述每个控件,然后在后续各章中讨论更多细节. 注释: COM也被称作ActiveX.当微软发明了术语"ActiveX"来描述COM技术时,我正在Visual Basic小组,这个术语使得我

VBS、ASP代码语法加亮显示的类(2)

显示|语法 <!--#include file="token.asp"--><% ' *************************************************************************' This is all test/example code showing the calling syntax of the ' cBuffer class ... the interface to the cBuffer objec