Build your own WWDC Countdown app for iPhone [Code Tutorial]

WWDC_Tut_FeatureWWDC dates have been announced, and you’ve seen some opinions on what may be shown there. What about a countdown? Every time Apple announces a new event date, I fire up Xcode, open my ol’ stock Countdown project code, and drop in some new images as well as the updated date and put it on my phone. I love keeping a little countdown on how long until Apple’s next event. So let’s not waste any of our countdown time! As usual, start of by creating a Single View Application, and let’s get started…

Adding ImagesFirst off, this app is going to have an icon and a background image. You can grab those here: Background, Icon. Drag and drop those into your Xcode project, I choose to put them in the Supporting files group. If you don’t have them in the folder of your Xcode project, I would select the “Copy to project folder” option at the top of the panel that will slide down upon dropping those in.

Add ImageView

Note: When creating this app originally I chose “Universal” not “iPhone” for device type, so files are named in accordance. It should be easy to follow if you chose only iPhone or iPad, however.

Let’s go into our Main_iPhone.storyboard file and get it set up. First we are going to drag and drop an Image View onto the view so that we can add our background image.

Select ImageNow we are going to actually set the image. Assuming you downloaded the one I linked above and named it the same, all you have to do is going to the top right in the Attributes inspector and type in the image name, which was “WWDC_Background.png.” That’s all you have to do for the image background, seeing as we aren’t going to have to manipulate that at all.

Add First LabelNow we are going to add a Label. Just search Label in the bottom right and drag and drop it onto the view. Over in the right hand side in the Attributes inspector, I changed Lines to 2 and the size of the font to 24, as well as (you’ll see in the next picture) I changed the font to Helvetica Neue UltraLight to get more in the iOS mood. For simplicities sake, I also made this say “WWDC ’14 Keynote Countdown”.

Label AttributesNow add a second Label below it, and set the text to “00d:00h:00m:00s” not “00h:00m:00s” as shown in the image. I forgot to add 00d: for proper size estimating. I set both to the font of “Custom” with Helvetica Neue UltraLight chosen. The “WWDC…” is size 24 and centered, and the countdown clock is 36 and centered as well. That is all you have to do for now here, because we haven’t made our outlet to connect.

Add IconBecause I’m just making this application for Retina displays iPhone, my icon size is 120px by 120 px. This fits into the section that you see above. To set your icon, go to your Images.xcassets > AppIcon and drag our WWDC_Countdown_Icon.png that I linked above to the @2x iPhone App iOS 7 60px (60 times 2 is 120!) and drop it on to set our icon. Now to some code, for now…

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

In our CountdownViewController.h we are going to add what is going to control our countdown. First we need to declare the NSDate that we are going to set as our destinationDate.

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

Then add an IBOutlet for a UILabel that I named countdownLabel, this will be our 00d:00h:00m:00s label.

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

Then our timer so that it updates every second. Those three things are that simple, just type what you see above!

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

Now we declare our method that will be running in order to update our countdownLabel with the current time until the destinationDate.

Connect LabelNow, before we head into our .m file, we need to head on over back to our Main_iPhone.storyboard file and connect the IBOutlet of our UILabel for out countdownLabel. Once you have that connected, we can go ahead and getting it working!


/******** 1 ********/

Go up the the viewDidLoad in CountdownViewController.h. Here we are going to set our destinationDate to the date of when our event is, which for WWDC ’14 Keynote is June 2nd, at 1:00PM EST (you’ll need to know the time for your own timezone). To do that, set destinationDate equal to [NSDate dateWithTimeIntervalSince1970:1401728400]. Now, you’re probably asking, where in the world did I get that number? That’s easy, you use an epoch time converter, which I found here: Epoch Converter.

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

Now we need to set our timer. Set timer to [NSTimer scheduleTimerWithTimeInterval:1.0 target:self selector:@selector(updateLabel) userInfo:nil repeats:YES]. This sets it to refresh every second, and run updateLabel so that our label reflects the refresh.


/******** 1 ********/

Here we are going to start our -(void)updateLabel method we declared in the .h. In here we will update our label to show the time that we are counting down until.

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

Here we are creating an NSCalendar to use in order to count days, hours, minutes, and seconds. This will allow us to use something built into iOS known as CalendarUnits, which you’ll see in the next step.

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

Now we are going to create ints for the units that we need. To do this you simply need to type int units = NSDayCalendarUnit | NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit. This gives us an int for each of those in a readable form.

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

Now we are going to create our components of our date use the units that we just declared. Create the components and set the components to our units int and the fromDate is “now” or [NSDate date] and the toDate is our destinationDate we declared up in our viewDidLoad.

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

Now we are actually setting our label. To do so, type [countdownLabel setText:[NSString stringWithFormat:@"%ld%c:%ld%c:%ld%c:%ld%c", (long)[components day], ‘d’, (long)[components hour], ‘h’, (long)[components minute], ‘m’, (long)[components second], ‘s’]]. What this does, going through piece by piece, is set our label as the countdown remaining time. In the stringWithFormat you will put %ld for a (long)int, and the %c is for a character (char). The : between just is to organize it better. After you add the correct amount of %ld%c’s, you need to add each after the last quote. As you can see, it is pretty straight forward, just typing (long)[components hour], ‘h’, etc. The (long) is now needed to play nice with the 64-bit format of the A7 processor.

After that, you’re done! Run the app, and it’ll run in the simulator and you can see how long until the WWDC keynote. If you have an Apple Developer account with the $99 contract, you can also put it on your device as I have. If you want to download the source code, as always that is available over on GitHub here: WWDC_Countdown. Let me know what you think in the comments, or if you have any requests or suggestions for tutorials be sure to tweet them to me @TiP_Kyle.









Tags: , , , , , ,

  • ZachApps

    Well… it’s here! Countdown to WWDC 2014 has now officially been released on the App Store!

  • Ryan Verbeek

    Does it work when i just typ all the code over?

  • mike

    Been using this code to try to create a day countdown, was wondering whether you could help with a problem. keep getting the failed message with something to do with the .h file and what to put after

    “-(void)updateLabel” any ideas?