Custom UITableViewCell with centered UISlider and two images

Question

I'd like to programmatically create a custom UITableViewCell with a UISlider in the center and two images at either end. For an example see the Brightness setting on any iOS device. It has a UISlider in the center and two sun-like images at either end (one small and one large). Here's basically what I'm talking about:

What's the easiest way to programmatically create this custom UITableViewCell?

Cheers!

Answer 1

The easiest way to add the images at either end of a UISlider is to use setMinimumTrackImage:forState: and setMaximumTrackImage:forState:.

To add a UISlider to a UITableViewCell, just add it as a subview of the cell's contentView, and set the slider's frame (or bounds and center) and autoresizingMask as appropriate.

    [cell.contentView addSubview:slider];
    slider.bounds = CGRectMake(0, 0, cell.contentView.bounds.size.width - 10, slider.bounds.size.height);
    slider.center = CGPointMake(CGRectGetMidX(cell.contentView.bounds), CGRectGetMidY(cell.contentView.bounds));
    slider.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;

Ignore the cell's imageView, textLabel, and detailTextLabel properties; if you never access these properties, the cell may not even bother to create the corresponding views.

Answer 2

You will have to subclass UITableViewCell, then add a UISlider subclass to the cells contentView. Finally you will have to override this on the UISlider:

-drawRect() 

To include those 2 images.