Swift 4 - 标签栏项目上的按钮

Posted

技术标签:

【中文标题】Swift 4 - 标签栏项目上的按钮【英文标题】:Swift 4 - Button over Tab Bar Item 【发布时间】:2017-10-03 14:41:34 【问题描述】:

我正在尝试将自定义按钮放置在我的标签栏的一项上。

func setupMiddleButton() 

    let numberOfItems = CGFloat(tabBar.items!.count)
    let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
    let menuButton = UIButton(frame: CGRect(x: 0, y: 0, width: tabBarItemSize.width, height: self.tabBar.frame.size.height))
    var menuButtonFrame = menuButton.frame
    menuButtonFrame.origin.y = self.view.bounds.height - menuButtonFrame.height
    menuButtonFrame.origin.x = self.view.bounds.width/2 - menuButtonFrame.size.width/2
    menuButton.frame = menuButtonFrame

    menuButton.backgroundColor = UIColor.white

    self.view.addSubview(menuButton)


    self.view.layoutIfNeeded()

我的问题是,在前面的代码中,按钮并没有完美地覆盖在栏项目上(见图):

有什么建议吗?我真的不知道还有什么办法。

谢谢!

【问题讨论】:

【参考方案1】:

我注意到这个屏幕截图是 iPhone X 模拟器的,它在屏幕底部有不同的布局。 您的代码适用于任何其他 iPhone。在 ios 11 中,他们引入了所谓的“安全区域”。当您计算按钮的大小和原点时,您必须将其考虑在内。

当您为 buttonFrame 计算 origin.y 时,您必须减去底部安全区域的高度,如下所示:

menuButtonFrame.origin.y = self.view.bounds.height - menuButtonFrame.height - self.view.safeAreaInsets.bottom

但这并不能解决您的问题,因为您的代码可能在 viewDidLoad 中运行,这发生在视图知道它应该显示在具有安全区域的 iPhone X 上之前。

您可以为此覆盖viewDidLayoutSubviews,并在每次调用时为您的按钮设置正确的框架。

这将解决您的问题:

class CustomTabBarViewController: UITabBarController 

    let menuButton = UIButton(frame: CGRect.zero)
    override func viewDidLoad() 
        super.viewDidLoad()
        setupMiddleButton()
    
    func setupMiddleButton() 
        let numberOfItems = CGFloat(tabBar.items!.count)
        let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
        menuButton.frame = CGRect(x: 0, y: 0, width: tabBarItemSize.width, height: tabBar.frame.size.height)
        var menuButtonFrame = menuButton.frame
        menuButtonFrame.origin.y = self.view.bounds.height - menuButtonFrame.height - self.view.safeAreaInsets.bottom
        menuButtonFrame.origin.x = self.view.bounds.width/2 - menuButtonFrame.size.width/2
        menuButton.frame = menuButtonFrame
        menuButton.backgroundColor = UIColor.green
        self.view.addSubview(menuButton)
        self.view.layoutIfNeeded()
    
    override func viewDidLayoutSubviews() 
        super.viewDidLayoutSubviews()
        menuButton.frame.origin.y = self.view.bounds.height - menuButton.frame.height - self.view.safeAreaInsets.bottom
    

我知道从viewDidLayoutSubviews 内部调用setupMiddleButton 很诱人,但不要那样做。 viewDidLayoutSubviews 不应用于创建按钮等,它只能用于将它们相应地移动到视图的其余部分。您可能想在viewDidLayoutSubviews 中设置menuButton 的整个框架,而不是像我那样只设置origin.y,特别是如果您需要支持旋转/横向模式。在这个非常简单的例子中,更新origin.y 就足够了。

【讨论】:

我环顾四周,我刚刚注意到问题是 iPhone X 的额外空间..但是我不知道如何解决这个问题......所以谢谢你救了我很多时间......您的解决方案100%解决了问题!现在它完美地工作了!谢谢!

以上是关于Swift 4 - 标签栏项目上的按钮的主要内容,如果未能解决你的问题,请参考以下文章

隐藏标签栏上的覆盖按钮

需要在 swift 4 中设计自定义标签栏。 - 更新

iphone在按钮单击时更改标签栏项目

标签栏自定义按钮图像不显示

iOS Swift标签栏控制器以编程方式添加项目(新标签)

Swift - 在整个项目中保持标签栏显示