0

I'm having problems creating this view:view

I want to evenly space these images and labels in the center of the view and resize them based on screen size

the image size is 67x67

But I can't simply get it right.

I tried this solution

But I'm still not getting it right I'm new to size classes and auto layout so any help will be appreciated :)

Thanks

Community
  • 1
  • 1
u_kami
  • 565
  • 12
  • 28

1 Answers1

1

First you have to add horizontal spacing constraints between the images, this will keep the distance constant.

Then you should add aspect ratio = 1 constraint to either all of the images, or only to the first and add equal heights constraint to all of them.

And the last thing you want to do is to set all their widths to be equal.

This way, when the screen gets bigger, your image views will also increase in size and the distance between them will remain the same. The labels will have to be pinned to their corresponding image views.

Levi
  • 7,313
  • 2
  • 32
  • 44
  • thanks I did what you said but the problem in resides in trailing/leading space of the first and last image I want them all to centered in view so if I put an equal spacing of lets say 20 between all images and first image leading space of 10 and last image trailing space of 10 it is not centered in 3.5 inch or 4 inch device how can I center them all? – u_kami Jul 04 '15 at 07:09
  • What do you mean by "center them all"? They should be layed out like in the image you posted. On the small screen sizes they would have a very small width though. What are these images added to? Directly to the `UIViewController`'s view, or to some superview? If it is the latter, you have to pin that view as well to its superview with leading and trailing constraints, otherwise it won't resize, and you image sizes and positions depend on their superview's size and position. – Levi Jul 04 '15 at 07:20
  • no not directly but in a superview and I did pin its super view what I did is: 1. added horizontal spacing = 20 between each image and leading of first image = 20 and trailing of last image = 20 (both to superview). 2. Added aspect ratio to super view and equal heights of the rest images. it is laying out nice and resized but in 3.5" and 4" the trailing of last image is too big to fit them all in the view equally like so: consider"[ ]" are the bounds of the screen and "...." is the space [.......image1-image2-image3-image4-image5-image6] – u_kami Jul 04 '15 at 08:06
  • sorry I'm new to auto layouts so please bear with me if I don't understand :D – u_kami Jul 04 '15 at 08:07
  • If it doesn't fit into a 3.5 screen size, you should consider smaller spaces, you can use size classes, and set the horizontal spacer values for only the small width size class to a smaller value. There should be a little + sign near the constant of the constraint, where you can specify different values for different size classes. – Levi Jul 04 '15 at 08:54
  • Yes I've done that but the problem is only in 3.5 and 4 inch but I've managed to do it by changing the space programmatically only for 3.5 and 4 screen size. Thanks I learnt a lot for your solution – u_kami Jul 04 '15 at 10:19