CODEWITHSUNDEEP
iosswiftnslayoutconstraint
rb90
rb90

Reputation: 319

iOS Auto Layout constraints values for different devices sizes

I use storyboards for layout my views. I position views with constraints. I have a question about resizing the constraint. 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 top 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. So the constraint should be calculated. At the moment I calculate an scale factor like this:

    let bounds = UIScreen.mainScreen().bounds;
    let width = bounds.size.width; 
    let scaleFactor = width/320; // 320 because base design was created for iPhone 5

   // calc top constraint connect from storyboard
  self.topConstraintView.constant = self.topConstraintView.constant * scaleFactor;

Is that way correct to deal with constraints on different devices?

Upvotes: 3

Views: 3598

Answers (2)

Cruz
Cruz

Reputation: 2632

how about use DeviceLayout https://github.com/cruisediary/DeviceLayout

just set constant per device size using IBInspectable without any code

enter image description here

enter image description here

Upvotes: 3

Alessandro Ornano
Alessandro Ornano

Reputation: 35402

Usually you can do it with the common 600x600 using class sizes and you can build also an universal (iPad/iPhone) interface. You can find tons of guides to realize it. Depending by what do you want to realize (poor details, more text..) and , one of the possible issue, it's to handle orientation layout correctly (landscape/portrait) because in the big devices many times you must centered your views/objects.

Sometimes it's better, (to dont losing details, image quality..) to realize different xib's based on the different device dimension, especially when you have to do with custom tableViewCells, imageViews.

Here in bottom there are the iPhone different dimensions:

enter image description here

Upvotes: 1

Related Questions