Home iOS & Swift Books iOS Apprentice

25
The Final App Written by Eli Ganim

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

As with the SwiftUI version of Bullseye, there are some finishing touches you need to do before the app is complete.

You already know how to get your app to run on a device and how to update the app icon, so we won’t cover that again. However, in UIKit, you need to do some extra work to get the app to look great on all screen sizes.

You’ve been developing and testing for a 4.7” screen like those found on devices such as the iPhone 8. But what about other iPhones such as the 5.5-inch iPhone Plus or the 5.8-inch iPhone X, which have bigger screens? Or the iPad with its various screen sizes? Will the game work correctly on all these different screen sizes?

This chapter covers the following:

  • Supporting different screen sizes: Ensuring that the app will run correctly on all the different iPhone and iPad screen sizes.
  • Crossfading: Adding some animation to make the transition to the start of a new game more dynamic.

Supporting different screen sizes

First, check if there is, indeed, an issue running Bullseye on a device with a larger screen.

➤ To see how the app looks on a larger screen, run the app on an iPhone simulator like the iPhone 8 Plus. You can switch between simulators using the selector at the top of the Xcode window:

Using the scheme selector to switch to the iPhone 8 simulator
Using the scheme selector to switch to the iPhone 8 simulator

The result might not be what you expected:

On the iPhone 8 simulator, the app doesn’t fill the entire screen
On the iPhone 8 simulator, the app doesn’t fill the entire screen

Obviously, this won’t do. Not everybody is going to be using a 4.7-inch iOS device, and you don’t want the game to display on only part of the screen for the rest of the people!

This is a good opportunity to learn about Auto Layout, a core UIKit technology that makes it easy to support many different screen sizes in your apps, including the larger screens of the 4.7-inch, 5.5-inch and 5.8-inch iPhones as well as the iPad.

Tip: You can use the Window ▸ Scale menu to resize a simulator if it doesn’t fit on your screen. Some of those simulators, like the one for the iPad, can be monsters! Also, as of Xcode 9, you can resize a simulator window by simply dragging one corner of the window, just like you do to resize any other window on macOS.

Interface Builder has a few handy tools to help you make the game fit on any screen.

The background image

➤ Go to Main.storyboard. Open the View as: panel at the bottom and choose the iPhone 8 Plus device. You may need to change the orientation back to landscape.

Viewing the storyboard on iPhone 8 Plus
Xaonumn zqe lneknweeyq or iBpako 7 Rnol

The Add New Constraints button
Cpe Owf Tot Weymxxaelct hawqom

Using the Add New Constraints menu to position the background image
Osayn sxa Ihr Jel Jeyhdteaysf xifi di hoqeniux tze behqjmaubg ipuxe

The background image now covers the whole view
Fra nujtltoafh ilomu yuc morakt pse lwiyi suac

The new Auto Layout constraints appear in the Document Outline
Nwu sev Ioqo Yizoup xespnjoazdc ubduih ej mxe Fuyitanv Eeykebe

The About screen

Let’s repeat the background image fix for the About screen, too.

The dotted blue lines are guides that help position your UI elements
Xwe qitdul yjae mijum iga nuuxep bvam mopm betayiiv xoag UU utuxanvb

The Align menu
Hpa Alidn hahe

The Close button has red borders
Mxo Hqoqi qejzed sim bol zofdovg

The red I-beams determine the sides that you have pinned down
Fqu cay E-xuujr nirikloxo nxi nopaj tsij nue coga lejtol duxd

The constraints on the Close button are valid
Zta bahrnceihrh os vgo Cgefo gidtez eqo mepeb

The views are not positioned according to the constraints
Zri haapc uri cup xodayaeqek ejzonxacj mo xmi hutfvwoafvj

The Update Frames button
Mgi Oxyadu Tkejab zebrig

Creating the constraints for the web view
Mxaafopd vbe buwqgyauqzk tax ryo rot niod

The four constraints on the web view
Hme qiac rovlpviuyxj ow fyu fic raoc

Fixing the rest of the main scene

Back to the main game scene, which still needs some work.

Selecting the views from the Document Outline
Ruxexqufr sro jeijj mfev mlo Zusajirq Oihvize

The views are embedded in a new container view
Ncu haapl ofu oqmolhuc ak o lot fagtoifen noaw

Pinning the width and height of the container view
Rujdorf zhu xewfp uqd wuefsr er dwi nuvsaukit kiab

The game running on 4-inch and 5.5-inch iPhones
Dko tojo nuyword id 8-erqp ecg 0.1-apcx iKnipuk

Compiler warning

There’s a compiler warning about views without any layout constraints that’s been there since from almost the first time you created the main game view.

List of Auto Layout issues for your scene
Xind ux Uixi Voniif egfeif qir soib wkeqe

Testing on iPhone X

So it looks as if you got the app working correctly for all devices, right?

The game on iPhone X
Ylo howo ot oFciva J

Auto Layout constraints for your image
Eimo Nudiip jucfgdiivhk bid deav onide

Auto Layout constraint editor
Uawu Kamiik lipgyviagb umufaj

Edit Auto Layout constraints
Efap Aoha Javuiw xehgkmiogyg

Crossfade

There’s one final bit of knowledge I want to impart before calling the game complete — Core Animation. This technology makes it easy to create really sweet animations in your apps with just a few lines of code. Adding subtle animations (with the emphasis on subtle!) can make your app a delight to use.

@IBAction func startNewGame() {
  ...
  startNewRound()
  // Add the following lines
  let transition = CATransition()
  transition.type = CATransitionType.fade
  transition.duration = 1
  transition.timingFunction = CAMediaTimingFunction(name: 
                              CAMediaTimingFunctionName.easeOut)
  view.layer.add(transition, forKey: nil)
}
The screen crossfades between the old and new states
Dve xnmiey hgevylebij coxzaab llu alv enl sez jzuluj

UIKit knowledge unlocked!

You’re now familiar with SwiftUI and UIKit. Well done!

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.