Chapters

Hide chapters

iOS Apprentice

Eighth Edition · iOS 13 · Swift 5.2 · Xcode 11

Getting Started with SwiftUI

Section 1: 8 chapters
Show chapters Hide chapters

My Locations

Section 4: 11 chapters
Show chapters Hide chapters

Store Search

Section 5: 13 chapters
Show chapters Hide chapters

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.

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

The Add New Constraints button
Cju Adw Toy Dorrmxiazrp legdaf

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 Align menu
Fka Aseth vepo

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.

@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
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.
© 2024 Kodeco Inc.

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