How do we create a bigger center UITabBar Item

Question

I am wondering how do we create a bigger center UITabBar like the shot below? Its really beautiful!!!!

enter image description here

ZameerMoh · Answer 1 · 2022-08-01T11:33:37.203

64

Click the tab bar button within the view controller of the particular tab bar item you want to make prominent,

Remove the text, just set the image inset top to -25 of the tab bar button.

Like Below image

After that

goto assets,
select the image you set in tab bar button,
set the property Rendering As to Original Image (in case if you have a colourful button or else it would render as one colour)
Like below,

Now, You will get it like you wanted,

EDIT: To make upper half clickable, inherit UITabBar

class ProminentTabBar: UITabBar {
    var prominentButtonCallback: (()->())?
    
    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        guard let items = items, items.count>0 else {
            return super.hitTest(point, with: event)
        }
        
        let middleItem = items[items.count/2]
        let middleExtra = middleItem.imageInsets.top
        let middleWidth = bounds.width/CGFloat(items.count)
        let middleRect = CGRect(x: (bounds.width-middleWidth)/2, y: middleExtra, width: middleWidth, height: abs(middleExtra))
        if middleRect.contains(point) {
            prominentButtonCallback?()
            return nil
        }
        return super.hitTest(point, with: event)
    }
}

And in TabBarController add this

override func viewDidLoad() {
    super.viewDidLoad()
    
    let prominentTabBar = self.tabBar as! ProminentTabBar
    prominentTabBar.prominentButtonCallback = prominentTabTaped
}

func prominentTabTaped() {
    selectedIndex = (tabBar.items?.count ?? 0)/2
}

And remmber there is no nice solution when it comes to UITabBar :-)

edited Aug 01 '22 at 11:33

answered Dec 06 '17 at 08:47

ZameerMoh

1,149
1
17
26

1

You are going to need 25 margins from the bottom as well or the image will appear oval. – Codetard Feb 15 '18 at 08:45
working fine but one issue when i click on button whole button color goes to blue. and image not show how to handle it? – Shahbaz Akram Apr 10 '18 at 07:04
Have you subclassed that button? – ZameerMoh Apr 10 '18 at 07:58
5

This works great visually, but it only accepts taps that are within the tab bar's bounds. Is there any way to register taps from the top 1/3 of the circle? – Grambo Aug 09 '18 at 13:27
Hmmm.. I can get it centered for iPhone devices, but as soon as it opens in IPad it is WAY off. – JCutting8 Sep 12 '18 at 08:39
@Grambo Did you get any solution to tap item out of tab bouds? – Ekta Padaliya Dec 18 '18 at 14:15
This worked for me but image is expanding if one keeps clicking on the same tab. How to overcome this? – Van Mar 08 '19 at 05:45
@van try setting the same size for the button on tap. – ZameerMoh Mar 08 '19 at 06:16
@IOSDealBreaker Yes tried it with did sleect method but no luck – Van Mar 08 '19 at 10:38
I have set Top = -15 and Bottom = 20 it is works for me. Thanks. – Komal Goyani Nov 03 '19 at 06:20
I want to click top half part of center button is there any way? – Komal Goyani Nov 05 '19 at 04:40
You mentioned inherit UITabBar, but how to achieve this, either storyboard or code? – WilliamX Jul 12 '20 at 15:41
@WilliamX Read the answer 2nd edited part. Snippet starting from class ProminentTabBar: UITabBar { – ZameerMoh Jul 13 '20 at 05:20
@ZameerMoh force cast to ProminentTabBar will create a crash as we never changed the subclass of UITabbar in your answer. Need to find a way to connect UITabbarController to this ProminentTabBar – nr5 Mar 22 '21 at 14:27
if I hide tabbar . but still above half button access on other pages. – Bhadresh Sonani Mar 04 '22 at 10:10
@BhadreshSonani add this line in hitTest function :- guard !clipsToBounds && !isHidden && alpha > 0 else { return nil } – Bikesh Thakur Aug 01 '22 at 06:08

Manuel Escrig · Accepted Answer · 2016-12-23T15:41:45.997

29

I recommend you taking a look at the following article. It explains how to customise a tab bar raising the main button.

Code:

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];

Guide: https://github.com/boctor/idev-recipes/tree/master/RaisedCenterTabBar

edited Dec 23 '16 at 15:41

answered May 29 '15 at 11:38

Manuel Escrig

2,825
1
27
36

