Animate Visual Format Language Constraint - ios

Question

I am trying to animate a button from the left side of a container to the right side. The position of this button is defined by the Visual Format Language. (The project is 100% code, no Storyboard issues possible)
These are my lines for the left side (working):
messageInputContainerView.addSubview(moreButton)
messageInputContainerView.addConstraintsWithFormat(format: "H:|-3-[v0(35)]-8-[v1][v2(60)]|", views: moreButton, ..., ...)
messageInputContainerView.addConstraintsWithFormat(format: "V:|[v0]|", views: moreButton)
These for the right side + animation (not working):
//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()
})
If someone is wondering, the 'addConstraintsWithFormat' function looks like this:
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))
}
}
I am new to VFL in general, therefore I would really appreciate a helpful answer.
Here is an image of the container and the moreButton. (both at the very bottom)

Answer 1

Your problem is likely that your constraints are not added to the correct UIViews.
You don't have to worry about adding constraints to views if you activate the constraints instead by calling NSLayoutConstraint(activate:) with the VFL constraints:
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))
}
}
And then there is this line:
//I have read that I first have to remove the old constraints in order to apply new ones
moreButton.removeConstraints(moreButton.constraints)
Again, you should be deactivating constraints (setting their isActive property to false) instead of removing constraints. The problem with removing constraints like this is that some of the constraints on moreButton are stored in the constraints array of moreButton's superview.
Keep the constraints you want to deactivate in the future in an array in your VC and then pass the constraints to NSLayoutConstraint.deactivate() or set the isActive property to false for those constraints you wish to deactivate.
Update:
Your button isn't animating correctly. That is because it is still contrained to the textField. To animate your moreButton, you need to free it of other constraints that are restricting its position.
First, I would change addConstraintsWithFormat(format:views:) to return the constraints it created as [NSLayoutConstraint]. This will allow you to deactivate them later.
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
}
Add a property to your viewController:
var moreButtonConstraints = [NSLayoutConstraint]()
Then break up the format "H:|-3-[v0(35)]-8-[v1][v2(60)]|" into "H:|-3-[v0(35)]" and "H:|-46-[v1][v2(60)]|" and activate them separately. That will separate the constraints for your moreButton from the constraints for the other views, allowing you to move the moreButton without affecting the other views.
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)
Then, when it is time to animate:
// 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)