nslayoutconstraint - 在iOS中以编程方式设置约束使按钮消失

Question

我有这段代码，当我取消注释该 block 时，按钮消失了，并且注释了它是可见的。 When uncommented

    var fab:UIButton = UIButton(type: .custom)

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        self.title = "Maintain My Vehicle"
        let vehicleInfoController = VehicleInfoController()
        vehicleInfoController.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 0)
        let vehicleLogsController = VehicleLogsController()
        vehicleLogsController.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 2)
        let viewControllerList = [ vehicleInfoController, vehicleLogsController ]
        viewControllers = viewControllerList.map { UINavigationController(rootViewController: $0) }
        floatingButton()
        let centerLabel = UILabel()

        // Don't forget this!
        centerLabel.translatesAutoresizingMaskIntoConstraints = false

        centerLabel.text = "Perfectly centered!"
        view.addSubview(centerLabel)

        NSLayoutConstraint.activate([
            centerLabel.centerXAnchor.constraint(
                equalTo: view.centerXAnchor, constant: 0),
            centerLabel.centerYAnchor.constraint(
                equalTo: view.centerYAnchor, constant: 0)
            ])
        /*
        fab.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            fab.centerXAnchor.constraint(
                equalTo: view.centerXAnchor, constant: 0),
            fab.centerYAnchor.constraint(
                equalTo: view.bottomAnchor, constant: 0)
            ])
 */
    }


func floatingButton(){
    fab = UIButton(type: .custom)
    fab.frame = CGRect(x: 150, y: 600, width: 75, height: 75)
    fab.setTitle("+", for: .normal)
    fab.backgroundColor = #colorLiteral(red: 0.1764705926, green: 0.4980392158, blue: 0.7568627596, alpha: 1)
    fab.clipsToBounds = true
    fab.layer.cornerRadius = 50
    fab.layer.borderColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    fab.layer.borderWidth = 3.0
    fab.layer.masksToBounds = true
    fab.layer.zPosition = 1
    fab.addTarget(self, action:#selector(self.buttonClicked), for: .touchUpInside)
    view.addSubview(fab)
}

When commented

我不知道为什么中心标签没问题，但我的按钮却乱了。

Answer 1

你的问题是fab.centerYAnchor.constraint(equalTo: view.bottomAnchor)，尽管bottomAnchor确实符合NSLayoutYAxisAnchor，但我还没有看到这种组合，相反，centerY 与另一个 centerY anchor 连接。

您可以做的是将按钮嵌入到 View 中，并从 centerLabel.bottomAnchor 和 view.bottomAnchor 约束该 View ，如下所示:

func floatingButton(centerLabel: UIView) {
    let fabView = UIView()
    fabView.backgroundColor = .red
    fabView.layer.zPosition = 1

    fab = UIButton(type: .custom)
    fab.setTitle("+", for: .normal)
    fab.backgroundColor = #colorLiteral(red: 0.1764705926, green: 0.4980392158, blue: 0.7568627596, alpha: 1)
    fab.clipsToBounds = true
    fab.layer.cornerRadius = 50
    fab.layer.borderColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    fab.layer.borderWidth = 3.0
    fab.layer.masksToBounds = true

    fabView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(fabView)

    fab.translatesAutoresizingMaskIntoConstraints = false
    fabView.addSubview(fab)

    NSLayoutConstraint.activate([
        centerLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0),
        centerLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0),
        fabView.topAnchor.constraint(equalTo: centerLabel.bottomAnchor),
        fabView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        fabView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
        fabView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        fab.centerXAnchor.constraint(equalTo: fabView.centerXAnchor, constant: 0),
        fab.centerYAnchor.constraint(equalTo: fabView.centerYAnchor, constant: 0),
        fab.widthAnchor.constraint(equalToConstant: 75),
        fab.heightAnchor.constraint(equalToConstant: 75),
    ])
}

以下只是清理后的viewDidLoad

override func viewDidLoad() {
    super.viewDidLoad()

    self.title = "Maintain My Vehicle"
    self.view.backgroundColor = UIColor.white

    let vehicleInfoController = UIViewController()
    vehicleInfoController.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 0)

    let vehicleLogsController = UIViewController()
    vehicleLogsController.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 2)
    let viewControllerList = [ vehicleInfoController, vehicleLogsController ]
    self.viewControllers = viewControllerList.map { UINavigationController(rootViewController: $0) }

    let centerLabel = UILabel()
    centerLabel.text = "Perfectly centered!"
    centerLabel.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(centerLabel)

    floatingButton(centerLabel: centerLabel)
}

结果