iOS how to center two view via PureLayout

Question

I want to center my UIImageView and UILabel like the pic below. I used a container to contain UIImageView and UILabel,but the container does not suit the width of UIImageView and UILabel.So I need to set the width of the container.Is there any method to solve the problem without set the width or calculate the view's width? Here's the picture:

MyLabel

score 8 · Accepted Answer · answered Mar 24 '15 at 09:17

8

There are four view in action:

Outer or main view
Container view (contains image and label)
Image view
Label view

The views are in following hierarchy:

Outer view
1. Container View
  1. Image view
  2. Label view

I assume that the outer view gets its width and height from other constraints.

What I see from the image you provided that image is taller than label, keeping that in mind following constrains could achieve what you want:

Align X axis of container view to outer view
Align Y axis of container view to outer view
Pin top, left and bottom edge of Image view to container view
Pin right edge of label to container view
Align Y axis of label to container view.
Set horizontal distance between image and label view.

answered Mar 24 '15 at 09:17

Abdullah

7,143
6
25
41

Comments like this makes it worthwhile to answer on stackoverflow. Keep it up. – Abdullah Nov 08 '15 at 04:33
it works! in my case i put a width constraint to Outer view respect its parent, i did because the label text is dynamic and it could overflow – Jonathan García Dec 02 '15 at 14:23
`Align Y axis of label to container view`, shouldn't it be `X axis`? – Khurram Shehzad Oct 07 '16 at 05:53

score 4 · Answer 2 · edited Mar 20 '17 at 13:40

[self.button autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:15];
[self.button autoPinEdgeToSuperviewEdge:ALEdgeRight withInset:15];
[self.button autoSetDimension:ALDimensionHeight toSize:46];
[self.button autoAlignAxis:ALAxisVertical toSameAxisOfView:self.contentView];

[self.containerView autoAlignAxisToSuperviewAxis:ALAxisHorizontal];
[self.containerView autoAlignAxisToSuperviewAxis:ALAxisVertical];

[self.iconImageView autoPinEdge:ALEdgeLeft toEdge:ALEdgeLeft ofView:self.containerView];
[self.iconImageView autoAlignAxisToSuperviewAxis:ALAxisHorizontal];

[self.label autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.containerView];
[self.label autoAlignAxisToSuperviewAxis:ALAxisHorizontal];

[self.label autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.iconImageView withOffset:10];

Thanks to @abdullah. He cleared my mind. I forgot to "Pin right edge of label to container view", so the containerView's width became 0.

score 2 · Answer 3 · answered Jun 04 '18 at 11:13

Here's the swift version:

button.autoPinEdge(toSuperviewEdge: .left, withInset: 15)
button.autoPinEdge(toSuperviewEdge: .right, withInset: 15)
button.autoSetDimension(.height, toSize: 46)
button.autoAlignAxis(.vertical, toSameAxisOf:  contentView)

containerView.autoAlignAxis(toSuperviewAxis: .horizontal)
containerView.autoAlignAxis(toSuperviewAxis: .vertical)

iconImageView.autoPinEdge(.left, to: .left, of: containerView)
iconImageView.autoAlignAxis(toSuperviewAxis: .horizontal)

label.autoPinEdge(.right, to: .right, of: containerView)
label.autoAlignAxis(toSuperviewAxis: .horizontal)
label.autoPinEdge(.left, to: .right, of: iconImageView, withOffset: 10.0)

iOS how to center two view via PureLayout

3 Answers3