Change your app UI based on UISwitch state [Code Tutorial]

uiswitch_featureNote: This week’s tutorial is based on the last tutorial, “Build your own clock app for iPhone.” You can either do that tutorial first, or download the code from that tutorial here: TiP_Clock.

Last week I showed you how to build a custom clock, so today we are going to build on that. For an app you may be working on (or wanting to start working on), you may want to use a switch that controls whether or not something does or doesn’t happen. So what better way to show that then add a night and day mode to our simple clock app from last week! To begin, simply open the project from last week, or check out the note above for a download link to that full project.

header/******** 1 ********/

First thing we need to do is head into our TCViewController.h file and add both an IBOutlet and IBAction. First we are going to add our IBOutlet for our UISwitch, which I’ve named “nightSwitch” (you can name whatever you want, though). That’s all we need to do to that for now.

/******** 2 ********/

Now we are going to add our IBAction. I named the IBAction “nightSwitchDidChangeValue”, however – just as with the IBOutlet – you can call this whatever you want. I just tend to name things based on what they are doing.

Add SwitchNow add a switch in the Main.storyboard file. I added a horizontal center constraint (covered in the custom clock tutorial), and that’s all. Now we need to connect our IBOutlet and IBAction.

Connect IBOutlet Connect IBActionAs you can see in the screenshots above, you need to drag from the dot by nightSwitch to our Switch, as well as from nightSwitchDidChangeValue over to our switch. When you do the latter of the 2, you need to select “value changed” from the list that comes up when you release on the Switch. Now that we are done connecting all our things, we can get on to actually implementing the code. But first…

Info_plistHead on into your Info.plist file, located in the “Supporting Files” group on the far left of Xcode in the file hierarchy. Add a line by selecting one and pressing enter, and start typing “View controller-based status bar appearance” and set the boolean to NO. This will allow us to change the Status Bar’s color.

viewDidLoad/******** 1 ********/

Now, heading into our TCViewController.m, we can add some code. At the to pin our viewDidLoad, we need to add self.nightSwitch.on = NO. This will turn our switch off every time we load the app so that it correlates with how we set our “day” colors to load every time the app is open.

nightSwitchDidChangeValue/******** 1 ********/

Next we implement our nightSwitchDidChangeValue IBAction and we can finally start adding some of the code for our night mode switch.

/******** 2 ********/

First we are going to check of the switch was turned on, so we type an if statement with (self.nightSwitch.on) as our condition. As you can guess, that means that the code inside will run if the switch is turned on. 

/******** 3 ********/

Here we start adding what we want to happen when our night mode is turned on. We want the clock to turn white, so we type self.clockLabel.textColor and set it equal to [UIColor whiteColor]. You can probably tell that this means our clock will become white. Then we type self.view.backgroundColor and do the opposite, making it set to blackColor. Simple stuff. Lastly, we want our status bar to turn white, so we type [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent]. This will make our Status Bar use the light content, or the white status bar.

/******** 4 ********/

Here we just use “else” because if it isn’t on, it is off, there is no in between. However, if you wanted to check for sure that it is turned off, you could use else if (self.nightSwitch.on = NO).

/******** 5 ********/

Inside of here, we basically do everything the same except just flip the colors. I copy/pasted what we did in the first one and switched the colors. For the StatusBarStyle, however, you can’t use “DarkContent”, you have to instead set it to UIStatusBarStyleDefault. The default style is the dark status bar.

That’s all, run the app and once it is running in the simulator, you can just change the switch and boom, it will switch the colors of the app. Of course there are many, many uses for switches, but this is just a start! For the source to this tutorial, you can check out the UISwitch-Tutorial branch of the TiP_Clock project on GitHub here: TiP_Clock.

What do you think of the tutorial? Anything you’d like to see next? Put your suggestions/requests in the comments, or tweet me to me @TiP_Kyle.







Tags: , , , , , ,

  • Andrew Min

    I really like these posts. Keep them up! They’re fantastic and intuitive. Thanks man

    • Kyle Frost

      I’m glad to hear that! Are there any specific tutorials you’d be interesting in seeing me do?

      • Andrew Min

        Nothing really specific; these general ones are fine.