制作UIProgressView圆角 [英] Making UIProgressView Rounded corners

问题描述

我创建了一个 UIProgressView ，其中包含以下属性

I have created a UIProgressView with following properties

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

我使用 UIView 作为边框。看起来他的进度= 1，这正是我想要的方式。

I am using a UIView for border. It appears like his progress = 1, which is exactly the way I want.

但是如果进度值小于1.角落不是应该的四舍五入。

But if progress value is less then 1. Corners are not rounded as it should be.

我错过了什么吗？如何使其圆角？

Am I missing something ? How can I make it rounded corner ?

推荐答案

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

After searching and trying I decided to create my own custom progress view. Here is the code for anyone who may find them selevs in same problem.

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并给它类 CustomHorizo​​ntalProgressView 。就是这样。

Just put above code in a swift file and drag drop a UIView in IB and give it class CustomHorizontalProgressView. and That is it.

这篇关于制作UIProgressView圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！