3

I have a UIView in my layout that is pinned to the sides of my VC. Inside of that I have an icon UIImageView and a UILabel that is next to that. I would like both of those to be center aligned inside of the UIView no matter how long the text inside of the label is. (Similar to how you would use text-align:center; in CSS to align both image and text center).

|          UIView         |
|                         |
|                         |
|                         |
|     |image| |label|     |
|                         |
|                         |
|                         |
|                         |

Sometimes the label might be long, but I still need them centered:

|          UIView         |
|                         |
|                         |
|                         |
|  |img| |label is long|  |
|                         |
|                         |
|                         |
|                         |

enter image description here enter image description here

I know how to use Autolayout but this one has me stumped since I can't created a "holder" UIView and center that. I need some help figuring out the constrains to add in IB.

Ideas?

rmaddy
  • 314,917
  • 42
  • 532
  • 579
Nic Hubbard
  • 41,587
  • 63
  • 251
  • 412

3 Answers3

5

Building on @Mahmoud Adam's answer, we can do this entirely in the storyboard.

  1. Horizontal and vertical align the UIView relative to its superview.
  2. Add constraints to the UIImage and UILabel so that they are pinned to the edges of the UIView.

The UIView will grow as the UIImage and UILabel grow inside of it.

keithbhunter
  • 12,258
  • 4
  • 33
  • 58
3

Create a new UIView inside main view and put the UUImageView and UILabel inside it, this view should have the following constraints

using interface builder

  1. Horizontal align inside the main view
  2. Vertical align inside the main view (same as imageView now)

using code in the view controller

  1. width = image.width + label.width + horizontal space between imageView & label
  2. height = Max (image.height, label.height)
Mahmoud Adam
  • 5,772
  • 5
  • 41
  • 62
  • In step 3, do you mean set the constraint width for the holder `UIView`? – Nic Hubbard May 08 '15 at 19:30
  • yeah, the `UIView` that will hold both the image the the label – Mahmoud Adam May 08 '15 at 19:32
  • 1
    You can do this entirely in the storyboard with constraints as well. Use step 1 and 2. Instead of 3 and 4, add constraints to the `UIImage` and `UILabel` in reference to the `UIView` they are now embedded in. If the `UIImage` and `UILabel` are pinned to the edges of the `UIView`, then the `UIView` will grow as the views inside it do. – keithbhunter May 08 '15 at 19:36
  • @keithbhunter - That works! Could you post this as an answer? – Nic Hubbard May 08 '15 at 20:01
1

This is very simple i guess...using storyboard....

If you not found solution yet...then check this image and follow...

Here...green color background is UIView in image

enter image description here

and i select update constraints for view from resolve autolayout views

Bhavin Bhadani
  • 22,224
  • 10
  • 78
  • 108