CODEWITHSUNDEEP
iphoneiosobjective-cxcodeautolayout
aradhya
aradhya

Reputation: 355

ios autolayout constraints to resize view for screen size

I am new to ios development and still trying to get hang of autolayout. The problem that I am facing can be better explained with images below

App on Iphone 5 screen size 4 inch

App on iphone 4 screen size 3. inch

Now I am removing the "Login with a social network" on iphone 4. What I want is how to center the google plus icon between the "OR Label" and "Start without registering" button and it should also resize to fit between them.

what kind of constraints does it need to achieve that. If someone can point me in the right direction that would be great help. I have been breaking my head over this entire day. Thanks.

Upvotes: 2

Views: 4198

Answers (2)

Rob
Rob

Reputation: 437381

If you're just trying to get the "g+" graphic centered between the "OR" label and the "Start without registering" label, you can:

  1. Add a view (that you won't really see because you'll make it transparent, but it's useful for alignment purposes) whose top constraint is linked to the "OR" label and whose bottom constraint is linked to the "Start without registering" label:

  2. Then put the "g+" graphic inside that view, aligning its center vertical and horizontal constraints with its superview's.

    enter image description here

If you do that, the "g+" button will stay in the middle between those two labels (assuming, of course, that the "Start without registering" label has a bottom constraint to its superview, i.e. It's pinned to the bottom of the view).

In terms of resizing that button, I'd personally advise against that, if you wanted, you could, for example, remove that transparent view we created above, and just do that trick with the "g+" image/button itself. You will want to set the content size of that imageview to be "Aspect Fit" (so it doesn't get distorted).

Again, I really don't like that latter approach, but you can do it.

I gather that you want to remove the "Log in with social network" label at runtime. There are two approaches for that:

  1. A simple approach is to create an IBOutlet for the height constraint for that label, e.g., logInWithSocialNetworkHeightConstraint and then you can do:

    self.logInWithSocialNetwork.text = nil;
self.logInWithSocialNetworkHeightConstraint.constant = nil;
[self.view layoutIfNeeded];

  2. The alternative is to define a constraint between the "OR" label and the "g+" graphic's appropriate view. This, itself, has two possible approaches:

    • You could define this in IB, but define it with a priority less than 1000. Because the constraints for the "Login with ..." label will have higher priority, when that label is there, those constraints will take precedence. If you you remove the label:

      [self.logInWithSocialNetwork removeFromSuperview];
[self.view layoutIfNeeded];

      Then the new constraint you defined will then come into play.

    • You could alternatively remove the "Login with ..." label and then programmatically add a new constraint between the "OR" button and the "g+" graphic's view.

Upvotes: 0

abbood
abbood

Reputation: 23548

to center [g+] between [or] and [start ..] buttons: you need to do two things.. on the storyboard:

  1. select [g+] and [or]
  2. select editor->pin vertical spacing

and then

  1. select [g+] and [start]
  2. select editor->pin vertical spacing

you should see a vertical line show up between the two objects each time. This is to indicate that that space will always be the same weather on a 3.5" or a 4" iPhone display.

I don't see why you want the g+ button to resize.. that actually goes agains the UI guidelines which instruct that different users shouldn't have different user experiences (see the reason behind why there isn't a replacement for the iOS 7.0 deprecated sizeWithFont:minFontSize:actualFontSize:forWidth:lineBreakMode: method)

The same logic that discourages changing font sizes on labels/buttons depending on form factor etc resulting in different users having different experiences, is the same logic that would discourage you from scaling up or down your [g+] button depending on form factor circumstances as well.

Upvotes: 2

Related Questions