4

First Problem:

I have UIView that contains UILabel (dynamic text) + UIImage. I want them to be centered inside the UIView. Just like these images:

enter image description here

enter image description here

The answer here is out of date and now we have stack view maybe it can make the task easier.

Second Problem:

I have three UIView's next to each other each one has UIImageView + UILabel that should be centered in their container (Problem 1). In the iPhone 4s who has a small width screen the text breaks the layout, like in this image :

enter image description here

I use Xcode 7.0 | Target iOS8 and above | Swift 2

Community
  • 1
  • 1
iOSGeek
  • 5,115
  • 9
  • 46
  • 74
  • Can you show the constraints you have set? – Paulw11 Sep 30 '15 at 20:42
  • Pin the label and the imageview to the sides of the container. Use a zero pin for the top and bottom, and whatever you like for the gap between the image and the label. For the side constraints, use >= rather than =, so the layout can fit the larger item. Center both the label and the imageView horizontally (but not vertically) in the container, then center the container in the main view horizontally and vertically. As long as you have a default image set in the image view this should at least layout wihout conflicts or errors - you may need to tweak priorities to get exactly what you want – Rich Tolley Sep 30 '15 at 20:43
  • You'll also need to set a maxPreferredWidth on the label. Or use a width constraint – Rich Tolley Sep 30 '15 at 20:55
  • @iOSGeek any luck yet? – Adeel Miraj Oct 13 '15 at 10:32
  • @AdeelMiraj even with bounty there is no answer – iOSGeek Oct 13 '15 at 19:39
  • @iOSGeek please have a look at this screenshot. https://www.dropbox.com/s/ojbfkble1fya9hv/Screen%20Shot%202015-10-14%20at%2010.47.17%20am.png?dl=0 I haven't written a single line of code for this. Everything is being done in the interface builder using size classes even the resizing of the fonts. If it looks fine to you then I'll share the project with you and tell you how you should do the same to achieve similar results in your project. – Adeel Miraj Oct 14 '15 at 05:51

3 Answers3

2

This is actually pretty easy to do in pure Autolayout/IB with no code. It ends up looking something like this: enter image description here

Here's the storyboard file with the view so you can see the constraints easily. It uses the same subview wrapper technique, but the trick to getting the labels to shrink/cut off as needed is adding >= 0 constraints to both sides of the wrapper view, keeping it from expanding past the borders of the parent view, which in turn keeps the label from growing.

https://www.dropbox.com/s/ml67zdjwugf8jco/SO_Solution-20151013.storyboard?dl=0

Ben
  • 1,117
  • 13
  • 21
  • I followed your storyboard and it works, he trick here is setting the leading and trailing space to >= and <=. Any suggestion to show the full text in all devices I want to show "50 applicants" not "50 applica..." in all devices ? – iOSGeek Oct 15 '15 at 17:33
  • You need something to give! What's going to become smaller? If you're okay with the text size shrinking you can enable that option. Another alternative would be to let all of the images shrink a bit. – Ben Oct 15 '15 at 18:08
  • maybe the text size should become smaller to fit the size I can be done by code I guess but with IB is it possible ? – iOSGeek Oct 15 '15 at 18:11
  • Yes, select the UILabel and you'll see an option to Autoshink over on the right, in the Attributes inspector. – Ben Oct 15 '15 at 18:16
0

Clean contains and add again. I'm having this problem in Xcode 7.0, but it was apparently fixed in Xcode 7.0.1.

0
  1. Use Button (instead using ImageView & Label) and set appropriate image & title.
  2. set Image & Title Insets
  3. Add To View and Assign leading space & bottom space of superview constraint to first button
  4. Assign trailing space & bottom space of superview constraint to third button
  5. Assign Left Horizontal space (with first button) & Right Horizontal space (with third button) to second button.
  6. Add equal Width & fixed Height constraint with all three buttons.

also, you can add width constraint and make it with dynamic width.

In sort, you can complete it with button.

Community
  • 1
  • 1
kalpesh jetani
  • 1,775
  • 19
  • 33
  • I found another solution with image & Label here. http://stackoverflow.com/questions/14741713/auto-layout-constraints-center-2-side-by-side-views-in-a-parent-view – kalpesh jetani Oct 14 '15 at 09:51