DrawRect 超出视图范围
DrawRect is out of view bounds
我正尝试在自定义 UIView 中绘制一个循环计时器，如下所示：
override func draw(_ rect: CGRect) {
bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
bgShapeLayer.strokeColor = self.backgroundStrokeColor
bgShapeLayer.fillColor = self.backgroundFillColor
bgShapeLayer.lineWidth = self.backgroundLineWidth
self.layer.addSublayer(bgShapeLayer)
timeLeftShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
timeLeftShapeLayer.strokeColor = self.timeLeftSrtokeColor
timeLeftShapeLayer.fillColor = self.timeLeftFillColor
timeLeftShapeLayer.lineWidth = self.timeLeftLineWidth
self.layer.addSublayer(timeLeftShapeLayer)
timeLabel = UILabel(frame: CGRect(x: self.frame.midX-50 ,y: self.frame.midY-25, width: 100, height: 50))
timeLabel.adjustsFontSizeToFitWidth = true
timeLabel.textAlignment = .center
timeLabel.text = self.timeLeft.stringTime
timeLabel.textColor = self.textColor
timeLabel.font = self.textFont
self.addSubview(timeLabel)
strokeIt.toValue = 100 //From value is set in "startTimer(duration, timerProgress)
strokeIt.duration = self.timeLeft
// add the animation to your timeLeftShapeLayer
timeLeftShapeLayer.add(strokeIt, forKey: nil)
// define the future end time by adding the timeLeft to now Date()
}
它在 iPhone 6/7/X 上运行良好，但在较小的 iPhones（如 5/5s/SE）上，计时器超出了视图范围。像这样：
[![SE][1]][1]
应该如何 (iPhone X):
[![X][2]][2]
几个小时以来，我一直试图找出原因，但一无所获:(
有人有想法吗？谢谢！
雷尼尔·梅里安：
[![图片][3]][3]
[![2][4]][4]
注意：timer 视图以编程方式添加到名为 container 的超级视图，该超级视图通过 Interface Builder 添加并启用了 Clip To Bounds。 container 在 UITableViewCell
中
完整代码：
public var backgroundStrokeColor: CGColor = UIColor.white.cgColor
public var backgroundFillColor: CGColor = UIColor.clear.cgColor
public var backgroundLineWidth: CGFloat = 15
public var timeLeftSrtokeColor: CGColor = UIColor.red.cgColor
public var timeLeftFillColor: CGColor = UIColor.clear.cgColor
public var timeLeftLineWidth: CGFloat = 15
public var textColor: UIColor = UIColor.white
public var textFont: UIFont = UIFont.systemFont(ofSize: 15.0)
fileprivate var timeLeft: TimeInterval = 0
fileprivate var endDate: Date?
fileprivate var timeLeftShapeLayer: CAShapeLayer?
fileprivate var bgShapeLayer: CAShapeLayer?
fileprivate var timeLabel: UILabel?
fileprivate var timer = Timer()
fileprivate let strokeIt = CABasicAnimation(keyPath: "strokeEnd")
//MARK: - UIView
override func draw(_ rect: CGRect) {
drawBgShape()
drawTimeLeftShape()
addTimeLabel()
strokeIt.toValue = 1 //From value is set in "startTimer(duration, timerProgress)
strokeIt.duration = self.timeLeft
// add the animation to your timeLeftShapeLayer
timeLeftShapeLayer?.add(strokeIt, forKey: nil)
// define the future end time by adding the timeLeft to now Date()
}
//MARK: - Public
public func startTimer(duration: TimeInterval, timerProgress: Int) {
self.timeLeft = duration
endDate = Date().addingTimeInterval(timeLeft)
timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(updateTime), userInfo: nil, repeats: true)
strokeIt.fromValue = timerProgress
}
//MARK: - Private
fileprivate func drawBgShape() {
//we initialize and add the layer only if there is not initialized
if(bgShapeLayer == nil){
bgShapeLayer = CAShapeLayer()
self.layer.addSublayer(bgShapeLayer!)
}
bgShapeLayer?.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
bgShapeLayer?.strokeColor = self.backgroundStrokeColor
bgShapeLayer?.fillColor = self.backgroundFillColor
bgShapeLayer?.lineWidth = self.backgroundLineWidth
}
fileprivate func drawTimeLeftShape() {
//we initialize and add the layer only if there is not initialized
if(timeLeftShapeLayer == nil){
timeLeftShapeLayer = CAShapeLayer()
self.layer.addSublayer(timeLeftShapeLayer!)
}
timeLeftShapeLayer?.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
timeLeftShapeLayer?.strokeColor = self.timeLeftSrtokeColor
timeLeftShapeLayer?.fillColor = self.timeLeftFillColor
timeLeftShapeLayer?.lineWidth = self.timeLeftLineWidth
}
fileprivate func addTimeLabel() {
//we initialize and add the UILabel only if there is not initialized
if(timeLabel == nil){
timeLabel = UILabel()
self.addSubview(timeLabel!)
}
timeLabel?.frame = CGRect(x: self.frame.midX-50 ,y: self.frame.midY-25, width: 100, height: 50)
timeLabel?.adjustsFontSizeToFitWidth = true
timeLabel?.textAlignment = .center
timeLabel?.text = self.timeLeft.stringTime
timeLabel?.textColor = self.textColor
timeLabel?.font = self.textFont
}
//MARK: - Actions
@objc fileprivate func updateTime() {
if timeLeft > 0 {
timeLeft = endDate?.timeIntervalSinceNow ?? 0
timeLabel?.text = self.timeLeft.stringTime
} else {
timeLabel?.text = self.timeLeft.stringTime
timer.invalidate()
}
}
UITableViewCell 代码：
override func layoutSubviews() {
super.layoutSubviews()
let countDownTimer = CountDownTimer(frame: self.countDownTimerContainer.frame)
countDownTimer.frame.origin = CGPoint.zero
countDownTimer.frame = self.countDownTimerContainer.bounds
let secondsUntilEndDate = abs(self.timerEndDate.timeIntervalSinceNow)//abs = absolute value (-x to x)
countDownTimer.startTimer(duration: secondsUntilEndDate, timerProgress: self.timerProgress)
self.countDownTimerContainer.addSubview(countDownTimer)
self.countDownTimerContainer.setNeedsDisplay()
}
您需要在单元格 layoutSubViews 方法
中重新调整 containerView 的框架
func layoutSubviews() {
super.layoutSubviews()
timerView.frame = container.bounds
containerView.setNeedsDisplay()
}
并在您原来的方法中稍作调整后
override func draw(_ rect: CGRect) {
//we initialize and add the layer only if there is not initialized
if(bgShapeLayer == nil){
bgShapeLayer = CAShapeLayer()
self.layer.addSublayer(bgShapeLayer)
}
bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
bgShapeLayer.strokeColor = self.backgroundStrokeColor
bgShapeLayer.fillColor = self.backgroundFillColor
bgShapeLayer.lineWidth = self.backgroundLineWidth
//we initialize and add the layer only if there is not initialized
if(timeLeftShapeLayer == nil){
timeLeftShapeLayer = CAShapeLayer()
self.layer.addSublayer(timeLeftShapeLayer)
}
timeLeftShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
timeLeftShapeLayer.strokeColor = self.timeLeftSrtokeColor
timeLeftShapeLayer.fillColor = self.timeLeftFillColor
timeLeftShapeLayer.lineWidth = self.timeLeftLineWidth
//we initialize and add the UILabel only if there is not initialized
if(timeLabel == nil){
timeLabel = timeLabel()
self.addSubview(timeLabel)
}
timeLabel.frame = CGRect(x: self.frame.midX-50 ,y: self.frame.midY-25, width: 100, height: 50)
timeLabel.adjustsFontSizeToFitWidth = true
timeLabel.textAlignment = .center
timeLabel.text = self.timeLeft.stringTime
timeLabel.textColor = self.textColor
timeLabel.font = self.textFont
strokeIt.toValue = 100 //From value is set in "startTimer(duration, timerProgress)
strokeIt.duration = self.timeLeft
// add the animation to your timeLeftShapeLayer
timeLeftShapeLayer.add(strokeIt, forKey: nil)
// define the future end time by adding the timeLeft to now Date()
}
更改您的手机密码
在您的单元格中添加 CountDownTimer 作为变量
var timerView : CountDownTimer?
修改你的layoutSubviews方法
override func layoutSubviews() {
super.layoutSubviews()
if(self.timerView == nil) {
self.timerView = CountDownTimer(frame: self.countDownTimerContainer.bounds)
self.countDownTimerContainer.addSubview(countDownTimer)
}
countDownTimer.frame = self.countDownTimerContainer.bounds
let secondsUntilEndDate = abs(self.timerEndDate.timeIntervalSinceNow)//abs = absolute value (-x to x)
countDownTimer.startTimer(duration: secondsUntilEndDate, timerProgress: self.timerProgress)
self.countDownTimerContainer.setNeedsDisplay()
}
我正尝试在自定义 UIView 中绘制一个循环计时器，如下所示：
override func draw(_ rect: CGRect) {
bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
bgShapeLayer.strokeColor = self.backgroundStrokeColor
bgShapeLayer.fillColor = self.backgroundFillColor
bgShapeLayer.lineWidth = self.backgroundLineWidth
self.layer.addSublayer(bgShapeLayer)
timeLeftShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
timeLeftShapeLayer.strokeColor = self.timeLeftSrtokeColor
timeLeftShapeLayer.fillColor = self.timeLeftFillColor
timeLeftShapeLayer.lineWidth = self.timeLeftLineWidth
self.layer.addSublayer(timeLeftShapeLayer)
timeLabel = UILabel(frame: CGRect(x: self.frame.midX-50 ,y: self.frame.midY-25, width: 100, height: 50))
timeLabel.adjustsFontSizeToFitWidth = true
timeLabel.textAlignment = .center
timeLabel.text = self.timeLeft.stringTime
timeLabel.textColor = self.textColor
timeLabel.font = self.textFont
self.addSubview(timeLabel)
strokeIt.toValue = 100 //From value is set in "startTimer(duration, timerProgress)
strokeIt.duration = self.timeLeft
// add the animation to your timeLeftShapeLayer
timeLeftShapeLayer.add(strokeIt, forKey: nil)
// define the future end time by adding the timeLeft to now Date()
}
它在 iPhone 6/7/X 上运行良好，但在较小的 iPhones（如 5/5s/SE）上，计时器超出了视图范围。像这样：
[![SE][1]][1]
应该如何 (iPhone X):
[![X][2]][2]
几个小时以来，我一直试图找出原因，但一无所获:(
有人有想法吗？谢谢！ 雷尼尔·梅里安：
[![图片][3]][3]
[![2][4]][4]
注意：timer 视图以编程方式添加到名为 container 的超级视图，该超级视图通过 Interface Builder 添加并启用了 Clip To Bounds。 container 在 UITableViewCell
完整代码：
public var backgroundStrokeColor: CGColor = UIColor.white.cgColor
public var backgroundFillColor: CGColor = UIColor.clear.cgColor
public var backgroundLineWidth: CGFloat = 15
public var timeLeftSrtokeColor: CGColor = UIColor.red.cgColor
public var timeLeftFillColor: CGColor = UIColor.clear.cgColor
public var timeLeftLineWidth: CGFloat = 15
public var textColor: UIColor = UIColor.white
public var textFont: UIFont = UIFont.systemFont(ofSize: 15.0)
fileprivate var timeLeft: TimeInterval = 0
fileprivate var endDate: Date?
fileprivate var timeLeftShapeLayer: CAShapeLayer?
fileprivate var bgShapeLayer: CAShapeLayer?
fileprivate var timeLabel: UILabel?
fileprivate var timer = Timer()
fileprivate let strokeIt = CABasicAnimation(keyPath: "strokeEnd")
//MARK: - UIView
override func draw(_ rect: CGRect) {
drawBgShape()
drawTimeLeftShape()
addTimeLabel()
strokeIt.toValue = 1 //From value is set in "startTimer(duration, timerProgress)
strokeIt.duration = self.timeLeft
// add the animation to your timeLeftShapeLayer
timeLeftShapeLayer?.add(strokeIt, forKey: nil)
// define the future end time by adding the timeLeft to now Date()
}
//MARK: - Public
public func startTimer(duration: TimeInterval, timerProgress: Int) {
self.timeLeft = duration
endDate = Date().addingTimeInterval(timeLeft)
timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(updateTime), userInfo: nil, repeats: true)
strokeIt.fromValue = timerProgress
}
//MARK: - Private
fileprivate func drawBgShape() {
//we initialize and add the layer only if there is not initialized
if(bgShapeLayer == nil){
bgShapeLayer = CAShapeLayer()
self.layer.addSublayer(bgShapeLayer!)
}
bgShapeLayer?.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
bgShapeLayer?.strokeColor = self.backgroundStrokeColor
bgShapeLayer?.fillColor = self.backgroundFillColor
bgShapeLayer?.lineWidth = self.backgroundLineWidth
}
fileprivate func drawTimeLeftShape() {
//we initialize and add the layer only if there is not initialized
if(timeLeftShapeLayer == nil){
timeLeftShapeLayer = CAShapeLayer()
self.layer.addSublayer(timeLeftShapeLayer!)
}
timeLeftShapeLayer?.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
timeLeftShapeLayer?.strokeColor = self.timeLeftSrtokeColor
timeLeftShapeLayer?.fillColor = self.timeLeftFillColor
timeLeftShapeLayer?.lineWidth = self.timeLeftLineWidth
}
fileprivate func addTimeLabel() {
//we initialize and add the UILabel only if there is not initialized
if(timeLabel == nil){
timeLabel = UILabel()
self.addSubview(timeLabel!)
}
timeLabel?.frame = CGRect(x: self.frame.midX-50 ,y: self.frame.midY-25, width: 100, height: 50)
timeLabel?.adjustsFontSizeToFitWidth = true
timeLabel?.textAlignment = .center
timeLabel?.text = self.timeLeft.stringTime
timeLabel?.textColor = self.textColor
timeLabel?.font = self.textFont
}
//MARK: - Actions
@objc fileprivate func updateTime() {
if timeLeft > 0 {
timeLeft = endDate?.timeIntervalSinceNow ?? 0
timeLabel?.text = self.timeLeft.stringTime
} else {
timeLabel?.text = self.timeLeft.stringTime
timer.invalidate()
}
}
UITableViewCell 代码：
override func layoutSubviews() {
super.layoutSubviews()
let countDownTimer = CountDownTimer(frame: self.countDownTimerContainer.frame)
countDownTimer.frame.origin = CGPoint.zero
countDownTimer.frame = self.countDownTimerContainer.bounds
let secondsUntilEndDate = abs(self.timerEndDate.timeIntervalSinceNow)//abs = absolute value (-x to x)
countDownTimer.startTimer(duration: secondsUntilEndDate, timerProgress: self.timerProgress)
self.countDownTimerContainer.addSubview(countDownTimer)
self.countDownTimerContainer.setNeedsDisplay()
}
您需要在单元格 layoutSubViews 方法
containerView 的框架
func layoutSubviews() {
super.layoutSubviews()
timerView.frame = container.bounds
containerView.setNeedsDisplay()
}
并在您原来的方法中稍作调整后
override func draw(_ rect: CGRect) {
//we initialize and add the layer only if there is not initialized
if(bgShapeLayer == nil){
bgShapeLayer = CAShapeLayer()
self.layer.addSublayer(bgShapeLayer)
}
bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
bgShapeLayer.strokeColor = self.backgroundStrokeColor
bgShapeLayer.fillColor = self.backgroundFillColor
bgShapeLayer.lineWidth = self.backgroundLineWidth
//we initialize and add the layer only if there is not initialized
if(timeLeftShapeLayer == nil){
timeLeftShapeLayer = CAShapeLayer()
self.layer.addSublayer(timeLeftShapeLayer)
}
timeLeftShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: self.frame.midX , y: self.frame.midY), radius:
min(frame.width/2, frame.height/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
timeLeftShapeLayer.strokeColor = self.timeLeftSrtokeColor
timeLeftShapeLayer.fillColor = self.timeLeftFillColor
timeLeftShapeLayer.lineWidth = self.timeLeftLineWidth
//we initialize and add the UILabel only if there is not initialized
if(timeLabel == nil){
timeLabel = timeLabel()
self.addSubview(timeLabel)
}
timeLabel.frame = CGRect(x: self.frame.midX-50 ,y: self.frame.midY-25, width: 100, height: 50)
timeLabel.adjustsFontSizeToFitWidth = true
timeLabel.textAlignment = .center
timeLabel.text = self.timeLeft.stringTime
timeLabel.textColor = self.textColor
timeLabel.font = self.textFont
strokeIt.toValue = 100 //From value is set in "startTimer(duration, timerProgress)
strokeIt.duration = self.timeLeft
// add the animation to your timeLeftShapeLayer
timeLeftShapeLayer.add(strokeIt, forKey: nil)
// define the future end time by adding the timeLeft to now Date()
}
更改您的手机密码
在您的单元格中添加 CountDownTimer 作为变量
var timerView : CountDownTimer?
修改你的layoutSubviews方法
override func layoutSubviews() {
super.layoutSubviews()
if(self.timerView == nil) {
self.timerView = CountDownTimer(frame: self.countDownTimerContainer.bounds)
self.countDownTimerContainer.addSubview(countDownTimer)
}
countDownTimer.frame = self.countDownTimerContainer.bounds
let secondsUntilEndDate = abs(self.timerEndDate.timeIntervalSinceNow)//abs = absolute value (-x to x)
countDownTimer.startTimer(duration: secondsUntilEndDate, timerProgress: self.timerProgress)
self.countDownTimerContainer.setNeedsDisplay()
}