ios tabbar customization with images

Question

i\'m working in ios application i need to customize tabbar to be like this

First I created 5 viewcontrollers each one in navi

Answer 1

In the AppDelegate.m file, add the following code. In that piece of code, we are creating four views and adding them to a Tab Controller. These views are empty for now because we don’t need any content in them for the purposes of this project.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    UITabBarController *tabController = [[UITabBarController alloc] init];  


    UIViewController *viewController1 = [[UIViewController alloc] init];  


    UIViewController *viewController2 = [[UIViewController alloc] init];  


    UIViewController *viewController3 = [[UIViewController alloc] init];    


    UIViewController *viewController4 = [[UIViewController alloc] init];  

    tabController.viewControllers = [NSArray arrayWithObjects:viewController1, 

                                     viewController2, 

                                     viewController3, 

                                     viewController4, nil];

    self.window.rootViewController = tabController;  


    [self.window makeKeyAndVisible];

    return YES;

}

You can see a good tutorial here

Answer 2

try this paste it .h file

      #import <UIKit/UIKit.h>
    @class MapViewController,MenuViewController;
    @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

    @interface SegmentedControlExampleAppDelegate : NSObject <UIApplicationDelegate> {

        UIWindow * window;
        UINavigationController * navigationController;
        NSMutableArray *breads;
        NSMutableArray *categorys;
        NSMutableArray *collections;
        NSString *databaseName;
        NSString *databasePath;
        MapViewController *mapViewController;

        MenuViewController *wvTutorial;


    }

    @property (nonatomic, retain) IBOutlet UIWindow * window;
    @property (nonatomic, retain) UINavigationController * navigationController;
    @property (nonatomic,retain) NSMutableArray *breads;
    @property (nonatomic,retain) NSMutableArray *categorys;
    @property (nonatomic,retain) NSMutableArray *collections;
    @property (nonatomic, retain) UITabBarController *tabBarController;
    @property (nonatomic, retain) MenuViewController *wvTutorial;


    @end

In .m file

    #import "SegmentedControlExampleAppDelegate.h"
    #import "SegmentManagingViewController.h"
    #import "sqlite3.h"
    #import "AtoZHomePageViewController.h"
    #import "CategoryViewHomePage.h"
    #import "CollectionsListHomePageViewController.h"
    #import "AboutUs.h"
    #import "StoreLocatorViewController.h"
    #import "UINavigationBar+CustomImage.h"
    #import "MenuViewController.h"
    @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

    @implementation SegmentedControlExampleAppDelegate

    @synthesize window,tabBarController, navigationController,breads,categorys,collections,wvTutorial;

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        databaseName = @"ProductsConnect_Master.sqlite";


        NSArray *documentPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
        NSString *documentsDir = [documentPaths objectAtIndex:0];
        databasePath = [documentsDir stringByAppendingPathComponent:databaseName];


        self.tabBarController = [[UITabBarController alloc] init];
        UIViewController *viewController = [[AboutUs alloc] initWithNibName:@"AboutUs" bundle:nil];
        UIViewController *viewController2 = [[StoreLocatorViewController alloc] initWithNibName:@"StoreLocatorViewController" bundle:nil];
        //UIViewController *viewController3 = [[MenuViewController alloc] initWithNibName:@"MenuViewController" bundle:nil];

        self.wvTutorial = [[MenuViewController alloc]initWithNibName:@"MenuViewController" bundle:nil];




        SegmentManagingViewController * segmentManagingViewController = [[SegmentManagingViewController alloc] init];
        self.navigationController = [[UINavigationController alloc] initWithRootViewController:segmentManagingViewController];

        tabBarController.viewControllers = [NSArray arrayWithObjects:navigationController,viewController ,viewController2,wvTutorial , nil]; 



        [[UITabBar appearance] 
         setTintColor: [UIColor colorWithRed:120.0f/255.0f green:69.0f/255.0f blue:50.0f/255.0f alpha:1.0f]];
        [[UITabBar appearance] setSelectedImageTintColor:[UIColor colorWithRed:255.0f/255.0f green:252.0f/255.0f blue:235.0f/255.0f alpha:1.0f]];

        //[[UITabBar appearance] 

        // setBackgroundColor: [UIColor colorWithRed:255.0f/255.0f green:252.0f/255.0f blue:235.0f/255.0f alpha:0.8f]];


        navigationController.title = NSLocalizedString(@"HomePage", @"HomePage");
        navigationController.tabBarItem.image = [UIImage imageNamed:@"logoSmall"];

        [[UIApplication sharedApplication] setStatusBarHidden:YES];

        UIImage *navImage = [UIImage imageNamed:@"logoSmall.png"];
        // self.navigationItem.setImage: navImage;

        [[navigationController navigationBar] performSelectorInBackground:@selector(setBackgroundImage:) withObject:navImage];

        // UIImage *navImage = [UIImage imageNamed:@"logoSmall.png"];
        //[[navigationController navigationBar] performSelectorInBackground:@selector(setBackgroundImage:) withObject:navImage];




        [self.window addSubview:tabBarController.view];
        [segmentManagingViewController release];
        //[window addSubview:self.navigationController.view];
        [window makeKeyAndVisible];

        return YES;
    }

i have used this code working fine for me.

Answer 3

For customizing tab bar in ios4 is not available with code for that you need to make us custom tab bar for that you can refer this Que.

How to Customize the tabbarcontroller

or you also can do like simple logic with making full tab bar image like this

here i have made one image view on appdel did finish method and done like this in the app.

self.imgV.frame=CGRectMake(0, 431, 320, 49);
[self.tabbarcontroller.view addSubview:self.imgV];

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController{
    NSUInteger index=[[tabBarController viewControllers] indexOfObject:viewController];
    NSString *deviceType = [UIDevice currentDevice].model;
    NSLog(@"Device%@",deviceType);

    if(UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPad){
      //  self.imgV.frame=CGRectMake(0, 975, 768, 49);
        //[self.tabbarcontroller.view addSubview:self.imgV];

        switch (index) {
            case 0:
                self.imgV.image=[UIImage imageNamed:@"reservation_tab~iPad.png"];
                break;
            case 1:
                self.imgV.image=[UIImage imageNamed:@"place_order_tab~iPad.png"];
                break;
            case 2:
                self.imgV.image=[UIImage imageNamed:@"location_tab~iPad.png"];
                break;
            case 3:
                self.imgV.image=[UIImage imageNamed:@"favorite_tab~iPad.png"];
                break;
            case 4:

                self.imgV.image=[UIImage imageNamed:@"signature_dishes_tab~iPad.png"];

                break;
            case 5:
                self.imgV.image=[UIImage imageNamed:@"history_tab~iPad.png"];
                break;
            case 6:

                self.imgV.image=[UIImage imageNamed:@"contact_us_tab~iPad.png"];

                break;
            default:
                break;
        }

    }
    else{



    switch (index) {
        case 0:
            self.imgV.image=[UIImage imageNamed:@"reservation_tab.png"];
            break;
        case 1:
            self.imgV.image=[UIImage imageNamed:@"place_order_tab.png"];
            break;
        case 2:
            self.imgV.image=[UIImage imageNamed:@"location_tab.png"];
            break;
        case 3:
            self.imgV.image=[UIImage imageNamed:@"favorite_tab.png"];
            break;
        case 4:

                       self.imgV.image=[UIImage imageNamed:@"gallery_tab.png"];

            break;
        default:
            break;
    }
    }
    return YES;
}