2016-07-15 437 views
0

試圖顯示進度條使其自定義,並將UIView設置爲進度百分比。說20%的框架寬度和漸變,但剩下的80%應該是白色的顏色和定義百分比的文字。在UIView部分設置漸變,半色漸變,一半爲單色

面臨的問題是無法顯示文本集UILabel而不是UIView,但文本不顯示。請指導。 以下是我所嘗試過的。

let view: UILabel = UILabel(frame: CGRectMake(0.0, self.scrollMainView.frame.size.height-50, self.view.frame.size.width/5, 50)) 
    let gradient: CAGradientLayer = CAGradientLayer() 
    gradient.frame = view.bounds 
    gradient.locations = [0.0 , 1.0] 
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5) 
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5) 
    let color0 = UIColor(red:71.0/255, green:198.0/255, blue:134.0/255, alpha:1.0).CGColor 
    let color1 = UIColor(red:25.0/255, green:190.0/255, blue: 205.0/255, alpha:1.0).CGColor 
    // let color2 = UIColor(red:0.0/255, green:0.0/255, blue: 0.0/255, alpha:1.0).CGColor 

    gradient.colors = [color1, color0] 
    view.layer.insertSublayer(gradient, atIndex: 0) 
    self.scrollMainView.addSubview(view) 

    view.text = "20%" 
    view.textColor = UIColor.blackColor() 

    view.layer.shadowColor = UIColor.blackColor().CGColor 
    view.layer.shadowOpacity = 1 
    view.layer.shadowOffset = CGSizeZero 
    view.layer.shadowRadius = 2 

回答

0

我回答爲什麼你看不到文本。

忘掉一秒鐘的圖層,並考慮子視圖。如果將子視圖添加到UILabel會發生什麼?當然,它將在標籤的內容之上。

所以,這同樣適用於圖層。 UILabel在其主圖層上繪製其文本,並且添加到主圖層的任何子圖層都位於其上。

我的建議是使用帶有CAGradientLayer子圖層和UILabel子視圖的UIView。

或者甚至更好,子類UIView爲了使用CAGradientLayer作爲支持層(通過class func layerClass() -> AnyClass方法),只需添加UILabel作爲子視圖。

下面是一個例子:

class CustomView : UIView { 
    lazy var label : UILabel = { 
     let l = UILabel(frame: self.bounds) 
     l.text = "20%" 
     l.textColor = UIColor.blackColor() 
     l.backgroundColor = UIColor.clearColor() 
     return l 
    }() 

    override class func layerClass() -> AnyClass { 
     return CAGradientLayer.self 
    } 

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

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

    private func commonInit() { 
     let gradient: CAGradientLayer = self.layer as! CAGradientLayer 
     gradient.locations = [0.0 , 1.0] 
     gradient.startPoint = CGPoint(x: 0.0, y: 0.5) 
     gradient.endPoint = CGPoint(x: 1.0, y: 0.5) 

     let color0 = UIColor(red:71.0/255, green:198.0/255, blue:134.0/255, alpha:1.0).CGColor 
     let color1 = UIColor(red:25.0/255, green:190.0/255, blue: 205.0/255, alpha:1.0).CGColor 

     gradient.colors = [color1, color0] 

     label.frame = bounds 
     label.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] 
     self.addSubview(label) 
    } 
} 
0

我不能從你的問題理解您的問題究竟但我會回答基於唯一的問題標題。要獲得一半的顏色漸變,一半單一的顏色,你必須使用三種顏色漸變,並相應地設置自己的位置:

gradient.colors = [color1,color1, color0] 
gradient.locations = [0.0, 0.5, 1.0] 

這樣,您將吸取COLOR1梯度COLOR1(這實際上是單色),並填寫50%的框架面積與從色彩1到色彩0的漸變,將填補框架的另一半。

+0

它不起作用。 –