UITableViewCell as progress indicator

Question

I am trying to set the whole cell background view to show a progress indicator.

if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];
    UIProgressView *progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
    cell.backgroundView = progressView;
    [progressView setFrame:cell.bounds];
}

this does not set the progress bar to the whole cell, but just the top part of the cell. Should I make the cell transparent some how ? How can I use the whole cell background to show progress with a color fill, while text on the cell remain visible ?

Do you have a picture of the result you want? Post it please — Ty Lertwichaiworawit, Aug 23 '14 at 11:57
@Ty_ I don't have a picture. I am trying to change background view of the cell to paint a portion of it with custom color, when there is some progress in the background calculation routine. — CodeWeed, Aug 23 '14 at 12:23
Without testing this I think you would want to add a subview to the backgroundView view of your cell that starts with zero width and then you would animate the change of bounds of that subview in a loop to change the width to match your progress. The text should appear on top of the changing width colored subview. You would have to do the arithmetic yourself instead of relying on UIProgressView. If the text does not appear then you need to move the cell.contentView back to the top of the cells view hierarchy. — Tim Quinn, Aug 24 '14 at 09:46

score 1 · Answer 1 · edited Jun 20 '16 at 17:48

1

I think other than progress View if you want you can use this in cellForRowAtIndexPath:

cell.backgroundColor = [UIColor clearColor];
CGFloat fillWidth = (75.0/100.0) * cell.frame.size.width;

CGRect rect = CGRectMake(0, 0, fillWidth, cell.frame.size.height);
UIView * view = [[UIView alloc] initWithFrame:rect];
view.backgroundColor = [UIColor purpleColor];
[cell.contentView addSubview:view];

//...

return cell;

edited Jun 20 '16 at 17:48

Marco

6,692
2
27
38

answered Aug 23 '14 at 12:33

Chetan

2,004
1
13
21

Moreover the text on the cell will be gone. – CodeWeed Aug 23 '14 at 13:27

score 1 · Accepted Answer · answered Aug 23 '14 at 15:24

You need to set the height of your UIProgressView and add it as a content subview for you cell, like this:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];
        UIProgressView *progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
        //setting height of progressView
        CGAffineTransform transform = CGAffineTransformMakeScale(cell.frame.size.width, cell.frame.size.height);
        progressView.transform = transform;
        [cell.contentView addSubview:progressView];

        //your text
        cell.textLabel.text = @"Cell Text Label";
        cell.detailTextLabel.text = @"Cell Detail Label";
    }

    return cell;
}

UITableViewCell as progress indicator

2 Answers2

Linked