Discussion Forums  >  Status Bar, Navigation Bar

Replies: 9    Views: 226

farcat
buzztouch Evangelist
Profile
Posts: 1008
Reg: Jan 27, 2012
France
13,230
07/19/13 05:50 AM (7 years ago)

help understanding the logic in tab bar graphics

Hi Guys,

Right, I have been trying to fully customise an IOS tab bar so have a sleek minimalist look.
I kinda got there but I don't quite understand how the default shading works.

My icons are white and that's how I want them.
I made the background of the tab bar transparent:

[taBarAppearance setBackgroundImage:[UIImage imageNamed:@"tabbarbackgroundtrans.png"]];

I made the tab selector transparent as well (except for an underline that shows the active tab):

[taBarAppearance setSelectionIndicatorImage:[UIImage imageNamed:@"selecttabbarbackgroundnew.png"]];

I gave a white tint to the selected tab icon:

[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];

I made the text label white:

[[UITabBarItem appearance] setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,
[UIFont systemFontOfSize:10.0f], UITextAttributeFont,nil]
forState:UIControlStateNormal];

My problem is that my icons show grey instead of white when not selected.

It looks like some kind of gradient is applied (from top to bottom transparent to grey) to the icon.

How do I overwrite this? I just want the icon all white.

Here is the full snippet in the appDelegate.m file:

//code for change the color and background
UITabBar *taBarAppearance = [UITabBar appearance];

[taBarAppearance setBackgroundImage:[UIImage imageNamed:@"tabbarbackgroundtrans.png"]];
[taBarAppearance setSelectionIndicatorImage:[UIImage imageNamed:@"selecttabbarbackgroundnew.png"]];

[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];

[[UITabBarItem appearance] setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,
[UIFont systemFontOfSize:10.0f], UITextAttributeFont,nil]
forState:UIControlStateNormal];

UIImage *navBarImage = [UIImage imageNamed:@"navbarbackgroundtrans.png"];

[[UINavigationBar appearance] setBackgroundImage:navBarImage
forBarMetrics:UIBarMetricsDefault];


UIImage *barButton = [[UIImage imageNamed:@"button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];

[[UIBarButtonItem appearance] setBackgroundImage:barButton forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];

UIImage *backButton = [[UIImage imageNamed:@"back-button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0,15,0,6)];


[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButton forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];

//end of code


Thanks for the help.

Farcat
 
aquila198
buzztouch Evangelist
Profile
Posts: 470
Reg: Jul 22, 2011
location unknow...
10,300
like
07/19/13 06:11 AM (7 years ago)
Hey Farcat,

Wish I could be of help here. It's awesome the way you're looking under the hood & customizing the tab bar. I want to follow this thread, as I believe you're on to something really cool.
 
farcat
buzztouch Evangelist
Profile
Posts: 1008
Reg: Jan 27, 2012
France
13,230
like
07/19/13 06:16 AM (7 years ago)
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
07/19/13 06:27 AM (7 years ago)
I'm taking a stab in the dark,
The UITabBar is a selection of buttons. Got a feeling this may default the other non pressed buttons as not highlighted adding a grey tint. thus knowing which tab is active.

try this

[[UITabBar appearance] setTintColor:[UIColor whiteColor]];

under

[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];

Again doing it from memory, if there is a seleceted tint there must be a normal tint
 
farcat
buzztouch Evangelist
Profile
Posts: 1008
Reg: Jan 27, 2012
France
13,230
like
07/19/13 06:31 AM (7 years ago)
Wow, just like that...
It worked!! Thanks mate.

Farcat
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
07/19/13 06:32 AM (7 years ago)
did you have to fix any typos?
 
Annonymous
Profile
07/19/13 06:51 AM (7 years ago)
No, straight out of the box :)
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
07/19/13 06:59 AM (7 years ago)
Isn't it great when someone just posts a soulution.

Instead of doing a google search typing your rough question and posting the first stackoverflow post.
 
farcat
buzztouch Evangelist
Profile
Posts: 1008
Reg: Jan 27, 2012
France
13,230
like
07/19/13 01:45 PM (7 years ago)
It is sweet indeed!
All credit goes to my well formulated question ;)
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
07/19/13 01:47 PM (7 years ago)
lets see what it looks like
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.