CODEWITHSUNDEEP
ios
Dren
Dren

Reputation: 2107

How to specify different sizes for iPhone 6+, 6 and 5?

I want to make the view look almost same on each of iPhone 6+, 6 and 5. In the attached picture, I mean, that, for example, "Cancel" button should be 30 pixels from left edge of screen in iPhone 5, 35 px in 6 and 45 px for 6+ and the similar for other elements.

How can specific constrains sizes be placed for each type of it? If I use proportions in constrains, so buttons grow, but their sizes not controlled and spaces between elements I cant change also. Size classes with specific constrains sizes I also can`t use, because cW aH is for 5 and 6 iphones the same. (as I understood).

I can`t figure out how to do it. How usually different designs for 6 and 6+ managed now?

enter image description here

Upvotes: 0

Views: 2522

Answers (2)

Cesare
Cesare

Reputation: 9419

You can't target specific models of iPhone with Auto Layout. It's not meant for that. Auto Layout was built to avoid this. However, here are two workarounds:

Updated for iOS 9 and above

Use stack views. They're great for this kind of layout.

First option

Place an invisible UIView and create top, bottom, leading and trailing constraints attached to the Superview. After that, place your objects (they can be UIImageViews, UILabels and the list goes on) inside the UIView you have just placed. Now create top and bottom constraints that connect your objects to the UIView.

I created a demo to show you how it's done. As you will see, buttons have different sizes depending on the screen's size. Download the demo from this link.

Second option

You could create and modify constraints programmatically. Create a NSLayoutConstraint and adjust the constant of it depending on the user's device:

var myConstraint = NSLayoutConstraint (item: myButton,
        attribute: NSLayoutAttribute.Top,
        relatedBy: NSLayoutRelation.Equal,
        toItem: self.view,
        attribute: NSLayoutAttribute.Top,
        multiplier: 1,
        constant: 0)
    self.view.addConstraint(myConstraint)

if UIScreen.mainScreen().bounds.size.width == 375 {
    // iPhone 6
    myConstraint.constant = 10
} else if UIScreen.mainScreen().bounds.size.width == 414 {
    // iPhone 6+
    myConstraint.constant = 15
}

Upvotes: 6

Crazyrems
Crazyrems

Reputation: 2601

Why do you need to pick 30, 35 and 45px ? Is there a reason for that pixelish placement ?

You can use more flexible constraints by using their multiply value instead of the constant.

The constraints adjusts themselves depending on the superview dimensions.

iPhone5 - iPhone 6 - iPhone 6+ - iPad - iPhone4 landscape Constraints demo

Note how my center X alignment constraints are configured:

enter image description here

enter image description here

You can see that the values behaves kind of strangely, sometimes multiplier is > 1, sometimes it's between 1 and 2, or < 1 depending on the order of First Item and Second Item. You still can swap their order by clicking on them and selecting Reverse First And Second Item.

Upvotes: 0

Related Questions