Auto layout constraints not behaving correctly? - ios

Question

So I have a pretty simple layout for a view that I have created, basically what i want it to look like after I'm done with adding constraints is as follows,
However, what I end up with is something else, and Im not sure why this behavior is happening.
So just a quick rundown of what I did in an attempt to achieve the layouts I wanted.
Center the X position of the "/" label
Set the the indexLabel that can be seen towards the left that says "1"
Constraint the "reps" label to the left of "/" label
Finally constraint the "reps field" to the right of indexLabel and left of "reps" label
private func setupDividerLabelLayout() {
addSubview(dividerLabel)
dividerLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
dividerLabel.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
}
private func setupIndexLabelBackgroundLayout() {
addSubview(indexLabelBackground)
indexLabelBackground.leftAnchor.constraint(equalTo: leftAnchor, constant: 24).isActive = true
indexLabelBackground.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
indexLabelBackground.heightAnchor.constraint(equalToConstant: 24).isActive = true
indexLabelBackground.widthAnchor.constraint(equalToConstant: 24).isActive = true
}
private func setupRepsLabelLayout() {
addSubview(repsLabel)
repsLabel.rightAnchor.constraint(equalTo: dividerLabel.leftAnchor, constant: -16).isActive = true
repsLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
}
private func setupRepsFieldLayout() {
addSubview(repsField)
repsField.rightAnchor.constraint(equalTo: repsLabel.leftAnchor, constant: -8).isActive = true
repsField.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
repsField.leftAnchor.constraint(equalTo: indexLabelBackground.rightAnchor, constant: 8).isActive = true
}

Answer 1

In order let you anchors work you should add _ViewName_.translatesAutoresizingMaskIntoConstraints = false. so the code becomes as followsCode to Use
private func setupDividerLabelLayout() {
addSubview(dividerLabel)
dividerLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
dividerLabel.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
dividerLabel.translatesAutoresizingMaskIntoConstraints = false
}
private func setupIndexLabelBackgroundLayout() {
addSubview(indexLabelBackground)
indexLabelBackground.leftAnchor.constraint(equalTo: leftAnchor, constant: 24).isActive = true
indexLabelBackground.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
indexLabelBackground.heightAnchor.constraint(equalToConstant: 24).isActive = true
indexLabelBackground.widthAnchor.constraint(equalToConstant: 24).isActive = true
indexLabelBackground.translatesAutoresizingMaskIntoConstraints = false
}
private func setupRepsLabelLayout() {
addSubview(repsLabel)
repsLabel.rightAnchor.constraint(equalTo: dividerLabel.leftAnchor, constant: -16).isActive = true
repsLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
repsLabel.translatesAutoresizingMaskIntoConstraints = false
}
private func setupRepsFieldLayout() {
addSubview(repsField)
repsField.rightAnchor.constraint(equalTo: repsLabel.leftAnchor, constant: -8).isActive = true
repsField.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
repsField.leftAnchor.constraint(equalTo:
indexLabelBackground.rightAnchor, constant: 8).isActive = true
repsField.translatesAutoresizingMaskIntoConstraints = false
indexLabelBackground.translatesAutoresizingMaskIntoConstraints = false
}