ios - UITableViewCell 被重用并在 UIView 中显示错误的绘图

标签 ios swift uitableview uiview

我已经遇到这个问题好几个星期了,我想我无法解决它。

我有一个 tableView,它有自定义的 tableViewCell,并且它们充满了数据。 tableViewCell 有两个 UILabel 和一个 UIView

当我多次滚动 UIView 上的绘图时出现问题,我认为它们被重绘了。我知道这种行为是因为单元格的重用,但我什至无法找到问题的根源。

Before scrolling

UIViews show perfectly when opening the app

After scrolling

UIViews get overlapped after scrolling

我的 UITableViewcellForRowAtIndexPath 是:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let CellIdentifier = "Cell"

    let cell: CustomTableViewcell = self.tableView.dequeueReusableCellWithIdentifier(CellIdentifier, forIndexPath: indexPath) as! CustomTableViewcell
                                  //self.tableView.dequeueReusableCellWithIdentifier(CellIdentifier) as! CustomTableViewcell

    cell.prepareForReuse()

    self.createUIForCell(cell)
    self.configureCell(cell, indexPath: indexPath)

    print("\t\(parsedData[indexPath.row].stationName): \(parsedData[indexPath.row].freeBikes)")

    return cell
}

func createUIForCell(cell: CustomTableViewcell) {

    cell.distanceLabel.textColor      = UIColor.whiteColor()
    cell.distanceLabel.backgroundColor = UIColor.clearColor()
    cell.bikeStationLabel.textColor   = UIColor.whiteColor()
    cell.bikeStationLabel.backgroundColor = UIColor.clearColor()
}

func configureCell(cell: CustomTableViewcell, indexPath: NSIndexPath) {

    let stations = parsedData[indexPath.row]

    if indexPath.row % 2 == 0 {
        cell.stackView.arrangedSubviews.first!.backgroundColor = cellBackgroundColor1
        cell.progressView.backgroundColor = cellBackgroundColor2
    } else {
        cell.stackView.arrangedSubviews.first!.backgroundColor = cellBackgroundColor2
        cell.progressView.backgroundColor = cellBackgroundColor1
    }

    cell.progressView.getWidth(stations.freeBikes, freeDocks: stations.freeDocks)

    cell.getLocation(stations.latitude, longitude: stations.longitude)
    cell.getParameters(stations.freeBikes, freeDocks: stations.freeDocks)
    cell.bikeStationLabel.text  = stations.stationName

    if stations.distanceToLocation != nil {
        if stations.distanceToLocation! < 1000 {
            cell.distanceLabel.text = String(format: "%.f m", stations.distanceToLocation!)
        } else {
            cell.distanceLabel.text = String(format: "%.1f km", stations.distanceToLocation! / 1000)
        }
    } else {
        cell.distanceLabel.text = ""
    }
}

对于前面提到的在我的自定义单元格中的 UIVIew,我已经为它创建了一个单独的类来处理绘图,它看起来像这样:

import UIKit

class ProgressViewBar: UIView {

var freeBikes = 0
var freeDocks = 0
var text: UILabel? = nil
var text2: UILabel? = nil

func getWidth(freeBikes: Int, freeDocks: Int) {

    self.freeBikes = freeBikes
    self.freeDocks = freeDocks
}

override func drawRect(rect: CGRect) {

    let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: rect.width * (CGFloat(freeBikes) / (CGFloat(freeBikes) + CGFloat(freeDocks))), height: frame.height), cornerRadius: 0)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.CGPath
    shapeLayer.strokeColor = UIColor.whiteColor().CGColor
    shapeLayer.fillColor = UIColor.whiteColor().CGColor

    self.layer.addSublayer(shapeLayer)

    drawText(rect)
}

func drawText(rect: CGRect) {


    if freeBikes != 0 {
        text?.removeFromSuperview()
        text = UILabel(frame: CGRect(x:  2, y: 0, width: 20, height: 20))
        text!.text = String("\(freeBikes)")
        text!.textAlignment = NSTextAlignment.Left
        text!.font = UIFont(name: "HelveticaNeue-Thin", size: 17)
        text!.backgroundColor = UIColor.clearColor()
        text!.textColor = UIColor(red: 1/255, green: 87/255, blue: 155/255, alpha: 1)

        self.addSubview(text!)
    }

    text2?.removeFromSuperview()
    text2 = UILabel(frame: CGRect(x: rect.width * (CGFloat(freeBikes) / (CGFloat(freeBikes) + CGFloat(freeDocks))) + 2, y: 0, width: 20, height: 20))
    text2!.text = String("\(freeDocks)")
    text2!.textAlignment = NSTextAlignment.Left
    text2!.font = UIFont(name: "HelveticaNeue-Thin", size: 17)
    text2!.backgroundColor = UIColor.clearColor()
    text2!.textColor = UIColor.whiteColor()
    self.addSubview(text2!)
}
}

View 需要绘制两个参数,我使用 func getWidth(freeBikes: Int, freeDocks: Int) 方法从 `ViewController.如果需要任何其他代码,您可以查看 repo .

最佳答案

问题是,当您再次调用 drawRect 并且不清除已绘制的矩形时,重新使用该单元格。在绘制另一个之前清除它。

关于ios - UITableViewCell 被重用并在 UIView 中显示错误的绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39078466/

相关文章:

ios - 如何更新之前选择的 CollectionView 单元格和现在的 Swift 4?

ios - 生成方波、锯齿波和正弦波样本并写入 AIFF 文件 - 大端问题

ios - UISwitch 关闭/打开 - 图像不会出现

ios - 使用 KIF 测试异步 UITableView

ios - 如何以编程方式将 UITableView 样式从普通样式转换为组样式

ios - 通知 UITableView dataSource 的变化

ios - 如何从另一个 View Controller 实例化导航 Controller ?

ios - 手势识别器从不触发

ios - 交付带有内容的核心数据应用程序的最佳实践?

swift - 选择 Voice Over View 中的第一个元素