Ios 如何在iPhone X上居中放置自定义选项卡项

我有一个应用程序，我在UITabbarController中创建了一个自定义tabbar项，有人可以按它来拍照，它看起来就像下面的一样

这正是我想要的，问题是当我在iPhone X上测试它时，相机的选项卡项看起来比我想要的低，例如：

我已经尝试了一些方法来解决这个问题，比如在viewDidLayoutSubviews（）中固定选项卡栏的高度，但是这会弄乱iPhone8上的选项卡栏。我还确保选择了“使用安全区域布局指南”，但它仍然不起作用

我还试图更改tabbar项的框架，但这也不起作用

这是我用于自定义tabbar控制器的代码：

    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视图与超级视图相同，但它所做的只是将按钮移到屏幕顶部

    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的帮助下，我决定创建一个带有视图和几个按钮的自定义选项卡栏。在我看来，它运行得很好。边缘看起来有点粗糙，但这只是目前的测试

以下是视图的代码：

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

---

如果有人还有什么要补充的，我们将不胜感激。谢谢

按钮框的Y点必须与其超级视图（即此处的选项卡栏）的Y点相同

如果尚未为选项卡栏创建出口，请首先创建

按住Ctrl键（或右键）单击并从序列图像板中的选项卡栏拖动到其关联的视图控制器，以创建插座。（假设我将其命名为

tabBar

）

现在试试这个：

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

或者，您可以尝试以下方法：

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

另一种方法是返回到约束，并确保图元和基础视图位于安全区域内

如果我的猜测是正确的（因为您没有提供有关问题中约束的详细信息），那么您已经设置了基本视图（位于底部/底部的视图，包含其上的所有其他元素），使其与视图控制器的整个视图相适应。考虑改变它以适应安全区域。< /P> 让我知道结果

编辑

我对您的新尝试的看法是：它真的很好，而且我看到您现在可以对它进行更多的定制

要改进它，您可以尝试以下方法：

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

以下是它的限制条件：

除了这些建议，我认为我不需要提供任何建议。您的方法对于您的实现想法来说是自给自足的

---

：）

#很抱歉，这不起作用。所做的一切就是将中央摄像头按钮移动到手机顶部。看上面。我尝试了你推荐的，但遗憾的是，结果还是像以前一样，按钮在顶部。我创建了一个插座，我正在使用框架，但它仍然不起作用。嗯。。奇怪。如果您可以共享您的故事板约束，那就太好了。故事板没有任何约束，因为故事板上没有任何内容。从技术上讲，是一个自定义选项卡项。我正在使用UITabBarController。很抱歉，它不适用于iPhone X凹口设备（iPhone X、iPhone 11等）。它第一次不工作。按钮布局下降。

Try this code working 100% ...
Declare the button
    var menuButton = UIButton()

    override func viewDidLoad() {

           super.viewDidLoad()
           setupMiddleButton()
    }

    //create the method
    func setupMiddleButton(flag:String) {

            menuButton = UIButton(frame: CGRect(x: 0, y: 0, width: 60, height: 60))
            var menuButtonFrame = menuButton.frame
            menuButtonFrame.origin.y = tabBar.bounds.height - menuButtonFrame.height
            menuButtonFrame.origin.x = tabBar.bounds.width/2 - menuButtonFrame.size.width/2
            menuButton.frame = menuButtonFrame
            menuButton.backgroundColor = UIColor.red
            menuButton.layer.borderColor = UIColor.black.cgColor
            menuButton.layer.borderWidth = 1
            tabBar.addSubview(menuButton)

            menuButton.layer.cornerRadius = menuButtonFrame.height/2
            menuButton.setImage(UIImage(named: "Homenormal"), for: .normal)
            menuButton.addTarget(self, action: #selector(menuButtonAction(sender:)), for: .touchUpInside)

        }
    //button methods inside add background colour
     @objc private func menuButtonAction(sender: UIButton) {
            menuButton.backgroundColor = UIColor.red
            selectedIndex = 2
            print("menuButtonActio=\(sender.tag)")
        }
    //next Tabbar didselect
      override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

            let Selected_index = tabBar.items?.lastIndex(of: item)
            print("selectedIndex123=\(Selected_index)")

            if Selected_index == 0 {
                menuButton.backgroundColor = UIColor.darkGray
                menuButton.layer.borderColor = UIColor.black.cgColor
            }
            else if Selected_index == 1 {

                menuButton.backgroundColor = UIColor.darkGray
                menuButton.layer.borderColor = UIColor.black.cgColor
            }
            else if Selected_index == 2 {

                menuButton.backgroundColor = UIColor.red
                menuButton.layer.borderColor = UIColor.black.cgColor

            }
            else if Selected_index == 3 {

                menuButton.backgroundColor = UIColor.darkGray
                menuButton.layer.borderColor = UIColor.black.cgColor
            }
            else if Selected_index == 4 {

                menuButton.backgroundColor = UIColor.darkGray
                menuButton.layer.borderColor = UIColor.black.cgColor
            }

       }