Search code examples
cocoa-touchuitabbar

How can i make a UITabbar like this?


I would like to create a UITabbar like below but i don't know what is the logic to do that.

enter image description here


Solution

  • Here is the large answer:

    First of all, you will need to create a UIView subclass to get a view that looks like the bar that you want. It can be composed by a background UIImageView and three buttons.

    Then, the best thing would be to create a subclass of the UITabBarController and in its viewDidLoad or at any point where the flow will go through just once, you instantiate one view of type specified at first point. You should place the frame of this view in order to hide the original tabbar of the controller.

    This would be the custom bar header file:

    @interface CustomBar : UIView
    {
    }
    
    @property (nonatomic, retain) UIImageView *backgroundView;
    @property (nonatomic, retain) NSArray *buttons;
    
    @end
    

    You can easily complete the implementation. You can try to look for how to instantiate it with a nib file to make it easier to design it. In order to test, you can first just set the background color to green or something visible.

    Then, this would be the subclass of the UITabBarController class:

    @interface CustomTabBarController : UITabBarController
    
    @property (nonatomic, retain) CustomBar *customBar;
    
    @end
    
    
    @implementation CustomTabBarController
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    
        self.customBar = [[[CustomBar alloc] initWithFrame:[self.tabBar frame]] autorelease];
        [self.view addSubview:self.customBar];
    }
    
    @end
    

    Please, remember to implement the dealloc if you are not using ARC. The thing I am not sorting out here is how to create the communication between the buttons from the custombar and the tabbarcontroller. This should be solved by delegates. If you need help with that, I will complete that too.

    Good luck!