Question

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

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

我已经尝试了一些方法来解决此问题，例如，修复了viewDidLayoutSubviews（）中的标签栏的高度，但它与iPhone 8上的标签栏混淆了。我还确保了“使用安全区域布局”指南”已选中，但仍然无效。

我也尝试更改选项卡项的框架，但这也不起作用。

这是我用于自定义标签栏控制器的代码：

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

如果有人要添加其他内容，将不胜感激。谢谢

Answer 1

按钮框的Y点必须与其超级视图的Y点相同（即此处的标签栏）。

如果您还没有为标签栏创建出口，请先这样做。

Ctrl（或右键）单击并从情节提要中的选项卡栏拖动到与其关联的视图控制器，以创建出口。（假设我将其命名为192.168.1.1 servername）
现在尝试一下：

tabBar

或者，您可以尝试以下操作：

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

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

如果我的猜测是正确的（因为您未提供有关问题中约束的详细信息），则已将基本视图（底部/底部的视图中包含所有其他元素）设置为使自己适合整个视图控制器的视图。考虑将其更改为适合自己的安全区域。

让我知道结果。

编辑

我对您的新尝试的看法：这确实很好，而且我认为您现在可以对其进行更多自定义。

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

在这里，实际上可以单击三个视图。我们可以根据需要使用它来增加交互区域，从而为用户提供自然的体验。

这里是约束：

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

：）

如何在iPhone X上将自定义标签栏项居中

2 个答案: