Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set up different Auto Layout constraints for different screen sizes

I have a tableView with static cells. The cell contains an ImageView which fills it completely. And I have another smaller ImageViews atop. I position this ImageViews with constraints. I have a question about resizing the constraints. How can I set different constraint constants for different devices sizes without programming if/else loops. Is there a way to set it in the storyboard? I have a leading constraint to parent layout for example with an constant value of 10. This is okay for the iPhone 5 screen, but on an iPhone 6/ 6 plus screen it should be higher than 10.

iPhone5 Autolayout

Screen Shot

iPhone6 Autolayout

Screen shot

like image 302
Vitya Shurapov Avatar asked Jun 24 '16 11:06

Vitya Shurapov


People also ask

What is auto layout What is size classes and how can we use it?

In easy way we can say Autolayout is used for displaying same layout comatible on different different iPhone/iPad screen sizes (ex. Keep button in center for all screen sizes) while through Autoresizing classes we can set a different layout for a particular screen size.

What is auto layout?

Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.

How do I enable auto layout in Xcode?

Create a new Xcode project. Select Single view app and name it AutoLayout. Leave the defaults unchecked: Use core data.

What is size classes in Swift?

Size classes are traits assigned to user interface elements, like scenes or views. They provide a rough indication of the element's size. Interface Builder lets you customize many of your layout's features based on the current size class. The layout then automatically adapts as the size class changes.


1 Answers

Very easy. You can change constants values for difference size classes in Storyboard. I am giving u a few steps after which you will be able to grasp it.

First we create constants as you can see on this view enter image description here

Next we select the constant we want to change the value in other size classes.

enter image description here

Now comes the tricky part. In the attribute inspector after selecting the constant, you can see the value of the constant. Right beside you can see the PLUS (+) sign, left of the "constant".

enter image description here

Click on it and select your size class that you want. Here i have selected Regular Height Regular Width i.e for iPad sizes.

enter image description here

Next we give it a new value. So the constant, which normally is of value 61, will function as 10 when rendered in a size class of iPad size classes.

enter image description here

Here is the output --

iPhone 4:

enter image description here

iPad Air:

enter image description here

As you can see, the same constants has different value in runtime corresponding to different size classes.

Hope my explanation helped you.

like image 182
Saheb Roy Avatar answered Sep 19 '22 09:09

Saheb Roy