设置 UI 集合视图单元的约束

Question

In my UI there is a collection View where each cell contains a UILabel and a UIImageView . There are aligned as follows.

Where I am stuck is setting constraints to them because each UILabel has a random length. I always want to make the distance between left side of the image and left side of the cell equal to the distance between the right side of the label and the right side of the cell (in a certain cell).

I know I can set the centerY of each element equals to centerY of each element. But how can I set the other anchor.

I am not Using Storyboards.

Answer 1

I would add a horizontal stack view, set constraints to every edge with the desired margin, and add the image and label to the stack view.

Then set the hugging priority to the image view higher than the label. This will cause the label to take up the remaining space while being aligned to the left.

Answer 2

If I understand your problem correctly, you want to set spacing for left side of UImageView and right side of UILabel equally. For this, I would recommend you to put those views (UIImageView and UILabel) in a UIStackView with properties: axis as "Horizontal" and Alignment as "Center"; and adding constraint for Leading and Trailing Space with CenterX and CenterY Constraint.

For ease of understanding take a look at the image of UIStackView Constraints