动画视觉格式语言约束

Question

我试图动画一个按钮从左边的容器到右边。此按钮的位置由Visual语言定义。(该项目是100%的代码，没有故事板问题的可能)

--这是我左边的行(工作)：

messageInputContainerView.addSubview(moreButton)
messageInputContainerView.addConstraintsWithFormat(format: "H:|-3-[v0(35)]-8-[v1][v2(60)]|", views: moreButton, ..., ...)
messageInputContainerView.addConstraintsWithFormat(format: "V:|[v0]|", views: moreButton)

这些为右侧+动画(不工作)：

//I have read that I first have to remove the old constraints in order to apply new ones
moreButton.removeConstraints(moreButton.constraints)

//The only difference here is that the pipe ('|') is on the right side and that I don't care about the two other objects in the container
messageInputContainerView.addConstraintsWithFormat(format: "H:[v0(35)]-3-|", views: moreButton)
messageInputContainerView.addConstraintsWithFormat(format: "V:|[v0]|", views: moreButton)

...

//These lines should be fine, but I include them nontheless
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
      self.moreButton.setTitle("⤇", for: .normal)
      self.messageInputContainerView.layoutIfNeeded()
})

如果有人想知道，“addConstraintsWithFormat”函数如下所示：

extension UIView {

 func addConstraintsWithFormat(format: String, views: UIView...){

    var viewsDictionary = [String: UIView]()

    for (index, view) in views.enumerated(){
        let key = "v\(index)"
        viewsDictionary[key] = view
        view.translatesAutoresizingMaskIntoConstraints = false
    }

    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDictionary))
  }

}

我对VFL一般都是新手，所以我很想得到一个有帮助的答案。

. (both at the very bottom)

Answer 1

您的问题可能是您的约束没有添加到正确的UIView中。

如果通过使用VFL约束调用NSLayoutConstraint(activate:)来激活约束，则不必担心在视图中添加约束：

extension UIView {

 func addConstraintsWithFormat(format: String, views: UIView...){

    var viewsDictionary = [String: UIView]()

    for (index, view) in views.enumerated(){
        let key = "v\(index)"
        viewsDictionary[key] = view
        view.translatesAutoresizingMaskIntoConstraints = false
    }

    NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDictionary))
  }

}

然后是这条线：

//I have read that I first have to remove the old constraints in order to apply new ones
moreButton.removeConstraints(moreButton.constraints)

同样，您应该禁用约束(将其isActive属性设置为false)，而不是删除约束。删除这样的约束的问题是，moreButton上的一些约束存储在moreButton的superview的constraints数组中。

将以后想要停用的约束保留在VC中的数组中，然后将约束传递给NSLayoutConstraint.deactivate()，或者将isActive属性设置为false，用于那些希望停用的约束。

更新：

你的按钮没有正确的动画。这是因为它仍然与textField形成鲜明对比。要激活您的moreButton，您需要释放其他限制其位置的约束。

首先，我将更改addConstraintsWithFormat(format:views:)以返回它作为[NSLayoutConstraint]创建的约束。这将允许您在以后停用它们。

extension UIView {

 func addConstraintsWithFormat(format: String, views: UIView...) -> [NSLayoutConstraint] {

    var viewsDictionary = [String: UIView]()
    let constraints: [NSLayoutConstraint]

    for (index, view) in views.enumerated(){
        let key = "v\(index)"
        viewsDictionary[key] = view
        view.translatesAutoresizingMaskIntoConstraints = false
    }

    constraints = NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDictionary)
    NSLayoutConstraint.activate(constraints)
    return constraints
}

向viewController添加一个属性：

var moreButtonConstraints = [NSLayoutConstraint]()

然后将"H:|-3-[v0(35)]-8-[v1][v2(60)]|"格式分解为"H:|-3-[v0(35)]"和"H:|-46-[v1][v2(60)]|"，并分别激活它们。这将将moreButton的约束与其他视图的约束分开，允许您移动moreButton而不影响其他视图。

messageInputContainerView.addSubview(moreButton)

// save these constraints in a property to be deactivated later
moreButtonConstraints = messageInputContainerView.addConstraintsWithFormat(format: "H:|-3-[v0(35)]", views: moreButton)

// we don't need to keep these constraints, so assign them to _
_ = messageInputContainerView.addConstraintsWithFormat(format: "H:|-46-[v1][v2(60)]|", views: ..., ...)
_ = messageInputContainerView.addConstraintsWithFormat(format: "V:|[v0]|", views: moreButton)

然后，当是动画的时候：

// deactivate the old constraints
NSLayoutConstraint.deactivate(moreButtonConstraints)

// add constraints to move the moreButton to the right side
_ = messageInputContainerView.addConstraintsWithFormat(format: "H:[v0(35)]-3-|", views: moreButton)