Animating bars to rise as time increases

Question

I have some code that shows the time in separate parts (hours, minutes, seconds).

- (void)viewDidLoad
{
    [self updateTime];

    [super viewDidLoad];

    hourFormatter = [[NSDateFormatter alloc] init];
    hourFormatter.dateFormat = @"HH";
    minuteFormatter = [[NSDateFormatter alloc] init];
    minuteFormatter.dateFormat = @"mm";
    secondFormatter = [[NSDateFormatter alloc] init];
    secondFormatter.dateFormat = @"ss";
}

- (void)updateTime {

    [updateTimer invalidate];
    updateTimer = nil;

    currentTime = [NSDate date];
    NSDateFormatter *timeFormatter = [[NSDateFormatter alloc] init];
    [timeFormatter setTimeStyle:NSDateFormatterMediumStyle];

    hourLabel.text = [hourFormatter stringFromDate: currentTime];
    minuteLabel.text = [minuteFormatter stringFromDate: currentTime];
    secondLabel.text = [secondFormatter stringFromDate: currentTime];

    updateTimer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(updateTime) userInfo:nil repeats:YES];
}

I want to have three bars (for hours, minutes, seconds) that rise as time increases. Exactly like this cydia lockscreen tweak: http://patrickmuff.ch/repo/

EDIT: I should add that I am extremely new to Objective-C and very inexperienced so any tips/help is greatly appreciated!

You shouldn't create a new timer each time the timer runs its fire method (especially if you don't invalidate the old timer). — Wain, Aug 03 '13 at 10:00

Wain · Accepted Answer · 2013-08-04T10:50:08.063

You're currently getting text for the number of units (hours, mins, secs) - you need to get float or int versions of these numbers and use them to set the frames of your 'boxes' (which should be UIView instances).

The screenshot you show would actually be done by setting the view frames all to the same size and with a semi-transparent background colour. Then, each view would have a subview which is where you set the frame height using the unit values. And the subviews would have a fully opaque background colour.

Of course, this could all be done with core graphics instead of using views.

Ok, from your comment, nice, the background is good. In your XIB, create 3 views and position them over the background areas. Connect outlets to them so you can use them in the code. Set their background colours and their heights to zero.

In your code, each time you get the new unit values, modify the view frames (to increase the height and reduce the 'y' position), something like (written off the top of my head):

NSInteger hours = ...;

CGRect frame = self.hoursView.frame;

if ((NSInteger)frame.size.height != hours) { // check if we need to modify
    frame.origin.y -= (hours - frame.size.height);
    frame.size.height = hours;

    self.hoursView.frame = frame;
}

I have made a background for my app which already has the semi transparent boxes, so all I need is to get the white boxes on top to grow as time increases. I'm really new to all this, so how would I do all of this? Hope I'm not being too much of a bother! — user2397282, Aug 04 '13 at 10:44
Thank you so much! This has taken me way too long to get such a clear and helpful answer as yours!! Exactly what I wanted!! — user2397282, Aug 04 '13 at 11:17

Animating bars to rise as time increases

1 Answers1