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!

Answer 1

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;
}