Programmatically embed multiple UISlider and UILabel controls in UITableViewCells

Question

I'm an iOS Dev newbie and would appreciate any help with how to create multiple UISlider and UILabel controls in a UITableView programmatically, as illustrated:

As seen in the mockup pic above, I only need the relevant label text to be updated when corresponding slider (on the same row) is changed.

Using the code below, I'm able to create multiple slider controls dynamically for each row in my table view but am not able to display the corresponding label and update this label text when the slider's value is changed.

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

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ControlRowIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:ControlRowIdentifier];


        CGRect frame = CGRectMake(0.0, 0.0, 100.0, 10.0);
        UISlider *slider = [[UISlider alloc] initWithFrame:frame];
        [slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
        [slider setBackgroundColor:[UIColor clearColor]];
        slider.minimumValue = 1;
        slider.maximumValue = 70;
        slider.continuous = YES;
        slider.value = 30;

        cell.accessoryView = slider;
    }
    NSUInteger row = [indexPath row];
    NSString *rowTitle = [list objectAtIndex:row];
    cell.textLabel.text = rowTitle;

    return cell;
}

//Does not work
- (IBAction)sliderAction:(id)sender {
    UISlider *sliderControl = (UISlider *)sender;
    int SliderValue = (int)roundf(sliderControl.value);
    UILabel *sliderLabel;
    sliderLabel.text = [NSString stringWithFormat:@"%d", SliderValue];
    [self.view addSubview:sliderLabel];
}

Answer 1

You should move the slider creation out of the if instruction:

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

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ControlRowIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
               reuseIdentifier:ControlRowIdentifier];
    }
    CGRect frame = CGRectMake(0.0, 0.0, 100.0, 10.0);
    UISlider *slider = [[UISlider alloc] initWithFrame:frame];
    [slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
    [slider setBackgroundColor:[UIColor clearColor]];
    slider.minimumValue = 1;
    slider.maximumValue = 70;
    slider.continuous = YES;
    slider.value = 30;

    cell.accessoryView = slider;

    NSUInteger row = [indexPath row];
    NSString *rowTitle = [list objectAtIndex:row];
    cell.textLabel.text = rowTitle;

    return cell;
}

Answer 2

I see several issues here.

1. You never instantiate any label to display the slider value. You need to instantiate this and get it into the table cell's view hierarchy.
2. You set the UITableViewDataSource as the target for the slider action. This makes it difficult to know which label corresponds to which slider. You should customize UITableViewCell, either through subclassing or adding a UIView subclass to the contentView . The slider should target the cell or view subclass and the label updating could happen there. There are other ways to do this too.
3. In your sliderAction: method, you never initialize the sliderLabel variable. You need to set it to the UILabel instance corresponding to the cell, as above.