使UIProgressView圆角

Question

我创建了一个UIProgressView具有以下属性

progressView.progressTintColor = UIColor.appChallengeColorWithAlpha(1.0)
progressView.trackTintColor = UIColor.clearColor()
progressView.clipsToBounds = true
progressView.layer.cornerRadius = 5

我正在使用UIView边框.看起来他的进步= 1,这正是我想要的方式.

但是,如果进度值小于1.角落不应该是圆形的.

我错过了什么吗？我怎样才能圆角呢？

Answer 1

UIProgressView有两部分,进度部分和轨道部分.如果您使用Reveal,则可以看到它只有两个子视图.进度视图层次结构非常简单.所以...

Objective-C的

- (void)layoutSubviews
{
    [super layoutSubviews];
    [self.progressView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        obj.layer.masksToBounds = YES;
        obj.layer.cornerRadius = kProgressViewHeight / 2.0;
    }];
}

斯威夫特3

override func layoutSubviews() {
    super.layoutSubviews()
    subviews.forEach { subview in
        subview.layer.masksToBounds = true
        subview.layer.cornerRadius = kProgressViewHeight / 2.0
    }
}

我承认子类或扩展进度视图是推荐的方法.如果你不想为这么简单的效果做到这一点,这可能会有所帮助.保持Apple将改变视图层次结构的情况,并且可能会出现问题.

Answer 2

另一个混合的答案，超级老套但使用起来非常快。

您只需抓住子图层并设置其半径即可。无需编写自己的 UIProgressView 或弄乱剪辑路径。

progressView.layer.cornerRadius = 5
progressView.layer.sublayers[1].cornerRadius = 5
progressView.subviews[1]. clipsToBounds = true
progressView.layer.masksToBounds = true

因此，您将整个 UIProgressView 的角圆化（不需要 ClipsToBounds） 然后填充栏是第二个子层，因此您可以抓住它并圆化其角，但您还需要将该层的子视图设置为 ClipsToBounds。

然后将整个图层设置为遮罩其边界，一切看起来都不错。

显然，这在很大程度上依赖于 UIProgressView 的设置不变，并且第二个子视图/层是填充视图。

但。如果您对这个假设感到满意，那么使用起来非常简单。

Answer 3

只需在 init 中执行此操作

    layer.cornerRadius = *desired_corner_radius*
    clipsToBounds = true

Answer 4

搜索并尝试后,我决定创建自己的自定义进度视图.以下是可能在同一问题中找到selev的人的代码.

import Foundation
import UIKit

class CustomHorizontalProgressView: UIView {
var progress: CGFloat = 0.0 {

    didSet {
        setProgress()
    }
}

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

    setup()
}

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

    setup()
}

func setup() {
    self.backgroundColor = UIColor.clearColor()
}

override func drawRect(rect: CGRect) {
    super.drawRect(rect)

    setProgress()
}

func setProgress() {
    var progress = self.progress
    progress = progress > 1.0 ? progress / 100 : progress

    self.layer.cornerRadius = CGRectGetHeight(self.frame) / 2.0
    self.layer.borderColor = UIColor.grayColor().CGColor
    self.layer.borderWidth = 1.0

    let margin: CGFloat = 6.0
    var width = (CGRectGetWidth(self.frame) - margin)  * progress
    let height = CGRectGetHeight(self.frame) - 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)

    UIColor.redColor().setFill()
    pathRef.fill()

    UIColor.clearColor().setStroke()
    pathRef.stroke()

    pathRef.closePath()

    self.setNeedsDisplay()
}
}

只需将上面的代码放在swift文件中,然后在IB中拖放UIView并将其赋予类CustomHorizontalProgressView.就是这样.

Answer 5

回答已经很晚了，但实际上我遇到了同样的问题。

这是我最简单的解决方案（无需代码！）：

1. 添加一个容器以嵌入您的进度视图

2. 容器的圆角（10 =容器的高度/ 2）

3. 结果 ：）