How can i make central raised tabbar item?

Question

At first I want to say that i am new in iPhone application development.I want to make a tabbaritem when i will select a item of the tabbar then it should be look like that

Many Thanks In Advance.

Answer 1

Know it's already been answered, but wanted to offer an alternative approach.

Subclassing UITabBarController is a bad idea, according to the docs. I also had no end of trouble when I actually tried to use a UIImagePickerController as one of the view controllers behind the subclassed tabbar.

I took a much simpler approach just overlaying a uibutton over the tabbar item. Example project can be found here:

https://github.com/group6/RaisedCenterButton

It's just an example though. You're still going to need to do the work to incorporate it into an app.

Answer 2

This has been covered in quite a few tutorials. How most of these apps achieve the effect is they put a custom UIButton which follows similar styling to the Tab Bar on top of the tab bar in the center.

iDev Recipes has an excellent tutorial with the code example

Answer 3

I would advise not to do this. iOS users are used to the familiar tab bar functionality. The highlight is sufficient to let them know on which tab they are.

Your design idea is very attractive, but it comes at a cost. The area above the bar beside the rased bar item is wasted, or the size of other icons have to be reduced. This will make it more difficult to use, not easier.

Here is a good tip: take 2 hours out of your busy life and read the Apple Human Interface Guidelines for iOS from cover to cover. Its fascinating reading and will give you good guidance for design questions like this.

Answer 4

For this you need to create custom tab bar by Sub classing UITabBarController.

TabBarController.h file :

@interface TabBarController : UITabBarController<UITabBarControllerDelegate>
{
    UITabBarController *tabController;

    UIImageView *img1;
    UIImageView *img2;
    UIImageView *img3;
    UIImageView *img4;
}

.m file

- (void)viewDidLoad 
{       
    [self loadTabView];
    //[self viewWillAppear:YES];
    [super viewDidLoad];        
}

- (void) loadTabView 
{
    tabController = [[UITabBarController alloc] init];
    tabController.delegate = self;
    tabController.tabBar.backgroundColor = [UIColor clearColor];

    //set offset for tabbar items images. 
    int topOffset = 6;
    int bottomOffset = 6;
    UIEdgeInsets imageInset = UIEdgeInsetsMake(topOffset, 0, -bottomOffset, 0);

    [self.view addSubview:tabController.view];
}

// reset the background image in custom tabbar.
- (void) setTabBarBackground {

    UIImageView *img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"btnbg.png"]];
    img.frame = CGRectOffset(img.frame, 0, 1);
    img.frame = CGRectMake(img.frame.origin.x, img.frame.origin.y-1, img.frame.size.width, img.frame.size.height);
    [tabController.tabBar insertSubview:img atIndex:0];
    [img release];

}

// reset the background image in custom tabbar.
- (void) resetTabBar : (NSString *) tabid
{   
    [img1 removeFromSuperview];

    NSLog(@"tab id - %@",tabid);
    switch ([tabid intValue]) {
        case 0:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-1.jpg"]];
            break;
        case 1:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-2.jpg"]];
            break;
        case 2:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-3.jpg"]];
            break;
        case 3:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-4.jpg"]];
            break;
        case 4:
            img1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab-5.jpg"]];
            break;
        default:
            break;
    }

    img1.frame = CGRectOffset(img1.frame, 0, 1);
    [tabController.tabBar insertSubview:img1 atIndex:0];
    [tabController.tabBar bringSubviewToFront:img1];
    [img1 release];

}

// here push View controllers
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
}

Hope it gives you idea..