CODEWITHSUNDEEP
iosobjective-ciphone
gEdringer
gEdringer

Reputation: 16583

iOS stretching to fit all screen sizes?

So I've been making an app for iOS lately, and I've come across a dilemma. I'm making a mini synth, and I started making the GUI. I started making the keyboard (2 octaves for now) and measured the approximate length of the white keys. It all worked great, until I ran the thing on a 4 inch iPhone.. The keys were too small, they didn't cover the full screen etc... So I thought I could put the individual key images into a container which will stretch depending on the resolution of the iPhone, thus the images inside (the keys themselves) will stretch in percentage according to the size of the container.

Thing is I have no idea whatsoever of how I should go about it. What element should I use to contain the images/keys?

Upvotes: 0

Views: 679

Answers (1)

sapi
sapi

Reputation: 10224

Generally what you want to do with new apps is make use of auto layout. This lets you set up the relationships between various UI elements in a way that is independent of screen size.

If you're creating views directly on the storyboard, you can add the constraints there.

On the other hand, if you create the views in code, you'll need to use the NSLayoutConstraint class to create them (more information is available in the documentation, especially for the Visual Format Language).

In this example, it sounds like what you're after is a constraint on the container which pins it to its superview, eg:

@H:|[container]|
@V:|[container]|

along with proportional constraints on the keys (setting their width to, for example, a given fraction of the parent container's width).

Note that this approach (using auto layout, but with the same base layout) may not be appropriate in all circumstances.

In particular, it may actually make sense to display a completely different layout on a tablet, where you have a lot more space for the keyboard.

Upvotes: 2

Related Questions