The domain for that link has expired. In your code, is "self" a `UITabBarController`? – cohenadair Dec 22 '16 at 15:07
2

@cohenadair `self` would be the `UIViewController`. I added a link with the Github reposirtory with an [example](https://github.com/boctor/idev-recipes/tree/master/RaisedCenterTabBar) – Manuel Escrig Dec 23 '16 at 15:43

score 9 · Answer 3 · edited Jun 20 '20 at 09:12

9

Swift 3, 4:

I use this code in the viewDidLoad of my subclass of UITabBarController:

let button = UIButton()
button.setImage(UIImage(named: "home"), for: .normal)
button.sizeToFit()
button.translatesAutoresizingMaskIntoConstraints = false

tabBar.addSubview(button)
tabBar.centerXAnchor.constraint(equalTo: button.centerXAnchor).isActive = true
tabBar.topAnchor.constraint(equalTo: button.centerYAnchor).isActive = true

Sometimes I also set button.adjustsImageWhenHighlighted = false to mimic the behavior of the other items, or change the constraint constant property to move the button up or down.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 30 '17 at 15:32

juanjo

3,737
3
39
44

Don't see how this works for a Tab Bar? I now need a bunch of extra code to make the buttons open the tabs I want? – dub Sep 22 '20 at 12:21

score 7 · Answer 4 · answered Feb 08 '17 at 04:53

Here's the ported Swift 3 version of @Kakashi's answer (and +1 to them), which I put in my custom UITabBarController subclass:

override func viewDidLoad() {
        if let newButtonImage = UIImage(named: "new__button") {
            self.addCenterButton(withImage: newButtonImage, highlightImage: newButtonImage)
        }
 }

 func handleTouchTabbarCenter(sender : UIButton)
 {
    if let count = self.tabBar.items?.count
    {
        let i = floor(Double(count / 2))
        self.selectedViewController = self.viewControllers?[Int(i)]
    }
 }

func addCenterButton(withImage buttonImage : UIImage, highlightImage: UIImage) {

        let paddingBottom : CGFloat = 10.0

        let button = UIButton(type: .custom)
        button.autoresizingMask = [.flexibleRightMargin, .flexibleTopMargin, .flexibleLeftMargin, .flexibleBottomMargin]
        button.frame = CGRect(x: 0.0, y: 0.0, width: buttonImage.size.width / 2.0, height: buttonImage.size.height / 2.0)
        button.setBackgroundImage(buttonImage, for: .normal)
        button.setBackgroundImage(highlightImage, for: .highlighted)

        let rectBoundTabbar = self.tabBar.bounds
        let xx = rectBoundTabbar.midX
        let yy = rectBoundTabbar.midY - paddingBottom
        button.center = CGPoint(x: xx, y: yy)

        self.tabBar.addSubview(button)
        self.tabBar.bringSubview(toFront: button)

        button.addTarget(self, action: #selector(handleTouchTabbarCenter), for: .touchUpInside)

        if let count = self.tabBar.items?.count
        {
            let i = floor(Double(count / 2))
            let item = self.tabBar.items![Int(i)]
            item.title = ""
        }
    }

On button tap function handleTouchTabbarCenter is not called. — Ramis, Feb 09 '17 at 11:22
Problem: Device rotation, the button location does not follow. Also there are many other instances where the button is redrawn and the old button is still present. Such as in-call status bar — Jerland2, May 17 '17 at 14:41
Hi, thanks, I do see my button, but handleTouchTabbarCenter is not being called, what Might we missing (I see there is more people with the same error) — Mago Nicolas Palacios, Jun 23 '17 at 12:41

score 4 · Answer 5 · answered Jun 01 '17 at 14:27

I followed @Michael Dautermann answer but the button never registers the tap so I modified it to make it work:

  func handleTouchTabbarCenter()
{
    if let count = self.tabBar.items?.count
    {
        let i = floor(Double(count / 2))
        self.selectedViewController = self.viewControllers?[Int(i)]
    }
}

func addCenterButton(withImage buttonImage : UIImage, highlightImage: UIImage) {

    self.centerButton = UIButton(type: .custom)
    self.centerButton?.autoresizingMask = [.flexibleRightMargin, .flexibleTopMargin, .flexibleLeftMargin, .flexibleBottomMargin]
    self.centerButton?.frame = CGRect(x: 0.0, y: 0.0, width: buttonImage.size.width, height: buttonImage.size.height)
    self.centerButton?.setBackgroundImage(buttonImage, for: .normal)
    self.centerButton?.setBackgroundImage(highlightImage, for: .highlighted)
    self.centerButton?.isUserInteractionEnabled = true

    let heightdif: CGFloat = buttonImage.size.height - (self.tabBar.frame.size.height);

    if (heightdif < 0){
        self.centerButton?.center = (self.tabBar.center)
    }
    else{
        var center: CGPoint = (self.tabBar.center)
        center.y = center.y - 24
        self.centerButton?.center = center
    }

    self.view.addSubview(self.centerButton!)
    self.tabBar.bringSubview(toFront: self.centerButton!)

    self.centerButton?.addTarget(self, action: #selector(handleTouchTabbarCenter), for: .touchUpInside)

    if let count = self.tabBar.items?.count
    {
        let i = floor(Double(count / 2))
        let item = self.tabBar.items![Int(i)]
        item.title = ""
    }
}

score 3 · Answer 6 · answered Sep 18 '16 at 03:01

For hide UITabbar, I make custom UITabbarController and insert this method.

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self addCenterButtonWithImage:[UIImage imageNamed:@"logo"] highlightImage:[UIImage imageNamed:@"logo"]];
}

- (void)addCenterButtonWithImage:(UIImage*)buttonImage highlightImage:(UIImage*)highlightImage
{
    float paddingBottom = 10;

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

    CGRect rectBoundTabbar = [self.tabBar bounds];
    float xx = CGRectGetMidX(rectBoundTabbar);
    float yy = CGRectGetMidY(rectBoundTabbar) - paddingBottom;
    button.center = CGPointMake(xx, yy);

    [self.tabBar addSubview:button];
    [self.tabBar bringSubviewToFront:button];

    // add handle
    [button addTarget:self action:@selector(handleTouchTabbarCenter:) forControlEvents:UIControlEventTouchUpInside];

    // hide title item menu
    NSInteger count = [self.tabBar.items count];
    NSInteger i = floor(count / 2.0);
    UITabBarItem *item = [self.tabBar.items objectAtIndex:i];
    [item setTitle:nil];

}

- (void)handleTouchTabbarCenter:(id)sender
{
    // go to some view
}

score 3 · Answer 7 · answered Nov 09 '17 at 22:53

I've taken Manuel's example (the accepted answer) and added an adjustment for the bottom safe area insets due to issues with iPhone X.

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;
CGPoint center = self.tabBar.center;
if (heightDifference >= 0) {
    center.y = center.y - heightDifference/2.0;
}

if (@available(iOS 11.0, *)) {
    UIWindow *window = UIApplication.sharedApplication.keyWindow;
    CGFloat bottomPadding = window.safeAreaInsets.bottom;
    center.y = center.y - bottomPadding;
}

[self.view addSubview:button];

Thank you for this, the accepted answer is from 2010 so it's nice to see an updated fix for newer models :) — Eman, May 08 '20 at 22:07

score 1 · Answer 8 · answered May 20 '16 at 12:04

1

For Swift

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (Int64)(2.0)), dispatch_get_main_queue(), {
            let button: UIButton = UIButton(type: .Custom)
            let win:UIWindow = UIApplication.sharedApplication().delegate!.window!!

            button.frame = CGRectMake(0.0, win.frame.size.height - 65, 55, 55)
            button.center = CGPoint(x:win.center.x , y: button.center.y)

            button.setBackgroundImage(UIImage(named: "Camera") , forState: .Normal)
            button.setBackgroundImage(UIImage(named: "Camera"), forState: .Highlighted)
            win.addSubview(button)
        });

answered May 20 '16 at 12:04

Hardik Thakkar

15,269
2
94
81

Why are you adding the button to the window of the application? Wouldn't it make much more sense to add it to the view of the view controller, or better yet, to the tab bar itself? – Brian Sachetta Aug 24 '17 at 17:41
i have some other requirement for that i have to add as above code. This is tested code for my project requirment. – Hardik Thakkar Aug 25 '17 at 04:04
Right, it makes sense that it would work, it just seems like it would make more sense to associate the button with the view it belongs to, rather than the window of the entire app. – Brian Sachetta Aug 25 '17 at 14:50
Who give downvote.. please give reason for the same. – Hardik Thakkar Feb 19 '19 at 04:09
The question is asked for customizing UITabbar not adding a button in window. – Naveen Shan Jun 19 '20 at 00:18

How do we create a bigger center UITabBar Item

8 Answers8

Swift 3, 4:

Linked

Related