CODEWITHSUNDEEP
iosiphonecocoa-touchstoryboardinterface-builder
Aatish Molasi
Aatish Molasi

Reputation: 2186

How to scale the UI for iOs 5+

I have built a UI for iPhone 6 using the storyboard.
NOTE: Autolayouts are enabled The UI elements are positioned with constant constraints relative to other elements.
When i run the app on the simulator for iPhone 6 it works completely fine, the elements are positioned correctly.

The issue happens when i run the app on iPhone 6 plus and iPhone 5

On iPhone 6 and iPhone 5 the constraints have constant values and the UI gets distorted due to the change in the screen size.
I have gone through the raywenderlich blog for autolayouts
How do i scale the current UI up/down based on the screen size?(if there is a way), since they share the same aspect ratio?

EDIT:
I have hosted a small demo here. I would like to build a single UI and scale it across the form factors.

Upvotes: 1

Views: 341

Answers (2)

ullstrm
ullstrm

Reputation: 10170

Here I've attached a project with the constraints setup. There's probably plenty of ways to set them up to get what you want. This is just one way to do it.

Hopefully this link will work.

This link is broken as of today 7 April 2016 http://speedy.sh/zPEcq/ConstraintsPlayground.zip

There's actually some constraints that's not needed in there aswell. (Forgot to remove them) They are "greyed out", and are under the green and yellow views. You can just delete them.

Answer to comment:

To "scale" the distances you need to define what you should scale from. Is it the width of the screen? What scale should it be? Should there be a max distance? a min distance? You can do almost anything with constraints, but it's sometimes a real mess due to xcode being a b*tch.

Here's an example of how you can scale the distance between two views according to the size of the screen. The gray views are just spacing views, because you need to make aspect ratio from width to width for the spacing view and the container view. The spacing views should have clear color in production:

This link is broken as of today 7 April 2016 http://speedy.sh/B7R95/ConstraintsPlayground-2.zip

Upvotes: 2

Paul
Paul

Reputation: 1019

The UI elements are positioned with constant constraints relative to other elements.

In that case it should be sufficient to not give the UI elements a constant width and height. In that case iOS will stretch the UI elements to fulfill the constant constraints between the different UI elements.

How do i scale the current UI up/down based on the screen size?(if there is a way), since they share the same aspect ratio?

You can set constraints to preserve the aspect ration of your elements but I don't think this is what you are looking for. Generally you don't need to think about aspect ratios. Just think about how your UI should behave if the screen is wider or taller.

As Spoek already pointed out it would be very useful to have access to your storyboard to figure out the problem. If you don't want to hand out your storyboard you may want to update your question with screenshots and a description of what constraints you put in place.

Upvotes: 0

Related Questions