Buttons… buttons everywhere!

Our user interface for this game is going to have two large UILabels, one small UILabel, one large UITextField, twenty (count 'em!) big UIButtons, then two small UIButtons. This is probably the most complicated user interface we're going to make in this entire series, so don't worry if it takes you 20 minutes or so to put together – the end result is definitely worth it!

The picture below shows how your finished layout should look if you've followed all the instructions. If you're seeing something slightly different, that's OK. If you're seeing something very different, you should probably try again!

Our game is designed for iPads, and specifically for iPads in landscape orientation. When you open Main.storyboard in Interface Builder, it will probably be sized like an iPhone 8 in portrait, which isn’t much use. To fix that, look at the bottom of Interface Builder for “View as: iPhone 8” – click that, then select “iPad Pro 9.7” for the device and landscape for the orientation. Much better – you’ll have a huge canvas now.

Let's start with the twenty big buttons, because you need to follow my instructions carefully and once these are placed you'll be able to see the big plan.

What you need to do is place twenty UIButtons in a grid that's five across and four down. The top-left button should be at X:200 and Y:470. All buttons should be 120 wide and 60 high; each column should be 130 points apart, and each row should be 60 points apart. That ought to be enough for you to make the entire grid, but for the sake of clarity, this means that:

The second button on the top row should be at X:330 Y:470.

The third button on the top row should be at X:460 Y:470. (and so on)

The first button on the second row should be at X:200 Y:530.

The second button on the second row should be at X:330 Y:530. (and so on)

Once you've placed all the buttons, click and drag over them so they are all selected, then tap your left cursor key eight times to move every button eight points to the left. On the eighth tap, you should see a long, blue, vertical line appear in the center of the button group, which is telling you the buttons are centered horizontally, so these buttons are placed correctly.

With the buttons still selected, go to the attributes inspector and change Type to be "Custom" and Tag to be 1001. The first one disables an Apple animation that will otherwise cause problems later, and the second change sets the tag for all the buttons simultaneously. You should also click the small T button next to the button font, and in the popover that appears make sure the size is set to 36.

When designing this, I gave these buttons the text WWW because that's the largest string they'll need to hold. You should also give them a text color; I chose a shade of blue similar to the iOS default.

Now create two more buttons, both 75 wide and 44 high. Place the first at X:425 Y:390 and give it the title SUBMIT, and place the second at X:525 Y:390 and give it the title CLEAR. That's all the buttons we'll need for the game.

Place a text field and make it 535 wide by 80 high, then position it at X: 245 Y: 315. You'll find that you can't resize the text field's height by default, and that's because it has a rounded rectangle border around it that must be an exact size. To change the height you must make the textfield borderless: in the attributes inspector, choose the first of the four options next to Border Style, then you can adjust the height freely.

Give this text field the placeholder text "Tap letters to guess", then give it a nice and big font size – 44 points ought to do. Finally, make its text aligned to the center rather than the left, so everything lines up neatly.

Now create two labels. Make the first one 400 wide by 280 high, with position X:255 Y:20, then give it the text "Clues". Make the second one 165 wide by 280 high, and position it at X:605 Y:20, then give it the text "Answers". Both of these should be given font size 24, but where it says "Number of lines" set the value to be 0 – that means "let this text go over as many lines as it needs." Make the Answers label have right text alignment, to help its content avoid overlapping with the Clues label as much.

Finally, create one last label of width 170 and height 40, at X:830 and Y:20. Set this to have text alignment right and the text "Score: 0".

That's the layout complete. If you've played any games like 7 Little Words before, you'll already know exactly how the user interface functions. If not, we'll show seven clues in the label marked "Clues", and each of those clues can be spelled by tapping the letters in the buttons. When a user has spelled the word they want, they click Submit to try it out, and if the answer is correct they'll see it in the Answers label. Otherwise, that answers label just shows the number of letters in the correct answer.

Before you exit Interface Builder, switch to the assistant editor and create four outlets: one for the clues label (call it cluesLabel), one for the Answers label (call it answersLabel), one for the text input field (call it currentAnswer) and one for the score (call it scoreLabel). Please also create two actions: one from the submit button (call it submitTapped()) and one from the clear button (call it clearTapped()).

That's it! That's the most complicated storyboard you'll make in any project in this entire series. Fortunately, from here on the rest is all coding and lots of fun, so let's get onto the best bit…

Learn Swift faster!

Take your Swift learning to the next level: buy the Hacking with Swift e-book and get bonus material to help you learn faster!