Build your own clock app for iPhone [Code Tutorial]

CustomClockImageUsing time in an app is something many users want to do. For whatever reason you may have, using the current time can be a vital backbone to your application. If you have an app idea that needs to use the time, but don’t know where to start: here you go. Or if you want to just build a nice looking clock app to throw on your phone, here is a simple way to accomplish that.

1Let’s start as usual by creating a “Single View Application.” I named the project TiP_Clock and gave it a class prefix of TC (for TiP_Clock). If you want to build your clock for the iPad or both the iPhone and iPad, then you will want to change the “Devices” section. I am just going to build this for iPhone, however.

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

First let’s head on in to our TCViewController.h and add a few things. Under the first comment what we are going to add is a UILabel as an IBOutlet and name it clockLabel. This is going to act as our label that will be updated with the current time. If you don’t have this label, you have nothing to show the clock with!

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

Now add a method that will be run in order to actually update the clockLabel in order to show the current time. Without this our label will stay at the same thing for the entire time, never updating to show the current time.

Add LabelNow go into our Main.storyboard and add your Label. To do this, you can go over to bottom right part in the search field and type “Label.” It should be the only thing left. After that, it is as simple as drag and drop. Drag the label to your view and drop it on.

Label SettingsHere are my label settings in case you want to set it the same as mine. Where I put “00:00:00 AM” you can put anything you want, actually, because it has no effect on it showing the proper time. I set it to that simply as a way of judging how big the time label should be so that when we set it to the custom time it will be the right size. I also set it to center and to the size of 46. You can change the font if you want and pick from the fonts iOS has built in, setting a custom font is a different tutorial.

Add ConstraintNow, if you want your clock label to stay in the same place when it is landscape and portrait, you will need to add constraints to it. In order to make it always stay in the center (which is what I’ve chosen to do for this tutorial), you need to click on the “Add New Alignment Constraints” at the bottom of the screen (see above image), and check “Horizontal Center in Container” and “Vertical Center in Container.” Then click the “Add 2 Constraints” button and like magic your label will stay in the center of the screen whether it is portrait or landscape on both 4 inch and 3.5 inch iOS devices.

Connect LabelNow, to make sure that our label is actually receiving our actions from our code, we need to connect the outlet. On the left, select your View Controller, then from the right side drag from the dot by clockLabel over to our label. This will connect our clockLabel so that we may manipulate it through code. Now we are done with our storyboard! Now let’s make some use out of that updateClockLabel method we declared earlier, so go on over to the TCViewController.m file…

updateClockLabel/******** 1 ********/

Go ahead and type out -(void)updateClockLabel and add our opening curly bracket that we will put our code inside. The method is “void” because there are no parameters that need to be returned.

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

Here we are going to set the format of our clockLabel. We declare a new NSDateFormatter and name it clockFormat for simplicity’s sake. We then set the date format for our clockFormat to “hh:mm:ss a”. Let’s explain that a little more… “hh” is for the hours, but lowercase like this is for 12 hour time, and two integers. Say at 9 AM it will show “09″ not “9″, so if you want just 9 you need to put just one “h” (don’t worry, 10, 11, and 12 will still show both). If you want 24 hour time, just uppercase them to “HH”. “mm” obviously stands for minutes, and “ss” stands for seconds. The “a” is for the AM or PM. If you don’t want AM or PM, just take that off the end.

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

Here we actually set our clock label to the current time. As you can see, we are setting the self.clockLabel.text to a date, so we need to get a string from the date. The current date is called by typing [NSDate date] and is formatted in the format we want using clockFormat. Now our clock will show the current time.

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

We want our clock to update every second, so we need to make this function update the label every second, right? To do this, you use performSelector:withObject:afterDelay. Our selector is @selector(updateClockLabel), our object is self, and our delay is 1.0 (for one second). This will make our clock label update every second.

If you were to go ahead and run the app right now, you’d notice that the time stays at 00:00:00 AM and doesn’t update. That’s because the method isn’t ever told to start running. To do this, we have to call it when the view is loaded.

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

To do this, head on to the top of our TCViewController.m to our viewDidLoad method and [self updateClockLabel]. This will run our updateClockLabel method on load, and from there on out it will be updated every second with the current time.

All done! You now have a simple clock app fully functioning for your iPhone. As usual, if you wish to download the source code for this project, you can head on over to GitHub and grab that here: TiP_Clock. All the comments above are included if you wish to follow along by actually reading the code in the project.

Let me know what you think of this tutorial or any suggestions/requests for tutorials you’d like to see in the comments below, or by tweeting me @TiP_Kyle. I’d love to hear any requests/suggestions!











Tags: , , , , , , , ,

  • MexicanTaco

    What up Kyle! You’re killin’ it with the tutorials. Personally I would like to see how to do an Alarm Clock feature on this app, that would be pretty cool. Keep doing yo thang!