-1

When the app first build, it seem like working just fine, please see pic where each pics is one cell in side the table view enter image description here enter image description hereenter image description here . (I am working to place them properly) The problem that I am facing is that: once I scroll down and scroll up again. Each cell data got massed up. Please see pics. Which I still have no idea what is wrong in my coder after hours searching online and decoding. please point out what I am missing. I have attached my code. I am using the tutorial code from Ray Wenderlich and adding the codes below in the func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell method Yes I am doing it each word as UIBotton to trigger an action. Adding

 "cell.contentView.subviews.filter { $0 is UILabel }.forEach { $0.removeFromSuperview() }"

didn't solve the issue. please give me a completed example?(working one) Thank you.

enter image description here

 let wholeSentense = artist.bio
    let whoeSentenseArray = wholeSentense.components(separatedBy: " ")
    var xPos = CGFloat(0)
    for element in whoeSentenseArray {
    var button = UIButton()
    button.setTitle(element, for: UIControlState.normal)
    button.titleLabel?.font = UIFont.systemFont(ofSize: 15)


    let buttonTitleSize = (element as NSString).size(attributes: [NSFontAttributeName : UIFont.boldSystemFont(ofSize: 15 + 1)])
    button.frame.size.height = buttonTitleSize.height * 1.5
    button.frame.size.width = buttonTitleSize.width
    button.frame.origin.x  += xPos
    xPos = xPos + buttonTitleSize.width + 10


    button.setTitleColor(UIColor.black, for: .normal)
    button.addTarget(self, action: #selector(buttonAction), for: UIControlEvents.touchDown)
    cell.addSubview(button)

    }


    return cell
  }
  func buttonAction(sender: UIButton!) {
    print("\n\n Title  \(String(describing: sender.titleLabel?.text))  TagNum    \(sender.tag)")
   // print("Button tapped")
  }

enter image description here enter image description here

ScsD
  • 81
  • 1
  • 1
  • 8
  • 2
    Table cells are reused. If you keep adding views to the cell when you dequeue it, they'll just overlay one another each time that cell is reused. – particleman Jul 27 '18 at 23:00
  • @particleman, How should I implement them to achieve my goal, where I can scroll the cell and each cell with the expected data? – ScsD Jul 27 '18 at 23:24
  • The most common approach would be to define the cell UI in a Storyboard or a XIB, so that all of the UI elements are initialized and connected by the system. You should keep `cellForRowAt:` as lean as possible: just populate your cell with data, don't try to build it. – particleman Jul 27 '18 at 23:38
  • @particleman for this particular goal in mind, don't think using a Storyboard is a good idea to achieve the requirement. – ScsD Aug 19 '18 at 08:53

1 Answers1

1

I think you better move this complicated logic into a UITableViewCell subclass. Here's a rough skeleton:

class MyCustomTableViewCell : UITableViewCell {
    @IBOutlet var imageView: UIImageView!
    var sentence: String! {
        didSet { <add your logic here> }
    }
}

There are lots of resources on SO and other websites about how to create custom table view cells, such as this.

Anyway, whichever way you choose to do it, you need to be aware that table view cells are reused. You need to first remove all labels before adding them:

cell.contentView.subviews.filter { $0 is UILabel }.forEach { $0.removeFromSuperview() }
Sweeper
  • 145,870
  • 17
  • 129
  • 225
  • adding the code of " cell.contentView.subviews.filter { $0 is UILabel }.forEach { $0.removeFromSuperview() } " doesn't solve the issue. – ScsD Aug 14 '18 at 19:28
  • @StackExangeLearner you should put it right before the code snippet you showed in the question. – Sweeper Aug 17 '18 at 01:42
  • doesn't solve the issue? Do I need to use the subclass logic to make it to work? I am avoiding it now since I need to make it working first then clean up. – ScsD Aug 19 '18 at 08:35