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