ios - 如何在 iPhone X 上居中自定义标签栏项目

Question

我有一个应用程序，我在 UITabbarController 中创建了一个自定义选项卡栏项目，有人可以按下它来拍照，它看起来像下面这样。

这正是我想要的，问题是当我在 iPhone X 上测试它时，相机的标签栏项目看起来比我想要的要低，例如:

我已经尝试了一些方法来解决这个问题，比如在 viewDidLayoutSubviews() 中修复标签栏的高度，但它弄乱了 iPhone 8 上的标签栏。我还确保“使用安全区域布局”指南”被选中，但它仍然不起作用。

我也尝试过更改标签栏项的框架，但这也不起作用。

这是我用于自定义标签栏 Controller 的代码:

    import UIKit

class OtherTabController: UITabBarController, UITabBarControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        setupBtn()
        // Do any additional setup after loading the view.
    }





    func setupBtn() {
        let centerBtn = UIButton(frame: CGRect(x: 0, y: 10, width: 45, height: 45))

        var centerBtnFrame = centerBtn.frame
        centerBtnFrame.origin.y = (view.bounds.height - centerBtnFrame.height) - 2
        centerBtnFrame.origin.x = view.bounds.width/2 - centerBtnFrame.size.width/2
        centerBtn.frame = centerBtnFrame

        centerBtn.layer.cornerRadius = 35
        view.addSubview(centerBtn)
        let centerImg = UIImage(named: "Other")

        centerBtn.setBackgroundImage(centerImg, for: .normal)
        centerBtn.addTarget(self, action: #selector(centerBtnAction(sender:)), for: .touchUpInside)
        view.layoutIfNeeded()

    }


    @objc private func centerBtnAction(sender: UIButton) {
        print("Camera")
        cameraAction()
    }

    func cameraAction() {
        let alertController = UIAlertController.init(title: nil, message: nil, preferredStyle: .actionSheet)
        let takePhotoAction = UIAlertAction(title: "Take a Photo", style: .default, handler: nil)
        alertController.addAction(takePhotoAction)
        let selectFromAlbumAction = UIAlertAction(title: "Select from Album", style: .default, handler: nil)
        alertController.addAction(selectFromAlbumAction)
        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)
        alertController.addAction(cancelAction)
        self.present(alertController, animated: true, completion: nil)
        //OtherTabController?.present(alertController, animated: true, completion: nil)
    }
}

如果还有什么我可以帮忙的，请尽管问。谢谢

编辑:

我试图使 y View 与 super View 相同，但它所做的只是将按钮移动到屏幕顶部。

    var centerBtnFrame = centerBtn.frame
centerBtnFrame.origin.y = view.bounds.minY //Make centerBtn' top equal to that of view's
centerBtnFrame.origin.x = view.bounds.width/2 - centerBtnFrame.size.width/2
centerBtn.frame = centerBtnFrame

如果您需要更多信息，请询问。谢谢

---

编辑:在@Revanth Kausikan 的帮助下，我决定创建一个带有 View 和一些按钮的自定义标签栏。在我看来它工作得很好。它的边缘看起来有点粗糙，但这只是目前的测试。

这是 View 的代码:

    import UIKit

class ItemScene: UIViewController {


    @IBOutlet var customTab: UIView!

    @IBOutlet weak var cameraBtn: UIButton!

    @IBOutlet weak var twoBtn: UIButton!
    @IBOutlet weak var oneBtn: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()


    }

    @IBAction func cameraBtnPressed(_ sender: Any) {
        print("Camera")
    }


    @IBAction func twoBtnPressed(_ sender: Any) {
        self.performSegue(withIdentifier: "segue", sender: nil)
        print("Two")
    }


    @IBAction func oneBtnPressed(_ sender: Any) {
        print("One")
    }


}

这是第二个 ViewController 的代码:

    import UIKit

class TestingViewController: UIViewController {

    @IBOutlet weak var cameraBtn: UIButton!

    @IBOutlet weak var oneBtn: UIButton!

    @IBOutlet weak var twoBtn: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }


    @IBAction func cameraBtnPressed(_ sender: Any) {
        print("Camera")
    }


    @IBAction func twoBtnPressed(_ sender: Any) {

        print("Two")
    }

    @IBAction func oneBtnPressed(_ sender: Any) {
        performSegueToReturnBack()
        print("One")
    }
}


extension UIViewController {
    func performSegueToReturnBack()  {
        if let nav = self.navigationController {
            nav.popViewController(animated: true)
        } else {
            self.dismiss(animated: true, completion: nil)
        }
    }
}

如果有人有任何补充，将不胜感激。谢谢

Answer 1

按钮框架的 Y 点必须与其父 View (即此处的标签栏)的 Y 点相同。

如果您还没有为标签栏创建导出，请先创建。

1. 按住 Ctrl(或右键)单击并从 Storyboard中的选项卡栏拖动到其关联的 View Controller ，以创建一个 socket 。 (假设我将其命名为 tabBar)

2. 现在试试这个:

var centerBtnFrame = centerBtn.frame
let tabBarFrame = self.convert(tabBar.frame, to: view) 
centerBtnFrame.origin.y = tabBarFrame.minY //Make centerBtn' top equal to that of tabBar's
centerBtnFrame.origin.x = view.bounds.width/2 - centerBtnFrame.size.width/2
centerBtn.frame = centerBtnFrame

或者，你可以试试这个:

var centerBtnFrame = centerBtn.frame
centerBtnFrame.origin.y = view.height - tabBar.height //This is the same logic as you've used for fixing x value of centerBtnFrame.
centerBtnFrame.origin.x = view.bounds.width/2 - centerBtnFrame.size.width/2
centerBtn.frame = centerBtnFrame

另一种方法是返回到约束，并确保元素和基础 View 在安全区域内。

如果我的猜测是正确的(因为你没有在问题中提供有关约束的详细信息)，你已经将基本 View (位于底部/底部的 View ，包含所有其他元素)设置为适合 View Controller 的整个 View 。考虑更改它以适应安全区域。

让我知道结果。

编辑

我对您的新尝试的看法:它真的很好，而且我看到您现在可以对其进行更多自定义。

要改进它，您可以尝试这些:

这里有三个本质上可点击的 View 。我们可以根据自己的意愿使用它来增加交互区域，为用户提供自然的体验。

这是它的限制条件:

除了这些建议，我认为我不需要提供任何其他建议。您的方法足以满足您的实现想法。

:)