How to stack + center two text views using programatic constraints?

Question

I'm trying to achieve a hard coded layout where two text views should be stacked on top of each other and centered in a parent UICollectionViewCell:

----------------------
|                    |
|    This is text    |
|      Also text     |
|                    |
----------------------

Due to various legacy/business reasons, I should be doing this using constraints hard coded in a subclass of UICollectionViewCell. The two text views can vary in length, but should be centered vertically in the parent view, while being on top of one another.

Is there an easy way to express this in constraints? I'm a bit new to this type of layout system, so any help is appreciated!

The app I am working with uses the Masonry (https://github.com/SnapKit/Masonry) library as well, if that makes things easier.

score 0 · Answer 1 · answered Oct 08 '16 at 15:21

Let's asume that the labels are named textView1 and textView2.

What you need is to set a constraint for centering horizontally textView1 to it's superview(the UICollectionViewCell), then center textView2 with textView1 (you can center to it's superview too) and you will have both centered.

For getting it on top of one another, you have to set a constraint for setting textView2 top as the textView1 bottom.

Never used Masonry, but looks like you need to have these constraints:

[textView1 mas_makeConstraints:^(MASConstraintMaker *make) {
    //Center first textView in the superview
    make.centerX.equalTo(superview); 
}];
[textView2 mas_makeConstraints:^(MASConstraintMaker *make) {
    //Center second textView with the first one 
    make.centerX.equalTo(textView1);
    //Set second textView to be below the first one
    make.top.equalTo(textView1.mas_bottom);
}];

How to stack + center two text views using programatic constraints?

1 Answers1