Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make controls in view not overlap if built by Interface Builder for Xcode 4.5 and iPhone 5?

I am using Xcode 4.5 and iPhone 4 and 5 simulator, and the Interface Builder would add a UIButton in the top half of the screen with a top constraint, and add a UIButton in the bottom half of the screen with a bottom constraint.

It works fine on an iPhone 5 simulator, but on the iPhone 4 simulator, the buttons can overlap, or the bottom button may even get positioned above the top button.

I think it is due to the constraint, such as the bottom button "must be 250 points away from the bottom margin". I can't delete the constraint, and if I change it to "250 points or less", it won't work, if I change it to "250 points or more", it won't work either.

Is there a way to:

1) Make it have no constraint, but just position at absolute x and y? (or what about the spring in the past, so that everything is more spaced out in iPhone 5?)

2) Make the NIB into a one for iPhone 4 and 4S only, so that the app works well on iPhone 4 and 4S and just "black barred" on the iPhone 5.

3) Make it work well on iPhone 5 and work well on iPhone 4 as well?

If you know solutions to only (1), (2), or (3), above, please give it regardless, as it is still a viable solution for the transition period.

It is actually very easy to reproduce: Create a simple Single View app using Xcode 4.5, and drag one button just above the center point of the screen, and another one just below the center point of the screen. Then run it on the Simulator. On iPhone 5, it is:

enter image description here

And now stop the app, and change the Device in the Simulator to iPhone 4S (3.5 inch Retina). If you don't stop the app first, the Simulator can crash. Now run the app again, and the buttons will overlap:

enter image description here

like image 330
Jeremy L Avatar asked Sep 23 '12 01:09

Jeremy L


People also ask

What is constraint to margin in Xcode?

Feb 25, 2015 at 9:01. It is worth it to point out that when adding new constraints, newer versions of Xcode allow you to uncheck a box for "Constrain to Margins" that sets the same "Relative to Margins" flag. This is useful because it saves a few clicks!

What are two properties that auto layout constraints control on a Uiview?

Auto Layout defines margins for each view. These margins describe the preferred spacing between the edge of the view and its subviews. You can access the view's margins using either the layoutMargins or layoutMarginsGuide property. The layoutMargins property lets you get and set the margins as a UIEdgeInsets structure.

How do you add constraints in storyboard IOS?

Select the view you would like to constrain. Then tap the button to the right of the one you have selected and use that menu to define your autolayout constraints. If you want it to work for all devices make sure your storyboard is on the wAny hAny size class setting.

How do constraints work in IOS?

To create constraints select the button and click the Align icon in the auto layout menu. A popover menu will appear, check both “Horizontal in container” and “Vertically in container” options to center the button on the screen. Then click the “Add 2 Constraints” button. Run the application.


1 Answers

I had the same problem, and it was due to a wrong settings for autosizing. To change the autosizing, click on the control in the interface builder, go to the size inspector.

Notice the bold red I's in the autosizing grid, they control placement when the screen is resized (like when going from iPhone 3GS to iPhone 5.

Autosizing from the bottom left

I think it will work best for you if you make your autosizing look like this:

Autosizing from top left

like image 198
Jay Haase Avatar answered Nov 01 '22 11:11

Jay Haase