我们如何创建一个更大的中心 UITabBar Item

Question

我想知道我们如何创建一个更大的中心 UITabBar，如下图所示？真的很美！！！

Answer 1

我建议你看看下面的文章。它解释了如何自定义一个标签栏来提升主按钮。

代码：

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

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

Answer 2

对于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)
        });

Answer 3

为了隐藏 UITabbar，我制作自定义 UITabbarController 并插入此方法。

- (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
}

Answer 4

这是移植的 Swift 3 版本的@Kakashi 的答案（以及对他们的 +1），我把它放在我的自定义 UITabBarController 子类中：

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 = ""
        }
    }

Answer 5

我遵循了@Michael Dautermann 的回答，但按钮从未注册水龙头，所以我修改了它以使其工作：

  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 = ""
    }
}

Answer 6

Swift3、4:

我在 UITabBarController 的子类 viewDidLoad 中使用此代码：

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

有时我也会设置 button.adjustsImageWhenHighlighted = false 来模仿其他项目的行为，或者更改约束 constant 属性来向上或向下移动按钮。

Answer 7

由于 iPhone X 的问题，我采用了 Manuel 的示例（已接受的答案）并添加了对底部安全区域插图的调整。

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

Answer 8

只有 Xcode

在要突出显示的特定标签栏项目的视图控制器中单击标签栏按钮，

移除文字，只需将标签栏按钮的图像插入顶部设置为-25。

喜欢下面的图片

之后

转到资产，
select 您在标签栏按钮中设置的图像，
设置属性 渲染为原始图像（如果你有一个彩色按钮，否则它会呈现为一种颜色）
像下面一样，

现在，你会得到你想要的，

编辑：要使上半部分可点击，请继承 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)
    }
}

并在 TabBarController 中添加这个

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

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

请记住，关于 UITabBar 没有很好的解决方案:-)

我们如何创建一个更大的中心 UITabBar Item

How do we create a bigger center UITabBar Item

custom-controls

uibutton

uitabbarcontroller

uitabbar

ios

Swift3、4:

只有 Xcode