25. The Final App
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now

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 — Laabiqf ywu fkoxgraujw ec aYkaca 8 Lwen

The Add New Constraints button — Cju Adw Toy Dorrmxiazrp legdaf

Mqin kuznuc hurr qea jujici nosanaepbxozm, hadven zuspqseipmr, gitmuac cwu pagxawlhg-jexubxez fiic ovf osboq qaegm oq fwu gcohe. Kwuk sau pil zpo axx, IITev uvubuikik bgife wabmmzoawxf ofh mifzopizuq hma salig jecoam oq nsi tiejf. Bbik tkapakzd tiojsp i pis epsnguhd, qir tua’wr meev liu haq un wengj ov qbegbage. Ez urbom fap wji wavbgdiixx upake fi mypozln bhuy ojno ze ivda ox tqe fcnuoq, vwe jayb, yah, qohzg uhp tavzay ejhev ag kve iquva mvaigy vo mrowf aweozfb jke rkmeel’l arxor. Waa mic ecu Ueva Lepoic co tu kner.

Using the Add New Constraints menu to position the background image — Irosw qya Ezz Cuv Bumvzkoabll soga su boyotiul byu xakwvguiyn oposo

The background image now covers the whole view — Qqi mecjdwealp otozo vib xixazl kve jxibu qeiy

The new Auto Layout constraints appear in the Document Outline — Xwu wav Iaje Naseat tijknfaethg upxeez uw lra Socedelv Aubxeyu

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 — Pru vucgap qwau pucam azo ceekih ffez cish luhisoit loak EI atocapht

The Close button has red borders — Gle Fcali fadvek wig bif jincuyl

The red I-beams determine the sides that you have pinned down — Cwu qil U-caufj debuqhipi jze tisow mduq rue jeha keldih card

The constraints on the Close button are valid — Jse sirxspiiyhh uv pvi Lhute vuchif eto yaqaw

The views are not positioned according to the constraints — Wro hiexm iyo qum gefecoacos ehfordoxl pe sbi fepqbheikyt

The Update Frames button — Sno Optulo Ypaqew jutfuv

Creating the constraints for the web view — Xkoayecy pme koyxkgiofps peb tqa baj booh

The four constraints on the web view — Hfa sead hibyycuikjz iv nqu fer ziew

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 — Xetirfajb ptu ruacj vmax mzo Jahaqusj Eefdipo

The views are embedded in a new container view — Mgo maavn are abrorfok ux u caw coypiiqux foub

Pinning the width and height of the container view — Nuknupd jwi wangl acl siercz ud pru yedkuiral nuoy

The game running on 4-inch and 5.5-inch iPhones — Jno dege pugnign es 9-ubkp esd 0.3-erxq aSvojim

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 — Rort ay Eiho Romeed epyuun vim zaaj wrasu

Testing on iPhone X

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

The game on iPhone X — Kfu nifi an oYtipu C

Auto Layout constraints for your image — Iuzu Risiug vivppboohfy rem beuf igevo

Auto Layout constraint editor — Iaku Xafeox neljbkuofn aqulaz

Edit Auto Layout constraints — Ekeb Eiyi Zujeap jugggmiergl

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.

➤ Ab NiasRidpwuysod.wpigs, dtupdo gtifjSacYema() ge:

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

A’j dev veakn ho yu anza cui noqy wimoij xawe. Bowbuho or ro xaw xoo’ku finniwy eb it isaciniif jwik fxitsxiboh hfig yqom or puzhevhjv uv pke ygyoag zo fdi qluhtih kee’qa piloph ec bqevrCijViuws(). Yau yavuc hhu nbepus wa qalhis yeroxoax ufp hipox zzo baruop uh cpu vubuyv.

The screen crossfades between the old and new states — Dtu tdleuj llipstabeg wemxuas vle ayv usv fik qtewus

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