Xcode storyboard constraints and auto layout

Question

I'm working on an app at the moment and one thing that I've been struggling with for the past two weeks has been auto layout. I'm new to iOS programming so I'm not exactly sure the best way to explain my problem but here goes.

I'm making a piano app and the way it works is that my keyboard is just a bunch of buttons laid out next to each other.

These buttons represent the keys. The buttons have a background image of an image of a regular piano key. Now my problem is that I have a black above the keys and whenever I try to use the pin tool to create constraints for my piano keys, as soon as i add the constraints everything gets pushed up and my keys get stretched vertically.

I've been working hours non stop this past week not knowing what's wrong. I've followed manny tutorials but the one's I follow are very basic and at most have a few labels or buttons separated by a ton of space. I'm not sure if it's because my buttons are not spaced out enough or what but it's just extremely frustrated. Any help, or guides/tutorials would be super helpful...

Also I've tried checking the boxes that say to width and height to maintain the width and height however that just makes the keys either too huge or too small on some devices. Is there a way to stretch these keys so they adapt to their device? I've heard of intrinsic size content but don't know how that would apply with over 24 buttons...

Edit: I tried a stack view but all my white keys got spaced out and went out of the storyboard:

Answer 1

Here's what I would do. Let's ignore the black bar at the top for a moment and concentrate solely on the keys. And for a moment let's ignore the black keys. So let's imagine we have 14 white key views, and they are to fill the screen regardless of its size.

That's easy. Start with one white key view. Pin it to the top, left, and bottom of the superview, and set its width arbitrarily to, say, 10. Now just keep adding white key views with their left pinned to the right of the previous view, their top and bottom pinned to the superview, and their width set equal to the first view's width . Finally, pin the 14th key view's right to the right of the superview.

At that point, of course, Interface Builder will balk, because the widths do not all add up to make it possible to pin the leftmost key to the left and the rightmost key to the right. But now you remove the width constraints on the first key! Presto, the keys adjust themselves to fill the total width of the screen.

Here's the result in Interface Builder on my screen. I've allowed a little extra space and I've colored the white keys green for clarity. I created an IBDesignable custom UIView subclass so as to simulate the roundy shape of the bottom end of the keys.

The black keys are similar except that you will need three invisible "spacer" black keys to dictate the gaps in the series. Here's my Interface Builder with the black keys added:

Here's the app running on the iPad simulator:

Here it is running on the iPhone 5s simulator:

That shows, I think, that this is a viable strategy. It's just a matter of minor tweaks from this point to get the exact look you want.

Answer 2

Buttons will be easier to use than views when it comes to triggering actions so stick with buttons. We will constrain their sizes so they behave.

Start by getting rid of the black keys until the white keys are all set.

Pin all of the white keys to the top and bottom of the screen.

Set them all to have the same width.

Pin the first key to the leading edge and the last key to the trailing edge of the superview.

Select all the white keys except the last one and pin the right side with the spacing at 0.

That should make it so that all the white keys fill the screen with no space around the edges or between them.

Use the assistant editor in the storyboard and select preview from it. Add a few different screen sizes and turn them to landscape. It may not look exactly the way it will on a device but it should be pretty close.

Once the white keys look right add the black keys into the mix.

Start with just one black key and drag to resize it to the proper size in the storyboard. Once you have that size right add an aspect ratio constraint so you only have to worry about adjusting the width and not the height.

Temporarily set the label of the black key to "b" or some other single character, we will need it later.

You will need to do a tiny bit of math to get the black key to be the right width on all screens… Select the black key and look in the size inspector for it width, do the same for the superview. Once you have those numbers divide the black key width by the superview width. make note of the result as you will need it in a moment.

Now that you know the percentage of the screen width the black key takes up select the black key and the superview. Set them to have the same width. (This may make the black key get crazy big, we will fix that in a moment)

Select just the black key, go to the size inspector, and double click on the constraint that makes its width match the superview.

That will select the constraint itself. In its attributes set the multiplier to be the same as the decimal number you got by dividing the black key width by the screen width.

That takes care of the size of the black keys, now to deal with positioning them.

First duplicate the black key you have created until you have all that you need.

Select all the black keys and pin them to the top of the superview.

Manually drag all the black keys into the right places (you don't need to be precise just in the right area).

The final bit of alignment we need to do is to make it so that the center of each black key is over the line between white keys…

Select a black key and either control or right click and drag from it to the white key on its right side. Select horizontal spacing from the menu that appears.

In the size inspector double click on that new constraint (it should have a negative number).

In the attributes for the constraint you should see that it has a first item and second item. One of those items is "b" (or whatever label you used for the black key earlier). If you click on the popup menu you should see trailing is checked. Select Center X instead. Finally set the constant to 0.

That should lock that black key into the proper size and place. Now repeat the process for the rest of the black keys.

Once that is done you can get rid of the labels and make sure all the images are properly set.

It isn't a quick process but it gets easier over time.

If the white keys end up with space on some screens try making sure they are set to scale to fill (hopefully that doesn't mess up the bottom curves too much).