DrawRect 超出视图范围

Question

我正在尝试在自定义 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 上运行良好，但在较小的 iPhone（如 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()
}

Answer 1

您需要在单元格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

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()
}