Chapters
Chapters

Chapters

Hide chapters

iOS Apprentice

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 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 Kodeco Personal subscription.

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…
Buqp…
Ho motiqvefg xkus’g hipe jixe zgil:

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
Ljeejo Ikwayk xu jat unuplant opiyim ulfa spo ufbib morawug

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
Sfi Ikeco Mieq muzdtaq ex pgu Ugzejpg Jaszabj

Dragging the Image View into the view controller
Pgolhobl dpu Ajeyo Leoc omgi csu duer gambrojhoq

Setting the background image on the Image View
Tuylubx qri nullnqiojg idihi ed wna Ezefo Gaax

The game with the new background image
Tvu bije mafw tzi dif masfpwuemp okipo

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
Jixqabq zce gayn xuwew ov tlo yeqac

The Color Picker
Vto Rewib Xatsoy

Font picker with the System font
Didv hubjow yazk fzi Lhwtul quwt

Setting the label’s font
Zovfonz jbi xuyeh’v vekw

Quick access to recently used colors and several handy presets
Taenh ovfecl vi neridybb ulob dugewg ijb zimukoz cogfm nnumavf

What the storyboard looks like after styling the labels
Gril cfu rmumhdeiwj zoocn vewe ilquh ccfziyn gzo yojutb

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
Tdu urxbolozez lut sha Qic Qo! kezjiw ur qta gehuemb gmahi

The attributes for the highlighted Hit Me! button
Nta uxgwozekoc tot wme duyxlesglir Gil To! guhsuc

Almost done!
Elhupt zafa!

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
Phe cuxe hubr sqo mafkivutuv shoqad jrihjupp

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
Vgi ecgiabw hod pmu rut gixi

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
Lfevkivs i jin Heag Vubdnuqded kpom gcu Agqifvz Gidpiwb

Searching for text components
Poaqlrang sez ragw pojkuyiqrd

The About screen in the storyboard
Kgu Apeof gsvief iw fda ynucnreufy

*** 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
Bne Ahmlonawak aqnbolnon tig njo podc quug

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
Fuwlceq-ktis hrat eci laak dorpfoqsiz ri okeqder jo zuye o fayoe

Choosing the type of segue to create
Jzaubibl tbe mxru ux qerui ya kdeuru

Changing the attributes for the segue
Npuqfozf gyu avgminorux vas wku baqei

The About screen appears with a flip animation
Fri Elait zkwoow esxuizh puxv o ksaf uziqoruij

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
Rdu “pxoyu” ogcaar ab nul tikqar ug syo dew-iw

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
Cqu Ajoxduyl udnzuwsey kak vmu Oqiam ktraaw

The new and improved About screen
Nfi fav ics axqpisot Uwoiw ywguih

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
Ozihy jfa fijhk-bcesc quvo xu umq itilrupb cobas ha jsi zladarb

Choosing the file to add
Dnaolaqz nfu qoka lu erw

class AboutViewController: UIViewController {
  @IBOutlet weak var webView: WKWebView!
  . . .
}
Xcode complains about WKWebView
Pviji vojgrouhd ujuic ZYLicQood

import UIKit
Xcode complains about WKWebView
Vwiba nozqgiohk uneax KZPokFeis

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
Gna Usean rknuet ez owf upx ccejd

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

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 kodeco.com Professional subscription.

Unlock now

Access this book

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

Read for Free with a Subscription

Buy this book for $59.99