0

I have a view that consists of a UIImage and a UITextLabel. The label floats above the image inside of a speech bubble. Both of these assets live within one xib file which is set to use autolayout. The UIImage is pinned to the container view leading, top, trailing and bottom edges. I've tried many things, including pinning the UILabel with spacing to the left edge of the view and top edge and gave it a fixed width and height. When this whole xib is loaded and scaled the UILabel inevitably ends up out of alignment. How should one set up such a view with autolayout? In my use case the UILabel is being updated dynamically or else I would just render it into the image and be done with it.

nwales
  • 3,521
  • 2
  • 25
  • 47

1 Answers1

1

If you want your text to always be aligned above the image, you could try first adding the image to the .xib file and adding it's constraints (easiest left, top, right, and bottom to container). Then add in the UILabel. From here, click the label and then select the image as well (Shift + click). Go to Editor > Align and select choices from here...

Left/Right Edges will align the UILabel's left/right edge to align to the UIImage's left/right edge. Top/Bottom Edges will align the UILabel's top/bottom edge to align to the UIImage's top/bottom edge. Etc...

However, if you select the UIImage first, and then the UILabel, it will align the UIImage to the UILabel's edges instead.

EDIT:

This post helped explain a possible solution.

Community
  • 1
  • 1
c_rath
  • 3,618
  • 2
  • 22
  • 14
  • I'm afraid this isn't really solving my issue. I am trying to float the label above the image, but not lined up to it's edges, but offset from it's edges proportionately to the scale of the image such that when I scale the whole view, the orientation is maintained between the label and the image. – nwales Jul 07 '14 at 18:25
  • Oh I apologize, I misunderstood the question. So you basically want to find the actual size of the image itself, not the UIImageView, and then place the UILabel in its appropriate position... is this correct? – c_rath Jul 07 '14 at 18:51
  • yes, I think so. Basically I have a image view with a speech bubble and some dynamic text. I want the dynamic text to always align with the speech bubble as if it's part of the image. As the container view is scaled I want the dynamic text to maintain scale and alignment with the speech bubble. – nwales Jul 07 '14 at 19:24
  • Aah... well I'm not sure if this can be done solely with autolayout. I could be wrong though. There are ways you can calculate the height of the actual image within the UIImageView and then you can resize the text accordingly, but I think that's what you're trying to avoid by just using autolayout. You can see [this post](http://stackoverflow.com/a/14498978/1457357) which talks about getting the actual size of the image if you want to go that route. Sorry I couldn't help more. =( – c_rath Jul 07 '14 at 19:36
  • That's what I overlooked! In my head I was thinking the UIImageView was representative of the UIImage because they happen to be the same size in my xib file. You are right, I want to align to the UIImage within. Silly mistake. Thanks for helping me clear that up, even if there is no easy way to accomplish this soley with autolayout. – nwales Jul 07 '14 at 21:02
  • Glad I could help! I added that link in as an edit so it's easier to find. That would be a handy thing to have in auto layout though if it's not already there. – c_rath Jul 07 '14 at 22:45