What you'll learn

Create a fully functioning option or preferences screen for an iOS app.

Course content

4 sections • 20 lectures • 4h 43m total length

Introduction to the course3:26
AppData Singleton9:33
In this video, we'll create a singleton class to store values which we will pass back and forth between the main app's class (or game engine) and the options screen.
Creating the Options Screen13:59
In this tutorial we will create the OptionScreen class to be used with either a UIView class called MainGame or with a Sprite Kit based class. We'll test the classes with simple NSLog statements, in both projects.
Using a UIButton to Launch the OptionScreen19:12
In this video we will create a UIButton to launch the OptionScreen from either a UIView project or Sprite Kit project. We will look at positioning and sizing the button differently based on the device. And we will also format the title of the button using a UIFont.
Opening and Closing the Options Screen21:54
In this vide we will finally show something in our Options Screen. To have a bit of fun, we will make the screen open overtop the main app (or game class) at about 95% of the device's height and width, leaving a border around the Option Screen to the class below. Then we will test using the touchesBegan method to see if the user touches outside of that border, if so we return to whatever class opened the Options Screen.
NSTimer / SKAction for Fading and Tinting20:30
This optional lesson teaches how to use a repeating NSTimer or SKAction (in the Sprite Kit project) to fade in a tinted background behind the Options Class. We'll do this using a UIView with the backgroundColor set to black, and changing the alpha value over time.

UISwitches19:14
In this tutorial, we will add two UISwitches to the Options Screen. These are simple toggles (off or on) which could be used to mute sound FX or set another preference between two settings. We will save the values of these switches in the AppData singleton so whenever the Option Screen is opened it initializes using the last settings saved.
UISliders17:17
In this video, we will set up a UISlider, this could be used to fine tune a setting in the game (for example, "slide to adjust the rate of acceleration in a plane game"). The minimum and maximum range can be any number (1 to 10, or 50 to 10,000), whatever works best for your needs. Again we will save the value of the slider to the AppData class so when the Options Screen is opened next, the slider is set back to the same value.
UISegmentedControls5:50
In this video, we will go over creating a UISegmentedControl. This style won't exactly "gel" with our project's look, but we will create a similar button group in the next video.
UIButton Groups17:56
In this video, we will create a group of UIButtons to select a hypothetical weapon to use. Turning one button on, will turn off the other buttons, similar to a UISegmentedControl group. As usual we will save this data to the AppData class.

The projects at the end of this Session have been uploaded to the Supplemental Materials tab.

Introduction1:25
UIPickerView with a Single Component Wheel24:18
In this tutorial, we will create a basic single column UIPickerView.
Using a Property List to Populate the UIPickerView13:31
In this tutorial, we will create a Property List to store data for our three wheel UIPickerView.
Switching to Three Component Wheels18:41
In this tutorial, we will switch the UIPickerView to use three component wheels, then populate it with data from Property List.
Spinning to Default Values Based on the Property List21:21
This tutorial will finish off the first version of our UIPickerView by setting default values when spinning the Level wheel (the first wheel). So whatever settings are specified in the property list file, will get spun to automatically when changing the first wheel. In this version, wheel 1 (the Level Names) and wheel 2 (the Level's type of Game Play) are locked together (the next version will change this).
Interconnected and Independent Wheels14:47
In this version we will polish off the UIPickerView and make it so the middle wheel only has three values (each mode of play is only listed once), and this wheel can also be set independent of the first wheel. In the previous version these two wheels would always spin to the same row.
Testing from the Main Class for a Change in the UIPickerView19:10
In this video we will complete the polished version of the UIPickerView and test for any changes to the picker in the main class.
Return to Game Button2:18
In this video we add a Return to Game button (in case it wasn't obvious that tapping outside the frame of the OptionScreen would go back to the game).

NSUserDefaults10:48
In this video, we will save our variables to the standard NSUserDefaults, and use them to retain those same preferences even if the app is closed and restarted.
NSNotifications8:41
In this tutorial, we will quickly look at NSNotifications as an alternate means of alerting classes to a preference change (and passing NSObjects between classes via the notification).

The finished project has been uploaded to the Supplemental Materials tab.

Requirements

Mac with Xcode 5 or higher

Description

In this tutorial, we will focus entirely on creating an Options or Preferences screen, using a Single View Application (or UIView based project) or Sprite Kit based project. We'll create UISwitches, UIButtons, UISliders, UISegmentedControls (and groups of buttons that act like segmented controls), and finally, a UIPickerView. Picker views can be made up of single or multiple columns of "spin-able" data (for example, Apple's Clock app has a Timer function made up of a double column UIPickerView).

In our hypothetical project we will create a 3-column picker view which populates itself using data from a Property List file. This data is split into a column for the level name ("Ocean, Bad Lands, etc"), a column for the mode of game play ("Kill X" number of enemies, "Collect X" number of coins, or "Beat the Clock") and third column for a number parameter to tweak the difficulty of each game mode (for example, you could add more time to the "Beat the Clock" mode or add more enemies to kill). We will make the wheels interconnected as well. So if you spin the first wheel to set the level, it will change the other two wheels to default to the settings defined in the Property List for the level. If you spin the middle wheel to change the game mode, it will automatically change the third wheel to use a different range of numbers (one mode of play might be best with a small range like 1-15, but another might work better in increments of ten, like 60-300).

All of our data is stored in a singleton AppData class, which serves as a go-between to use (or test) our preference variables with any other class. You'll see how to test any changes made in the OptionScreen class with the main game / app class.

The source projects are saved in increments throughout the tutorial series, and uploaded in the Supplemental Materials tab at notable breakpoints. You'll get both UIView and Sprite Kit based projects. The images to use are included as well.

Who this course is for:

Anyone already developing an iOS app or planning to.

What you'll learn

Explore related topics

Course content

Introduction and Initial Setup6 lectures • 1hr 29min

UISwitches, UISliders, UISegmented Controls and More4 lectures • 1hr

The UIPickerView8 lectures • 1hr 56min

NSUserDefaults and NSNotifications2 lectures • 19min

Requirements

Description

Who this course is for: