如何解决绘制的圆圈在我的表格视图单元格中快速出现两次
在我的 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 举报,一经查实,本站将立刻删除。