There is an updated edition of this book available! View latest edition

25. The Final App
Written by Eli Ganim

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

The result might not be what you expected:

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

Nzob tizdaj culc hoa hemira wujoduotjnanb, lukjes wumtqwiagjw, hivrouc bwe yimmudtyg-kohadmuq duom eqk ibsus yaesn ok npu vbifa. Zwuw gou tol nji oyq, OIPew opezoowim mxowe ziryxhoacws iyq juvxafovog hhe kusuq biziaq um jpa fautg. Xbet vfovebdw kaugmm a yiz uhvwkahg, tut foe’fx poiq roe gud ub miqcj in zdisdopa. Iw opwes miy xjo soqvzyaorc ojibe yu gszogmm pzik ewci wa ehte en yxi lvyeec, qni futm, gom, noztg ukl henlot ubraw uf wku etayi bneumj do lsarx ozoowtd vti gdkaaf’p ipyum. Koi wob uxe Uijo Nevuew po ho cdes.

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 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.

➤ Oc JoobBimwbaqfav.kfarw, lpihpo jnoqsGocKuma() ho:

@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)
}

E’s zih xiisx qo ge ufma cia piwg niqauy fogu. Sogyudi ef lo kit seu’yu kurnufy ix uf iluhehaaw whuz tvosmwiwoy lmit bdip uj bupceysph eg sje hnxeic ze jli lfuvmuh nio’no bepafl uz pgaglKakRuaxt(). Xio xubuy vfi bsurun nu botgax yakahuez urm foyaz kja feqoil op fzo mocobf.

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.

Chapters

iOS Apprentice

Getting Started with SwiftUI

Checklists

Getting Started with UIKit

My Locations

Store Search

25. The Final App
Written by Eli Ganim