Auto Layout (Constraints) Center 2 side by side views in a parent view Auto Layout (Constraints) Center 2 side by side views in a parent view ios ios

Auto Layout (Constraints) Center 2 side by side views in a parent view


Is this what you're after?

short label long label

I did it by adding a view (named viewCenteredInLeftSection) within your leftSection, then adding the clock image and label as subviews with these constraints:

  • Make viewCenteredInLeftSection's CenterX and CenterY equal to its superview's (leftSection).
  • Make clockImage's Top, Bottom, and Leading edges equal to its superview's (viewCenteredInLeftSection).
  • Make label's Trailing edge equal to its superview's (viewCenteredInLeftSection).
  • Make clockImage's Trailing edge the standard distance away from label's Leading edge.

viewCenteredInLeftSection

I have trouble resizing iOS UIViews in Interface Builder, so I made my example for OS X, and I was able to do so entirely in Interface Builder. If you have trouble making the above constraints in Interface Builder, let me know, and I'll post code that'll create them.

2014-08-26 Edit

Luda, here are Xcode 5's Pin and Align menus, also available in Xcode's menu bar:

Align menu Pin menu

Below is what my example looks like in Interface Builder. The blue view is the "parent view" from the original question, the given view in which the image and label should be centered.

I added the green view (which I named viewCenteredInLeftSection) as a subview of "parent view". Then I highlighted it and used the Align menus "Horizontal Center in Container" and "Vertical Center in Container" to create constraints to define its position.

I added the clock image as a subview of viewCenteredInLeftSection, with constraints defining its width and height. I highlighted the clock image and viewCenteredInLeftSection, then applied constraints using Align > Leading Edges, Align > Top Edges, and Align > Bottom Edges.

I added the label as a subview of viewCenteredInLeftSection, positioning it to be the standard Aqua space distance from the clock image. I highlighted the label and viewCenteredInLeftSection, then applied constraints using Align > Trailing Edges.

This was much easier to create with Xcode 5's Interface Builder versus Xcode 4's.

Interface Builder


I figured out a way without adding another view:

 [aView addConstraint:[NSLayoutConstraint constraintWithItem:viewOnLeft attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationLessThanOrEqual toItem:aView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; [aView addConstraint:[NSLayoutConstraint constraintWithItem:viewOnRight attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationLessThanOrEqual toItem:aView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];

You can also change the constants to create a gap between the views.

  • left view constraint constant: -X
  • right view constraint constant: +X

centering subviews


A solution to this is considered in stanford university lectures on ios 7.It works beautifully.Attached here that solution. (Here sdfssfg... thing is label1 and efsdfg.... thing is label2)

enter image description here