Creating a textual clock for iOS

The example runningThere are eight million clock applications in the App Store… well, perhaps not quite that many, but there are a lot! If you’re new to Cocoa and iOS you might wonder how you can get going on some projects that are interesting for you. Why not a clock?

I was thinking of making a clock like this for myself just so I could get something I like to use. While the design of this particular clock isn’t great, it’s different than some others.

The first thing you’ll need to do is to wire up an NSTimer that repeats every second, just like a real clock. In your viewDidLoad call your setUI method (so that right from the beginning you’re displaying the current information, not waiting a second for your timer to fire and then updating the UI.

Here is the guts of the whole shebang… the UILabels, NSTimer and an Array to hold month names were defined in the header file. If you have questions, leave a comment below.


@synthesize leadingTime;
@synthesize trailingTime;
@synthesize amPmTime;
@synthesize monthLabel;
@synthesize dateLabel;
@synthesize dayLabel;
@synthesize yearLabel;
@synthesize clockTimer;
@synthesize monthNames;

- (void)dealloc
    [leadingTime release];
    [trailingTime release];
    [amPmTime release];
    [monthLabel release];
    [dateLabel release];
    [dayLabel release];
    [yearLabel release];
    [super dealloc];

- (void)setUI {
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
    NSCalendarUnit unitFlags = NSYearCalendarUnit | NSMonthCalendarUnit| NSWeekCalendarUnit | NSDayCalendarUnit | NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;            
    NSDate *date = [NSDate date];
    NSDateComponents *dateComponents = [calendar components:unitFlags fromDate:date];
    NSInteger hour = [dateComponents hour];
    NSInteger secs = [dateComponents second];
    NSInteger minute = [dateComponents minute];
    NSInteger day = [dateComponents day];
    NSInteger month = [dateComponents month];
    NSInteger year = [dateComponents year];
    NSDateFormatter *dateFormatter = [[[NSDateFormatter alloc] init] autorelease];  
    [dateFormatter setDateFormat:@"EEEE"];
    NSString *ampm = @"AM";
    if(hour > 11)
        ampm = @"PM";
    if(hour > 12)
        hour -= 12;    
    amPmTime.text = ampm;    
    NSString *hourString = [NSString stringWithFormat:@"%d",hour];
    if(hour < 10){
        hourString = [NSString stringWithFormat:@"0%@",hourString];
    leadingTime.text = hourString;    
    NSString *minString = [NSString stringWithFormat:@"%d",minute];
    if(minute < 10){
        minString = [NSString stringWithFormat:@"0%@",minString];
    trailingTime.text = minString;
    monthLabel.text = [monthNames objectAtIndex:month-1];

    NSString *dateString = [NSString stringWithFormat:@"%d",day];
    if(day < 10){
        dateString = [NSString stringWithFormat:@"0%@",dateString];
    dateLabel.text = dateString;
    yearLabel.text = [NSString stringWithFormat:@"%d",year];
    NSString *thisDay = [dateFormatter stringFromDate:[NSDate date]];
    thisDay = [thisDay uppercaseString];
    dayLabel.text = thisDay;
    if(secs == 58){
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:1];
        trailingTime.alpha = 0.25;
        trailingTime.transform = CGAffineTransformMakeScale(0.5, 0.5);
        [UIView commitAnimations];
    } else if(secs == 59){
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:1];
        trailingTime.alpha = 1.0;
        trailingTime.transform = CGAffineTransformMakeScale(1,1);
        [UIView commitAnimations];

- (void)updateUI {
    [self setUI];

#pragma mark - View lifecycle

- (void)viewDidLoad
    [super viewDidLoad];
    monthNames = [[NSArray arrayWithObjects:@"JANUARY", @"FEBRUARY", @"MARCH", @"APRIL",@"MAY",@"JUNE",@"JULY",@"AUGUST",
                  @"SEPTEMBER",@"NOVEMBER",@"DECEMBER",nil] retain];
    [self setUI];
    clockTimer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateUI) userInfo:nil repeats:YES];

- (void)viewDidUnload
    [monthNames release];
    [clockTimer release];
    [leadingTime release];
    leadingTime = nil;
    [trailingTime release];
    trailingTime = nil;
    [amPmTime release];
    amPmTime = nil;
    [monthLabel release];
    monthLabel = nil;
    [dateLabel release];
    dateLabel = nil;
    [dayLabel release];
    dayLabel = nil;
    [yearLabel release];
    yearLabel = nil;
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;

Related Posts Plugin for WordPress, Blogger...

Leave a Reply

Your email address will not be published. Required fields are marked *

nine − = 5

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>