Show progress line over existing elements

Question

Not sure if the title is very clear but I don't know the exact name for the thing I'm looking for. I have a gird that consists of UIButtons (basically a sequencer). I want a line similar to the vertical line in this image (between the 8th and 9th button of each row:

So basically when my grid is being played I want to indicate the progress. Any idea how I could do this? What kind of elements to use etc.

Answer 1

You can add a UIView that is very narrow, 1 or 1.5 pixels. Set the background color to white or a gradient. Add this view to the same subview as the buttons.

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(100.0, 0.0, 1.5, 320.0)];
lineView.backgroundColor = [UIColor whiteColor];
[parentView addSubview:lineView];

To show progress you'll need to know how much is left until completion. Take that value and divide by 320 to get the lineView height.

CGRect frame = CGRectMake(100.0, 0.0, 1.5, 0);
lineView.frame = frame; // 0% complete

frame = CGRectMake(100.0, 0.0, 1.5, 160.0);
lineView.frame = frame; // 50% complete

frame = CGRectMake(100.0, 0.0, 1.5, 320.0);
lineView.frame = frame; // 100% complete

That is the idea. Hope this help.

Update to vertical bar moving across the screen

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 1.5, 320.0)];
lineView.backgroundColor = [UIColor whiteColor];
[parentView addSubview:lineView];

As progress is made

- (void)progressWithValue(CGFloat)progress {
    CGRect frame = lineView.frame;
    frame.origin.x = progress;    // Change x position
    lineView.frame = frame;
}