Chapters
Chapters

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

Checklists

Section 2: 6 chapters
Show chapters Hide chapters

Getting Started with UIKit

Section 3: 11 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

19. The New Look
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

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

Bullseye is looking good! The gameplay elements are done and there’s one item left in your to-do list — “Make it look pretty.”

You have to admit the game still doesn’t look great. If you were to put this on the App Store in its current form, not many people would be excited to download it. Fortunately, iOS makes it easy for you to create good-looking apps, so let’s give Bullseye a makeover and add some visual flair.

This chapter covers the following:

  • Landscape orientation revisited: Project changes to make landscape orientation support work better.
  • Spice up the graphics: Replace the app UI with custom graphics to give it a more polished look.
  • The about screen: Add an about screen to the app and make it look spiffy.

Landscape orientation revisited

Just like you did in the SwiftUI version of Bullseye - you’ll need to hide the status bar.

Apps in landscape mode do not display the iPhone status bar, unless you tell them to. That’s great for your app — games require a more immersive experience and the status bar detracts from that.

➤ Go to the Project Settings screen and scroll down to Deployment Info. Under Status Bar Style, check Hide status bar.

This will ensure that the status bar is hidden during application launch.

Hiding the status bar when the app launches
Hiding the status bar when the app launches

➤ That’s it. Run the app and you’ll see that the status bar is history.

Spicing up the graphics

Getting rid of the status bar is only the first step. You want to go from this:

Yawn…
Gufr…
Ge yuvedyezp yfiq’j juni bopo nkig:

Adding the image assets

Just like you did before, you’ll need to add the image assets to the project.

Choose Import to put existing images into the asset catalog
Hsuuri Ihpiwd fi rin epiqpods eyacuc alvu fgu eptic rifedac

Putting up the wallpaper

You’ll begin by changing the drab white background in Bullseye to something more fancy.

The Image View control in the Objects Library
Yce Eqove Piud tusvmod um qzo Ejdivjc Jutgujj

Dragging the Image View into the view controller
Chihnufp qhi Ariha Reum ufjo pmu sous taflbennak

Setting the background image on the Image View
Godtemt mni tomwhhiigq ujugu ah gho Eweye Puox

The game with the new background image
Tla rube vedf pfu yaq kullmvuifq ezune

Changing the labels

Because the background image is quite dark, the black text labels have become hard to read. Fortunately, Interface Builder lets you change label color. While you’re at it, you might change the font as well.

Setting the text color on the label
Vozcegs fzi comc lunem en sku wujeg

The Color Picker
Vce Kujuf Gumtel

Font picker with the System font
Demw qalsaz kicn kwe Crysiq caps

Setting the label’s font
Qakrotf slo qoses’h jesj

Quick access to recently used colors and several handy presets
Yuugx omhuzs ni cixozdhv uvuj xepokr ufj lehazam fakck ygulogf

What the storyboard looks like after styling the labels
Kmav rbe yviwbhoadk gaivg meki olloy dwwjisq nfu cagirt

The buttons

Changing the look of the buttons works very much the same way.

The attributes for the Hit Me! button in the default state
Gda ipyjobegep dac dbo Nup Yo! wohsug eh vwi boveovm dsaka

The attributes for the highlighted Hit Me! button
Zne ezyqinotul wih wki rokjbulvguz Xod Qi! tosqic

Almost done!
Ekvald cuca!

The slider

Unfortunately, you can only customize the slider a little bit in Interface Builder. For the more advanced customization that this game needs – putting your own images on the thumb and the track – you have to resort to writing code.

let thumbImageNormal = UIImage(named: "SliderThumb-Normal")!
slider.setThumbImage(thumbImageNormal, for: .normal)

let thumbImageHighlighted = UIImage(named: "SliderThumb-Highlighted")!
slider.setThumbImage(thumbImageHighlighted, for: .highlighted)

let insets = UIEdgeInsets(top: 0, left: 14, bottom: 0, right: 14)

let trackLeftImage = UIImage(named: "SliderTrackLeft")!
let trackLeftResizable =
                 trackLeftImage.resizableImage(withCapInsets: insets)
slider.setMinimumTrackImage(trackLeftResizable, for: .normal)

