微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

绘制的圆圈在我的表格视图单元格中快速出现两次

如何解决绘制的圆圈在我的表格视图单元格中快速出现两次

在我的 tableview 单元格中,我画了一个圆圈,代表正确答案的百分比,但我不知道为什么,这个圆圈只在某些设备上出现两次(例如 iPhone SE 1st gen 或 iPhone 12 Pro max)。

我不认为这是来自可重用单元格,因为它是直接来的,没有任何滚动。

请注意,我使用相同的方法在应用程序的另一个位置绘制了相同的圆圈,效果很好。

我在我的代码中深入搜索,我只为cell调用了一次这个方法,所以我得出的结论是这是一个错误......我在这里有点迷茫,我觉得我的代码还可以,所以我想我更多的是在寻找摆脱第二个圆圈的技巧。

我的百分比圆方法的类:

class PercentageCircle{
// Pattern singleton
public static let percentageCircle = PercentageCircle()



// Public init for pattern singleton
public init() {}

// Method to create and animate percentage circle
func createPercentageCircle(percentage: Int,circleRadius: CGFloat,circleXPosition: CGFloat,circleYPosition: CGFloat,circleWidth: CGFloat,circleColor: CGColor,backgroundColor: CGColor,animation: Bool) -> UIView? {
    
    // Percentage circle to be animated
    let percentageCircle = CAShapeLayer()
    
    // Add a view
    let roundView = UIView(frame:CGRect(x: circleXPosition,y: circleYPosition,width: circleRadius,height: circleRadius))
    
    // Start of the arc corresponds to 12 0'clock
    let startAngle = -CGFloat.pi / 2
    // Proportion depending of percentage
    let proportion = CGFloat(percentage)
    let centre = CGPoint (x: roundView.frame.size.width / 2,y: roundView.frame.size.height / 2)
    let radius = roundView.frame.size.width / 2
    // The proportion of a full circle
    let arc = CGFloat.pi * 2 * proportion / 100
    
    // Add the background circle
    let backgroundCircle = CAShapeLayer()
    // Add path for background circle
    let pathBackground = UIBezierPath(arcCenter: centre,radius: radius,startAngle: -CGFloat.pi / 2,endAngle: 2 * CGFloat.pi,clockwise: true)
    // Attributes of the background circle
    backgroundCircle.strokeColor = backgroundColor
    backgroundCircle.linewidth = circleWidth * 1.7
    // Put transparency to the center of the circles
    backgroundCircle.fillColor = UIColor.clear.cgColor
    // Atribute the path
    backgroundCircle.path = pathBackground.cgPath
    
    // Add the circle to the view
    roundView.layer.addSublayer(backgroundCircle)
    
    // Add the path of the percentage circle
    let circularPath = UIBezierPath(arcCenter: centre,startAngle: startAngle,endAngle: startAngle  + arc,clockwise: true)
    
    // Attribute the path to the percentage circle
    percentageCircle.path = circularPath.cgPath
    
    // Attributes of the percentage circle
    percentageCircle.strokeColor = circleColor
    percentageCircle.linewidth = circleWidth
    percentageCircle.lineCap = .round
    percentageCircle.fillColor = UIColor.clear.cgColor
    
    // Check if animation is true
    if animation {
        // Do not draw the circle
        percentageCircle.strokeEnd = 0.0
        // Draw the circle thru the animation
        animateCircle(percentageCircle: percentageCircle)
        // Add the circle to the the view
        roundView.layer.addSublayer(percentageCircle)
    } else {
        // Draw the circle
        percentageCircle.strokeEnd = 1.0
        // Add the circle to the the view
        roundView.layer.addSublayer(percentageCircle)
    }
    
    return roundView
}

// Method to animate the circle
private func animateCircle(percentageCircle: CAShapeLayer) {
    let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
    // Set the animation to the total value
    basicAnimation.tovalue = 1
    // Set the time of the animation
    basicAnimation.duration = 1
    // Set the circle to stay once the animation is completed
    basicAnimation.fillMode = .forwards
    basicAnimation.isRemovedOnCompletion = false
    
    // Add the animation to the percentage circle
    percentageCircle.add(basicAnimation,forKey: "keyAnimation")
}

}

我的单元格代码

func tableView(_ tableView: UITableView,cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "detailStatsCell",for: indexPath) as? StatsTableViewCell else {
        return UITableViewCell()
        }
    
    let kanjiCurrentKey = kanjiStatArray[indexPath.row]
    
    cell.kanjiLabel.text = kanjiStatArray[indexPath.row]
    
    cell.appearnceLabel.text = "Appearance : \(Stats.stats.countKanjiQuizz[kanjiCurrentKey] ?? 0)"
    

    if let statCorrect = Stats.stats.countKanjiCorrect[kanjiCurrentKey] {
        // Calculate the percentage
        let percentageKanjiCell = Int(100 * Double(statCorrect) / Double(Stats.stats.countKanjiQuizz[kanjiCurrentKey] ?? 1))

        // Set the correct answers if more than 1
        cell.correctLabel.text = "Correct : \(statCorrect)"

        // Set the correct percentage
        cell.percentageLabel.text = String(percentageKanjiCell) + " %"

        // Draw the circle with the percentage in it
        drawCircle(percentage: percentageKanjiCell,cell: cell)
    } else {
        // Set the correct answers to 0 and draw the circle at 0%
        cell.correctLabel.text = "Correct : 0"
        drawCircle(percentage: 0,cell: cell)
    }
    
    
    return cell
}

//MARK: Draw percentage circle with percentage label
private func drawCircle(percentage: Int,cell: StatsTableViewCell){
    // Calculate the circle radius
    var circleRadius: CGFloat {
        return cell.frame.height/2 + 10
    }
    
    // Calculate the x position of the percentage circle
    var circleXPosition: CGFloat {
        return cell.frame.width - (circleRadius) - 10
    }
    
    // Calculate the y position of the percentage circle
    var circleYPosition: CGFloat {
        return cell.frame.height/2 - (circleRadius/2)
    }
    


    // Call method from PercentageCircle class

    roundView = PercentageCircle.percentageCircle.createPercentageCircle(percentage: percentage,circleRadius: circleRadius,circleXPosition: circleXPosition,circleYPosition: circleYPosition,circleWidth: 5,circleColor: #colorLiteral(red: 0.276517272,green: 0.2243287563,blue: 0.4410637617,alpha: 1),backgroundColor: #colorLiteral(red: 0.6000000238,green: 0.6000000238,blue: 0.6000000238,animation: false)
    
    cell.addSubview(roundView)
}

应该是这样的(iPhone 12 mini)

这是在某些设备上的外观(iPhone 12 Pro max)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。