iPhone optimize

Create your own Apple iPhone Clock App

Continuing his basic iOS development tutorial, Todd Moore shows us how to create a simple iPhone Clock App.

In this post, we will make an iPhone Clock App which displays the current time on the screen. This is a continuation from our first Hello World App. Open up the previous Hello project and I'll show you how to get programmatic access to the label so that the text can be modified within our ViewController class. In order to do this you will need to connect the label in interface builder to a property of the ViewController class.

Say goodbye

Open ViewControler.xib and use the toolbar to show the assistant editor. (Figure A)

Figure A

The secondary editor is displayed next to the ViewController interface and should automatically open the header file for the ViewController class.

Hold down the control key and then click and drag from the label to inside the view controller header file as shown in Figure B.

Figure B

Once the arrow reaches inside the interface definition you can let go to receive an Outlet connection popup. Set the name of the control to "label" and keep everything else the same as shown Figure C.

Figure C

Xcode will automatically add a property definition for you inside of the header file and also stub out an implementation in the source file. Open up the ViewController.m source file and verify that you can manipulate the label by changing its text to "Bye" in the viewDidLoad method. (Figure D)

Figure D

Run the app (Figure E) and it should now say Bye instead of Hello.

Figure D

Start the clock

Now let's do something a little more interesting and display the current system time. Add the following code (Figure E) into the source file to create an updateLabel method:

Figure E

This method will allocate an NSDateFormatter object with the date format of "hh:mm:ss" and then use that with the current date to set the label. The updateTime method is then called again using performSelector with a delay of one second. This makes sure the label keeps getting updated and doesn't just get set one time.

The last step (Figure F) is to call updateTime from the viewDidLoad method:

Figure F

Build and run and you should now see (Figure G) a full screen clock being updated every second.

Figure G

Your new clock app is a lot easier to read than the time contained in the status bar along the top. In my next tutorial, I'll show you how to take this code and turn it into a stopwatch app.

Also read:

About

Todd Moore is an app developer, technology host, and published author. His most popular application, White Noise, has been downloaded by millions of sleep-deprived customers. Although his app has received critical acclaim in the press, the biggest co...

12 comments
naksh123
naksh123

i want to develop smart schedular app in iphone give me some idea.

RTO3
RTO3

Cool!

Now I would like to ad 5 minutes to the time so that the clock is set 5 minutes ahead. Does anybody know how I do that? 

brendanq
brendanq

Note that in xcode 4.5 property accessors work slightly differently so you have to say [pre]_label.text = ...[/pre] with an underscore at the start. It's something to do with automatically created getter and setter methods without having to synthesize them manually. I'm sure I'll know what that sentence means after a few more tutorials ;-)

problems
problems

none of the - (void) s work (e.g. - (void) updateTime

problems
problems

- (void)viewDidLoad does not work for me. I have Xcode 4

jkenny6
jkenny6

Is this right? Surely not a good way to go. I don't know objective-c but recursion is recursion yes?

gmeader
gmeader

In this article, wherever you see updateLabel, it should be updateTime. The sentence before Figure E contains this error, as does Figure F. [self updateLabel]; should be [self updateTime];

Zzznorch
Zzznorch

I have been a Windows based developer for years, working the last six with C# and Visual Studio. My business partner gave me a brand spanking new MacBook Pro Retina for my 50th in June and suggested I might want to play with iOS development. Thanks to your timely series, I finally had a chance to launch the Xcode 4.4 application and do something with. I am glad to see a lot of similarities between VS and Xcode's design interface as that is certainly giving me a break on the learning curve. On a side note, I have been following this article there appears to be a typo. Under the section "Start The Clock" it says to create an "updateLabel" method but the name in figure E is "updateTime". Figure F references "updateLabel" which generates an error in Xcode since the method has been called "updateTime" in figure E. I simply changed the code in figure F to "updateTime" and it works fine.

Charles Bundy
Charles Bundy

For this code series! I have downloaded XCode, signed up as an Apple iOS developer and managed to get through the first Hello World example. Part of what turned me off was having to buy a Mac to do development. If you are looking at less expensive options than Apple's hardware offerings and you have a core2duo LGA775 chip lying around the following board from ASUS makes a great budget development system. http://www.newegg.com/Product/Product.aspx?Item=N82E16813131794 To go this route you do need access to a running Mac so that you can buy OSX from Apple and build an install USB. On the development toolchain side - Make certain you have the latest version of XCode, otherwise you will get fun messages saying it doesn't recognize iOS 5.1 as a valid target. This means you need OSX Lion or better. At some point you will want to run code on actual hardware. Let XCode build a general development target certificate. Trust me it is much easier to do this than trying to follow the Apple tutorial! The only other thing I noticed in trying to do a specific bundle, was that you have no way of deleting AppID's. Don't get too crazy and create a bunch of AppID's because you will be stuck with them ... forever. Can't wait to expand Hello with clock code!

Mark W. Kaelin
Mark W. Kaelin

Have you downloaded XCode and begun programming for iOS yet? What has been your experience? Is there a particular area that is giving you trouble?

karotra
karotra

change it [self updateLable] to [self updateTime];