constrain a label inside of a UIView which is inside of a expandable collectionViewCell - ios

Question

I have an expandable/collapsible cell in Xcode, and I am trying to do what is said in the title. When I expand the cell, the text is centred inside of the cell and I'm not sure why because I have the label constrained inside of the UIView. I will leave code below,
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(SubView)
SubView.anchors(top: topAnchor, topPad: 0, bottom: nil, bottomPad: 0, left: leftAnchor, leftPad: 0, right: rightAnchor, rightPad: 0, height: 80, width: self.bounds.width - 20)
SubView.addSubview(textField)
textField.anchor(top: SubView.topAnchor, leading: leadingAnchor, bottom: bottomAnchor, trailing: trailingAnchor, padding: .init(top: 0, left: 0, bottom: 0, right: 0))
textField.centerYAnchor.constraint(equalTo: SubView.centerYAnchor).isActive = true
textField.centerXAnchor.constraint(equalTo: SubView.centerXAnchor).isActive = true
textField.translatesAutoresizingMaskIntoConstraints = false
}
this is how I create the anchors and addSubview.
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "profCell", for: indexPath) as! profCell
if indexPath.row == 0 {
cell.textField.text = "Skills & Preferences"
} else if indexPath.row == 1 {
cell.textField.text = "Bio"
} else if indexPath.row == 2 {
cell.textField.text = "Reviews"
}
return cell
}
and this is how I try to create the label text. I will leave the two images that show what I am asking.
this is how I want the cell to look even if it is expanded.
when it is expanded, the label moves to the center of the cell.
thanks for all of the help!

Answer 1

You need to understand a bit about Auto-Layout Constraints. If you are using Leading, Trailing, Top & Bottom constraints, you are not required to add Center X & Center Y anchors. But even if you add those extraneous constraints you need to be very careful so that they don't conflict with each other. For this purpose, you need to make some of them Low priority constraints while leaving some as High priority constraints or make them greater/equal or less/equal instead of explicit equal. This is a topic that I can't make completely understandable here in SO.
Secondly, you have pinned the leading, bottom & trailing constraints to the contentView of the UITableViewCell itself which is wrong according to your expectation. You either
change it to constraint the textField with respect to SubView's anchors here:
textField.anchor(top: SubView.topAnchor, leading: SubView.leadingAnchor,
bottom: SubView.bottomAnchor, trailing: SubView.trailingAnchor,
padding: .init(top: 0, left: 0, bottom: 0, right: 0))
and delete those textField.centerXAnchor & textField.centerYAnchor entirely.
Or
delete the line of setting the leading, trailing, top & bottom constraints entirely keeping only the center constraints.
Note: Use camelCased identifier for properties.