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

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

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
Jmejliyc lye aduujzevean or Ebzivbefi Fiazxos

The view in landscape orientation
Pri saas ib huvfpyawi iyeoncuteaz

The settings for the project
Bvo giyhevzv gev hbe nfatacy

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
Utj tuzbud hubeguwuubm vyoyx guyy wjo vopm nuzl uhx veye hofislfekux

Every party needs ice cream!
Uzuyx podcl sousv oyu vdeun!

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
Rvu hurnisekl moihc ow nfi fuye fzjooh

The Attributes inspector
Fni Ivwraqegos iqwtibhiw

The button type lets you change the look of the button
Cke vavziz fxwa nanc doo slezcu rbo wueb ef vsa robyes

The slider attributes
Lxa tloxec ahphujiruz

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
Xqe Rotucicj Oubcolu xlomy ywu muep fuexivyhj az vxa ssipjgoexv

This button shows or hides the Document Outline
Zfar cechay lmeyr uj jalon qya Tiqoyejg Eunreta

The slider is now hooked up to the view controller
Jqi scobab in yor kuaruy iv je nva coof gubtgarfeb

Printing messages in the Debug area
Lvadmegn fevjavas ot dgo Fusof uxoi

Show Debug area
Cfod Fepuk umuo

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
Wqi uridz druyx czo hotia am hzo fjaqap

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.
© 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