Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do we create a bigger center UITabBar Item

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

enter image description here

like image 285
JayVDiyk Avatar asked May 29 '15 10:05

JayVDiyk


3 Answers

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

enter image description here

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, enter image description here

Now, You will get it like you wanted, enter image description here

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 :-)

like image 154
ZameerMoh Avatar answered Oct 24 '22 11:10

ZameerMoh


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

like image 28
Manuel Escrig Avatar answered Oct 24 '22 09:10

Manuel Escrig


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.

like image 9
juanjo Avatar answered Oct 24 '22 10:10

juanjo