Modify Height of Single Tab in UITabBar

Question

Is there a way so that I can increase the height of a single tab (UITabbarItem) keeping the rest of the tabs with same height in UITabBar.

Customize the `UITabBar` This may help you http://stackoverflow.com/questions/4640588/really-cool-way-to-create-custom-uitabbar-for-iphone-app — hp iOS Coder, Sep 28 '12 at 05:07

score 5 · Accepted Answer · edited Apr 13 '14 at 15:06

I am just taking a guess that you are trying to have an instagram (previous instagram) or keek like interface where one of the tabBarItems were much larger than the rest.

You have two options.

Create a customTabBar with one of the items much larger. (I will not recommend this)
Just keep the existing tabBarItems as they are. There is no need for a custom one. You will just have to create a UIButton with the required height and shape and add that on top of your tabBarItem.

Our work then comes down to creating a subclass of UITabBarController and add a custom UIButton on top of the UITabBar.

UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0.0, 0.0, buttonImage.size.width, buttonImage.size.height);
[button setBackgroundImage:buttonImage forState:UIControlStateNormal];
[button setBackgroundImage:highlightImage forState:UIControlStateHighlighted];

CGFloat heightDifference = buttonImage.size.height - self.tabBar.frame.size.height;
if (heightDifference < 0)
    button.center = self.tabBar.center;
else
{
    CGPoint center = self.tabBar.center;
    center.y = center.y - heightDifference/2.0;
    button.center = center;
}

[self.view addSubview:button];

score 1 · Answer 2 · answered Sep 28 '12 at 05:07

1

From my experience, you must extend the UITabBar class and when you initialize your UITabBarItems, set their heights accordingly. Also, create a background image for your UITabBar.

answered Sep 28 '12 at 05:07

Alex Smith

468
5
22

score 1 · Answer 3 · answered Sep 28 '12 at 06:20

1

You can use customTabBar, here you can get sample of it, its nice classes and you can set tabBar item according to your size.

Link

answered Sep 28 '12 at 06:20

Rajneesh071

30,846
15
61
74

score 1 · Answer 4 · answered Dec 10 '15 at 21:38

In Swift 2.0, you can have a subclass of UITabBarController and add the UIButton using the following code:

let button: UIButton = UIButton(type: UIButtonType.Custom)
button.backgroundColor = UIColor.clearColor()
let buttonImage: UIImage = UIImage(named: "logo")!
let buttonImageHighlighted: UIImage = UIImage(named: "logoHighlighted")!
button.frame = CGRectMake(0.0, 0.0, buttonImage.size.width, buttonImage.size.height);
button.setBackgroundImage(buttonImage, forState: UIControlState.Normal)
button.setBackgroundImage(buttonImageHighlighted, forState: UIControlState.Highlighted)

let heightDifference:CGFloat = buttonImage.size.height - self.tabBar.frame.size.height;
if (heightDifference < 0) {
    button.center = self.tabBar.center;
} else {
    var center: CGPoint = self.tabBar.center;
    center.y = center.y - heightDifference/2.0;
    button.center = center;
}

self.view.addSubview(button)

Modify Height of Single Tab in UITabBar

4 Answers4