UITableViewCell redrawing on scroll - ios

Question

I have a UITableView that contains cells with a slider and two labels, each time a slider goes out of view it appears to be drawn again on top of the current content.
Here is a gif explaining what I mean.
http://i.imgur.com/4dYtyJy.gifv
And here is the relevant code.
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let CellIdentifier: String = "\(indexPath.row) - \(indexPath.section)"
var cell: UITableViewCell! = self.tableView.dequeueReusableCellWithIdentifier(CellIdentifier)
if cell == nil {
cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: CellIdentifier)
}
let label = UILabel(frame: CGRect(x: 16.0, y: 16.0, width: 300, height: 30.0))
let percentageLabel = UILabel(frame: CGRect(x: 16.0, y: 0, width: 200.0, height: 30.0))
let slider = CustomUISlider(frame: CGRect(x: 16.0, y: 55.0, width: 300.0, height: 20.0))
slider.maximumTrackTintColor = Global().turqTint
slider.minimumTrackTintColor = Global().blueTint
slider.minimumValue = 0.0
slider.maximumValue = 1.0
slider.value = 0.0
slider.tag = indexPath.row
slider.setThumbImage(UIImage(named: "sliderThumbImage"), forState: .Normal)
slider.addTarget(self, action: "sliderValueChanged:", forControlEvents: .ValueChanged)
label.text = Array(selectedTypes)[indexPath.row].1
percentageLabel.text = "\(slider.value)"
percentageLabel.tag = indexPath.row
cell.tintColor = Global().tintColor
cell.addSubview(label)
cell.addSubview(slider)
cell.addSubview(percentageLabel)
return cell
}

Answer 1

I have had a similar problem. As Horst said in the comments, putting that snippet inside the block will do the trick:
if (cell == nil)
{
// Code that draws frames
}

Answer 2

If you insist to go with your way, you would like to have something more like
(Note: "\(indexPath.row) - \(indexPath.section)") this will create different CellIDs for every cell. What you would like to have is some common CellID to be able to benefit from the reuse logic of the TableView:
//Global constants for the View tags
let textLabelTag = 1
let percentageLabelTag = 2
let sliderTag = 3
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let CellIdentifier: String = "SomeUniqueID"
var cell: UITableViewCell! = self.tableView.dequeueReusableCellWithIdentifier(CellIdentifier)
if cell == nil {
cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: CellIdentifier)
self.createUIforCell(cell);
}
self.configureCell(cell, indexPath: indexPath)
return cell
}
Create the UI components for the cell and add them as subviews. This method will be called only once if the cell doesn't exist:
func createUIforCell(cell: UITableViewCell) {
let textLabel = UILabel(frame: CGRect(x: 16.0, y: 16.0, width: 300, height: 30.0))
textLabel.tag = textLabelTag
cell.addSubview(textLabel)
let percentageLabel = UILabel(frame: CGRect(x: 16.0, y: 0, width: 200.0, height: 30.0))
percentageLabel.tag = percentageLabelTag
cell.addSubview(percentageLabel)
let slider = CustomUISlider(frame: CGRect(x: 16.0, y: 55.0, width: 300.0, height: 20.0))
slider.tag = sliderTag
slider.maximumTrackTintColor = Global().turqTint
slider.minimumTrackTintColor = Global().blueTint
slider.minimumValue = 0.0
slider.maximumValue = 1.0
slider.setThumbImage(UIImage(named: "sliderThumbImage"), forState: .Normal)
slider.addTarget(self, action: "sliderValueChanged:", forControlEvents: .ValueChanged)
cell.addSubview(slider)
}
Update the UI with the correct data:
func configureCell(cell: UITableViewCell, indexPath: NSIndexPath) {
let textLabel: UILabel = cell.viewWithTag(textLabelTag) as! UILabel
textLabel.text = Array(selectedTypes)[indexPath.row].1
let slider: CustomUISlider = cell.viewWithTag(sliderTag) as! CustomUISlider
slider.value = 0.0
let percentageLabel: UILabel = cell.viewWithTag(percentageLabelTag) as! UILabel
percentageLabel.text = "\(slider.value)"
}
Note: It'll be cleaner if you've your own UITableViewCell subclass where the UI to be created (either in the code or in .xib)

Answer 3

You should subclass UITableViewCell and override prepeareForReuse method. With it you can set your cell to default mode.
-(void)prepareForReuse {
[super prepareForReuse];
//Reset your cell here to default state.
}