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

16. Slider & Labels
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

Now that you’ve accomplished the first task of putting a button on the screen and making it show an alert, you’ll simply go down the task list and tick off the other items.

You don’t really have to complete the to-do list in any particular order, but some things make sense to do before others. For example, you cannot read the position of the slider if you don’t have a slider yet.

Now add the rest of the controls — the slider and the text labels — and turn this app into a real game!

When you’re done, the app will look like this:

The game screen with standard UIKit controls
The game screen with standard UIKit controls

Similarly to what you did in the SwiftUI version of Bullseye, you’ll start off with a barebone version of the app and add graphics later.

In this chapter, you’ll cover the following:

  • Portrait vs. landscape: Switch your app to landscape mode.
  • Objects, data and methods: A quick primer on the basics of object-oriented programming.
  • Adding the other controls: Add the rest of the controls necessary to complete the user interface of your app.

Portrait vs. landscape

Just like in SwiftUI, your app can be displayed in landsapce or portrait orientation. Unlike SwiftUI, this is not just handled automatically and will require some extra work. You’ll take care of that now.

Converting the app to landscape

To switch the app from portrait to landscape, you have to do two things:

Changing the orientation in Interface Builder
Ydasrojv bho uqoaxjugeil ol Ixfummiwa Hoadnak

The view in landscape orientation
Rra giip om fittbfitu ariapbojauy

The settings for the project
Sno jipjeldt hih yqi photisw

Understanding objects, data and methods

Time for some programming theory. No, you can’t escape it.

Objects

So what exactly is an object? Think of an object as a building block of your program. Programmers like to group related functionality into objects. This object takes care of parsing a file, that object knows how to draw an image on the screen, and that object over there can perform a difficult calculation.

Data and methods

An object can have both data and functionality:

All method definitions start with the word func and have parentheses
Otk povxet seviruweaqm njenj wikb cfu ganl rerl avm quhi qotonkdepid

Every party needs ice cream!
Opamg kivyc koejr uma jkuuk!

Messages

“Sending a message” sounds more involved than it really is.

Adding the other controls

Your app already has a button, but you still need to add the rest of the UI controls, also known as “views.” Here is the screen again, this time annotated with the different types of views:

The different views in the game screen
Lro cujcajohb cuacw in mhu hale lkpeip

The Attributes inspector
Rfa Aqqyixacin andseyhaw

The button type lets you change the look of the button
Dba baqcim jvwe witq fie fwobbe ydo coef ig bpa qimzal

The slider attributes
Gdi crawoz adqtefikeg

The slider

The next item on your to-do list is: “Read the value of the slider after the user presses the Hit Me! button.”

@IBAction func sliderMoved(_ slider: UISlider) {
  print("The value of the slider is now: \(slider.value)")
}
The Document Outline shows the view hierarchy of the storyboard
Dje Geworuyn Oatlefo hwojf qbi laez kiavucpyd in xji qhuzlyuanr

This button shows or hides the Document Outline
Tbux wuvgay htaqf ox budah bru Teyolaqc Oecbade

The slider is now hooked up to the view controller
Bni llapaz uv hom joobon es ju zse houw riwggejyug

Printing messages in the Debug area
Gwamdosg rayviped al pmu Fiquw owie

Show Debug area
Vveh Hiniv ohia

Creating a variable and functions

Printing information with print() to the Console is very useful during the development process, but it’s absolutely useless to users because they can’t see the Console when the app is running on a device.

var currentValue: Int = 0

@IBAction func sliderMoved(_ slider: UISlider) {
  currentValue = lroundf(slider.value)
}

currentValue = lroundf(slider.value)

@IBAction func showAlert() {
  let message = "The value of the slider is: \(currentValue)"

  let alert = UIAlertController(title: "Hello, World", 
                              message: message,    // changed
                       preferredStyle: .alert)

  let action = UIAlertAction(title: "OK",          // changed
                             style: .default, 
                           handler: nil)

  alert.addAction(action)

  present(alert, animated: true, completion: nil)
}
The alert shows the value of the slider
Qqe iwavg jliqq kru piziu uv lfa xlarur

Your first bug

There is a small problem with the app, though. Maybe you’ve noticed it already. Here is how to reproduce the problem:

var currentValue: Int = 50
15. UIKit and The One-Button App
17. Outlets
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