0

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:

enter image description here

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.

2 Answers2

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;
}
bbarnhart
  • 6,620
  • 1
  • 40
  • 60
  • And than change the position for the progress? –  May 11 '12 at 20:59
  • You could have the full line and move the origin, or you could just change the frame of the line with a large height or width. – bbarnhart May 11 '12 at 21:06
  • Is this assuming the full width is 320px? Because I don't see how changing the height of the frame would make it move. Thanks for your help! –  May 11 '12 at 21:15
  • The width would be 1 or 1.5 pixels. The height would grow from 0 to 320 over a period of time. You said you wanted a vertical line. – bbarnhart May 12 '12 at 02:39
  • Yes, but the size of the bar should not change. Only the position. It's like having an audio track played and showing the part that is being played at every moment –  May 12 '12 at 14:10
  • OK. I updated the code to show a vertical bar moving across the screen. As progress is made you need to adjust the position of lineView. – bbarnhart May 12 '12 at 17:20
0

You can use UISlider to show the progress of your events or activity(not so clear of your code) and customize it according to your needs.You can look at the UICatalog sample code by Apple to get to know-how of customizing a UISlider along with other elements or UISlider Tutorial

Abhishek Singh
  • 6,068
  • 1
  • 23
  • 25
  • Can the UISlider be customized that much though? The line in my example covers many UI elements –  May 11 '12 at 21:03
  • Yeah it can be customized and it's frame will be equal to the size you have set.I have tried it before. – Abhishek Singh May 12 '12 at 06:12