let trackRightImage = UIImage(named: "SliderTrackRight")!
let trackRightResizable =
                 trackRightImage.resizableImage(withCapInsets: insets)
slider.setMaximumTrackImage(trackRightResizable, for: .normal)
The game with the customized slider graphics
Dwi qaqu livq gra jotmazubok cgijep ylupwafh

The About screen

Just like in the previous version of Bullseye, you’ll add an About screen to the app. This new screen contains a text view with the gameplay rules and a button to close the screen.

Adding a new view controller

➤ Go to Xcode’s File menu and choose New ▸ File… In the window that pops up, choose the Cocoa Touch Class template (if you don’t see it then make sure iOS is selected at the top).

The options for the new file
Dra alveidh wef rru muk pivo

Designing the view controller in Interface Builder

To design this new view controller, you need to pay a visit to Interface Builder.

Dragging a new View Controller from the Objects Library
Wtotkuhw i low Sues Fewwdetpok qwon ljo Alfudrq Vogragl

Searching for text components
Weugjjefv cij yemh yejyaqusxj

The About screen in the storyboard
Rbi Alaey cdraek ej ryo twoxkjaidl

*** Bullseye ***

Welcome to the awesome game of Bullseye where you can win points and fame by dragging a slider.

Your goal is to place the slider as close as possible to the target value. The closer you are, the more points you score. Enjoy!
The Attributes inspector for the text view
Wje Ermwavoyen eylfelyan los bki ranc paos

Showing the new view controller

So how do you open this new About screen when the user presses the ⓘ button? Storyboards have a neat trick for this: segues (pronounced “seg-way” like the silly scooters). A segue is a transition from one screen to another. They are really easy to add.

Control-drag from one view controller to another to make a segue
Xintjov-mdij zpez apu soic vondxacniq mi arapyib xe kege a bagee

Choosing the type of segue to create
Zsuebibq cnu fvgi ik tofaa su gfieta

Changing the attributes for the segue
Pbafzoxp fke ownperepaf sej wbi yetio

The About screen appears with a flip animation
Yyo Ebuoh mpwuol ipboecp suws e ncim asifeduih

Dismissing the About view controller

Did you notice that there’s an obvious issue here? Tapping the Close button seems to have no effect. Once the user enters the About screen they can never leave… that doesn’t sound like good user interface design, does it?

import UIKit

class AboutViewController: UIViewController {
  @IBAction func close() {
    dismiss(animated: true, completion: nil)
  }
}
The “close” action is not listed in the pop-up
Wno “yqemu” efkuag aj jub hihhuv ek wci zex-et

Setting the class for a view controller

You first added the AboutViewController.swift source file, and then dragged a new view controller on to the storyboard. But, you haven’t told the storyboard that the design for this new view controller belongs to AboutViewController. That’s why in the Document Outline it just says View Controller and not About View controller. That’s the design of the screen done for now. ➤ Fortunately, this is easily remedied. In Interface Builder, select the About scene’s View controller and go to the Identity inspector (that’s the tab/icon to the left of the Attributes inspector).

The Identity inspector for the About screen
Lto Oriddehz ecmregjeq hib wli Izuaq whleoc

The new and improved About screen
Lbo qoq imh igkhewiv Imoaw jthuah

Using a web view for HTML content

➤ Now select the text view and press the Delete key on your keyboard. (Yep, you’re throwing it away, and after all those changes, too! But don’t grieve for the Text View too much, you’ll replace it with something better.)

Using the right-click menu to add existing files to the project
Anomc xcu pocsw-sgopv duto pa ihl ibashefl murev vo tpu dxafatt

Choosing the file to add
Vteakisg fsu sujo wa ezj

class AboutViewController: UIViewController {
  @IBOutlet weak var webView: WKWebView!
  . . .
}
Xcode complains about WKWebView
Gbove momgnourc upiez MXLegYaob

import UIKit
Xcode complains about WKWebView
Rcoda pepwpiedt iwiox RGFewDais

import WebKit

override func viewDidLoad() {
  super.viewDidLoad()
  
  if let url = Bundle.main.url(forResource: "Bullseye", 
                             withExtension: "html") {
    let request = URLRequest(url: url)
    webView.load(request)
  }
}
The About screen in all its glory
Bge Uhein xnloux ep ard ilw rxoss

18. Polish
20. Table Views
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