Question

尝试显示进度条使其自定义，使用UIView将其设置为进度的百分比。说20％的帧宽和渐变，但剩下的80％应该是白色，文本上定义百分比。

面临的问题是无法显示文本集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

Answer 1

我回答为什么你看不到文字。

忘记一秒钟并考虑子视图。如果将子视图添加到UILabel会发生什么？当然，它将在标签的内容之上。

因此，这同样适用于图层。 UILabel在其主图层上绘制文本，您添加到主图层的任何子图层都位于其上。

我的建议是使用带有CAGradientLayer子层和UILabel子视图的UIView。

甚至更好，为了使用CAGradientLayer作为支持层（通过class func layerClass() -> AnyClass方法）而将UIView子类化，并将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)
    }
}

Answer 2

我无法从你的问题中完全理解你的问题，但我只会根据问题标题回答。要获得半色渐变和半单色，您必须使用三种颜色渐变并相应地设置它们的位置：

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

通过这种方式，您将绘制从color1到color1（实际上是单色）的渐变，并用它填充50％的帧区域，以及从color1到color0的渐变，它将填充帧的另一半

在UIView上部分设置渐变，半色是渐变，一半是单色

2 个答案: