UIProgressView带圆角的进步轨迹边缘 - 斯威夫特3

问题描述 投票:2回答:2

我有一个UIProgressView,并希望有填充部分(进步的一部分),我能够做的视图使用cornerRadius属性圆润的进展角落,我也想填充进度边缘是rounded.Please圆角半径看看下面的进度条现在的样子。

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!
}
swift3 uiprogressview
2个回答
4
投票

我用这个代码来填写进度边缘是圆的。

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

2
投票

这个问题是一些个月大,但因为我有同样的疑问,我想分享的是我找到了答案。我无法找到一个方式,通过修改只是对UIProgressView做到这一点,直接。似乎是一个最简单的方法是自定义视图看起来像一个进度条。我根据我的Umair阿夫扎尔在这个问题的答案:https://stackoverflow.com/a/41373525/1775356这是一个有点修改了我的需要,它也被更新的斯威夫特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()            
    }
}

我使用进度色调颜色和同色系搭配阿尔法40%的背景色调。这是通过选择另一个背景颜色容易改变的。根据记录,在IB加入外圆角。这也可以通过编程来完成。它看起来像这样:

© www.soinside.com 2019 - 2024. All rights reserved.