CODEWITHSUNDEEP
iosiphoneswiftviewautolayout
ksm18
ksm18

Reputation: 93

Issue using auto-layout to support different iPhone sizes (diagrams included)

Everything in blue is part of an ImageView (designed it in Sketch ==> exported as PNG ==> imported into an ImageView). Because of this, it scales up nicely without any constraints. The check graphic gets bigger, as do my check marks indicating where the username and password should go. However, my TextFields (Email and PIN) don't scale up nor do they move to where the check marks indicate. I essentially want them to stay in the same relative part of the screen (e.g. 40% away from the left, 10% away from the right...) because I think that would solve my issue. I've used a variety of constraints (to superview, leading, etc.) and tried a container, but nothing has worked. I can of course export my Sketch file again with different sizes, but I don't think there's anything wrong with my background images. I cannot, however, split up my background image into smaller things because there's a background I don't want to mess with. Also, the check marks are actually boxes surrounding the username and password. Assume I have no constraints on other than the ones binding the imageView to the margins.

Thanks!

--kmuzumdar

Upvotes: 2

Views: 86

Answers (1)

Hugo Alonso
Hugo Alonso

Reputation: 6824

It appears like if you were breaking some constrains on the iPhone 6 case, or that you have setted left 40% as an Equal, keep in mind that just scaling is not enough, screen proportions are also different between devices.

try this..

  • Set Email input and Pin # to be centered vertically with it's corresponding checkmark

  • Set a Greater or Equal than constraint between checkmark and its labels. To keep them away from each other.

  • You may need to do some adjustments manually, for this you can always have outlets of NSLayoutConstraint too, just check if you're on an iphone 6 and change the .constant property of the constraint

This should do it:

 let height = UIScreen.mainScreen().bounds.height
 if height == 667 { // iphone 6 screen's height
    //Adjust your constrains
 }
  • Also, you may end increasing manually the Font size too for 6 or 6+.

UPDATE:

Reading some comments, I have noticed something important, and that is that you can not instantiate checkmarks for adding constraints to them, in this case, you can solve everything via device specific constraints.

The one's depicted in point 3 and 4. Just go ahead and set everything manually, changing your constraints .constant property accordingly with your design for every device's screen. Here's a link to these sizes

I'm afraid there will be no better way in your case.

Something else, came into my mind, something really powerful, and that is the multiplier property of every constraint. I remember using them to build a tic tac toe board, setting the lines exact positions via this technique. So, this can be your solution. Here's a link of how to use them via code. Just go down until you see subtitle Standard Programmatic Layout You will find something like this:

self.constraintToAnimate = [NSLayoutConstraint constraintWithItem:label
         attribute:NSLayoutAttributeTop
         relatedBy:NSLayoutRelationEqual
            toItem:self.view
         attribute:NSLayoutAttributeBottom
        multiplier:0.25
          constant:0.0];
[self.view addConstraint:constraint];

And, the following explanation.

The first two parameters determine the target of the constraint, label, and the attribute that is to be set: top. The third parameter, relatedBy, accepts one of NSLayoutRelationEqual, NSLayoutRelationGreaterThanOrEqual, or NSLayoutRelationLessThanOrEqual. The next two parameters allow us to set the source view and attribute from which we’ll derive a value. Here we are saying that we want to use the bottom point of our superview, which would be 568 points on a 4-inch device. Lastly we’ve got a multiplier that we’ll use to derive our value — 0.25 (25%). We’re not using the constant parameter, so we’ve set it to 0.0. Put into a mathematical equation it would look something like this: label.top = superview.bottom*0.25.

So, this can be another way, without relying in code, as this can be achieved via Storyboard.

Upvotes: 1

Related Questions