带有圆形进度轨迹边缘的UIProgressView - Swift 3

时间:2016-12-16 00:07:38

标签: swift3 uiprogressview

我有一个UIProgressView,想要为填充的部分(进度部分)设置一个角半径,我可以使用cornerRadius属性使进度视图的角变圆,我也希望填充的进度边是圆形。请在下面找到进度条的外观。

enter image description here

我希望红色部分的边缘变圆。

我尝试使用带有圆边的图像设置progressImage,同时解决了问题,图像本身被拉伸,角落的半径不能保持。

我尝试的另一件事是绘制一个矩形并用进度颜色填充它并使用以下代码将其转换为UIImage并将其设置为进度图像,在这种情况下,图像始终为黑色,不确定是什么我失踪了。 请在下面找到将uiview转换为uiimage的代码

class func imageWithView(view: UIView) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.isOpaque, 0.0)
    view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
    let img = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return img!
}

2 个答案:

答案 0 :(得分:3)

我使用此代码填充进度边缘以进行舍入。

myProgressView.layer.sublayers![1].cornerRadius = 12
myProgressView.subviews[1].clipsToBounds = true

答案 1 :(得分:2)

这个问题已有几个月了,但由于我有同样的疑问,我想分享我找到的答案。 我只是直接修改UIProgressView找不到办法。似乎最简单的方法是将视图自定义为进度条。我根据Umair Afzal在这个问题上给出了答案:https://stackoverflow.com/a/41373525/1775356它根据我的需要进行了一些修改,并且还针对Swift 3进行了更新。

import Foundation

import UIKit

class CustomHorizontalProgressView: UIView {
    var color: UIColor = UIColor.red
    var progress: CGFloat = 0.0 {

        didSet {
            setNeedsDisplay()
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        setup()
    }

    func setup() {
        self.backgroundColor = color.withAlphaComponent(0.4)
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        var progress = self.progress
        progress = progress > 1.0 ? progress / 100 : progress

        self.layer.cornerRadius = self.frame.height / 2.0

        let margin: CGFloat = 0
        var width = (self.frame.width - margin)  * progress
        let height = self.frame.height - margin

        if (width < height) {
            width = height
        }

        let pathRef = UIBezierPath(roundedRect: CGRect(x: margin / 2.0, y: margin / 2.0, width: width, height: height), cornerRadius: height / 2.0)

        color.setFill()
        pathRef.fill()

        UIColor.clear.setStroke()
        pathRef.stroke()

        pathRef.close()            
    }
}

我正在使用颜色作为进度色调,使用相同颜色,使用alpha 40%作为背景色调。通过选择其他背景颜色可以轻松更改。为了记录,在IB中添加了外部圆角。这也可以通过编程方式完成。它看起来像这样: