2016-12-16 75 views
2

我有一個UIProgressView,並希望有一個填充部分(進度部分)的角半徑,我能夠使cornerRadius屬性舍入進度視圖的角點,I還想要填充的進度邊緣四捨五入。請在下面找到現在進度條的外觀。UIProgressView具有圓角進度軌跡邊緣 - Swift 3

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! 
} 
+0

可能重複[如何在swift中創建圓角進度條?](https://stackoverflow.com/questions/32114779/how-to-make-rounded-corner-progress- bar-in-swift) –

回答

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中添加了外部圓角。這也可以通過編程來完成。它看起來像這樣:

+0

在drawRect中調用setNeedsDisplay是錯誤的(現在它是間接完成的)。需要什麼 - 調用setNeedsDisplay觸發drawRect。 –

+0

感謝您的領導!我決定批准您的修改,因爲如果我拒絕了其他兩位用戶的審覈,我會按照您的建議編輯它。 – Iris

+0

設置背景顏色不起作用。它不僅填充整個視圖,而且還填充整個視圖。 – Alan