RSS Feed

Customize TabBar in iPhone

Posted on

When you add Tab Bar in your iPhone project, by default its background color is black and selection color is blue. But if you need to change it add these code in your project file RootViewController-

// RootViewController.h file

@interface UITabBar (ColorExtensions)

– (void)recolorItemsWithColor:(UIColor *)color shadowColor:(UIColor *)shadowColor shadowOffset:(CGSize)shadowOffset shadowBlur:(CGFloat)shadowBlur;

@end

@interface UITabBarItem (Private)

@property(retain, nonatomic) UIImage *selectedImage;

– (void)_updateView;

@end

//RootViewController.m file

@implementation UITabBar (ColorExtensions)

– (void)recolorItemsWithColor:(UIColor *)color shadowColor:(UIColor *)shadowColor shadowOffset:(CGSize)shadowOffset shadowBlur:(CGFloat)shadowBlur

{

CGColorRef cgColor = [color CGColor];

CGColorRef cgShadowColor = [shadowColor CGColor];

for (UITabBarItem *item in [self items])

if ([item respondsToSelector:@selector(selectedImage)] &&

[item respondsToSelector:@selector(setSelectedImage:)] &&

[item respondsToSelector:@selector(_updateView)])

{

CGRect contextRect;

contextRect.origin.x = 0.0f;

contextRect.origin.y = 0.0f;

contextRect.size = [[item selectedImage] size];

// Retrieve source image and begin image context

UIImage *itemImage = [item image];

CGSize itemImageSize = [itemImage size];

CGPoint itemImagePosition;

itemImagePosition.x = ceilf((contextRect.size.width – itemImageSize.width) / 2);

itemImagePosition.y = ceilf((contextRect.size.height – itemImageSize.height) / 2);

UIGraphicsBeginImageContext(contextRect.size);

CGContextRef c = UIGraphicsGetCurrentContext();

// Setup shadow

CGContextSetShadowWithColor(c, shadowOffset, shadowBlur, cgShadowColor);

// Setup transparency layer and clip to mask

CGContextBeginTransparencyLayer(c, NULL);

CGContextScaleCTM(c, 1.0, -1.0);

CGContextClipToMask(c, CGRectMake(itemImagePosition.x, -itemImagePosition.y, itemImageSize.width, -itemImageSize.height), [itemImage CGImage]);

// Fill and end the transparency layer

CGContextSetFillColorWithColor(c, cgColor);

contextRect.size.height = -contextRect.size.height;

CGContextFillRect(c, contextRect);

CGContextEndTransparencyLayer(c);

// Set selected image and end context

[item setSelectedImage:UIGraphicsGetImageFromCurrentImageContext()];

UIGraphicsEndImageContext();

// Update the view

[item _updateView];

}

}

@end

// in ViewDidLoad{

// Give the selection color and its shadow

[[[self tabBarController] tabBar] recolorItemsWithColor:[UIColor whiteColor] shadowColor:[UIColor blackColor] shadowOffset:CGSizeMake(0.0f, -1.0f) shadowBlur:3.0f];

}

It’s works great friends 🙂

!! Enjoy !!

Advertisements

About Muzammil

Over the past 6 years, I have designed, developed and managed over 150 iPhone/iPad applications for many large-scale clients, some include Rolex, Ford, Makemark LLC, Source Digital Production, IT City (Kingdom of Saudi Arabia), R.Ø.S.A. Creation etc. These applications ranged from simple navigation bar application to high end user interface design for image processing, simple games with Core Graphics and OpenGL. Before started Triffort Technologies i was working in Ampere Software Pvt Ltd as a senior iOS Developer. I was the first employe of Ampere who started iPhone/iPad development in the company. In ampere i worked on some complex apps like Boxboss, Austin Post, User Tracking etc. Throughout my career, I have used Core Graphics, OpenGL, SQLite, Core Data, JSON, XML etc. I am very proficient in many design programs including Photoshop, Illustrator, Flash, iMove. Although I am very knowledgeable in all Adobe Products. Most the time i am designing my apps without taking help from any graphics designer. I love to make app from my designs. It feels great when you are creating app from scratch and no body else is involve in your ideas. You are free to do anything. As the Senior Developer and Team lead at Triffort Technologies, I managed a team of Technical Interactive Developers and Designers. As their manager I am responsible for scheduling, resource management, task reviews, process development and enhancements, employee reviews and new employee hiring. I believe good employee morale and communication are key factors to successful, creative work, therefore, positive feedback was part of my daily routine. But most of the time you can find me on my desk writing codes for some app. I love programming. This is my passion. I’m a team player. I am a motivated individual who enjoys taking on new challenges and learning new technologies. I am well organized and a proficient multi-tasker. I have strong problem solving skills such as the ability to use technology in creative ways to meet unique project requirements. I love to be challenged and I always have a positive outlook no matter how tight the deadline is. If you would like to contact me or find out more about my experience, please contact me at muzammil@triffort.com or you can Skype me at muz.iphonedev.

4 responses »

  1. // in ViewDidLoad also add this code to change the TabBar background color-

    CGRect frame = CGRectMake(0.0,0.0,self.view.bounds.size.width, 48);
    UIView *view = [[UIView alloc] initWithFrame:frame];
    UIImage *backgroundImage = [UIImage imageNamed:@”tabBar.png”];
    UIColor *tabBarColor = [[UIColor alloc] initWithPatternImage:backgroundImage];
    view.backgroundColor = tabBarColor;
    [tabBarColor release];

    [[[self tabBarController] tabBar] insertSubview:view atIndex:0];

    Reply
  2. Hi,
    It’s perfect coding.
    I copy and adapt your source code for use to solve this problem, change tabbar icon’s color, I write a article for this in thai language and thank you very much for this article.

    http://adayd3sign.wordpress.com/2011/04/08/change-icons-color-of-uitabbaritem/

    adaydesign 🙂

    Reply
  3. Hi,
    It’s worked well
    but when submitted to app store get rejected because of used of _updateView method

    The use of non-public APIs is not permissible because it can lead to a poor user experience should these APIs change.

    We found the following non-public API/s in your app:

    _updateView

    Please help me to resolved this problem.

    Thanks

    Reply
    • Hi Mithlesh,

      Yes, Apple blocked this method. If you are using latest XCode (4.5 or later), you can change the tab bar color directly from nib. No need for this.

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: