UILabel具有颜色渐变到标签的特定高度 [英] UILabel with color gradient to certain height of the label

问题描述

我想从下面的图片中获得效果-一个 UILabel ，它显示进度 X 从底部到 X的渐变标签高度的％。标签的其余（100-X）％将具有不同的颜色。

I want to achieve the effect from the picture bellow - a UILabel that shows progress X as a gradient from bottom to X% of height of the label. The remaining (100 - X)% of the label will have a different color.

我现在唯一想到的就是创建两个 UIViews ，一个为灰色背景，另一个为灰色背景。渐变的颜色。将渐变视图置于灰色视图上方，并设置其高度以匹配当前进度。然后，只需将标签用作这两个视图的遮罩即可。为了更好地说明，我附上一张描述我建议的解决方案的图片。虽然我不满意，因为它不是很优雅。

The only thing that comes into my mind right now is to create two UIViews one with gray background and one with the color of the gradient. Put the gradient view above the gray view and set it’s height to match the current progress. Then simply use the label as a mask for those two views. For better illustration I attached a picture describing my suggested solution. Though I’m not happy with it because it is not very elegant.

是否有可能以其他方式实现更优雅的方式？理想情况下，只需对 UILabel 进行子类化。



Is it possible to achieve this in a different and more elegant way? Ideally just by subclassing UILabel.

推荐答案

您可以对图层进行此操作和遮罩，但实际上只使用图案图像中的UIColor设置文本颜色会更容易。该代码有效，尽管最好将UILabel子类化并为该类提供应用和/或更新图像的方法。我说这比较容易，因为我发现要处理文本层要达到完美的调整尺寸会有些痛苦，因为标签可以使用adjustsFontSizeToFitWidth来更改其字体大小。

You could do this with layers and masks, but it will actually be easier to just set the text color with a UIColor from pattern image. This code works, though it might be better to subclass UILabel and give the class a method to apply and or update the image. I say this is easier, because I find dealing with text layers a bit of a pain to get the sizing perfect, where as labels can alter their font size with adjustsFontSizeToFitWidth.

 override func viewDidLayoutSubviews() {
    label.textColor = UIColor(patternImage: partialGradient(forViewSize: label.frame.size, proportion: 0.65))
}

func partialGradient(forViewSize size: CGSize, proportion p: CGFloat) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(size, false, 0)

    let context = UIGraphicsGetCurrentContext()


    context?.setFillColor(UIColor.darkGray.cgColor)
    context?.fill(CGRect(origin: .zero, size: size))

    let c1 = UIColor.orange.cgColor
    let c2 = UIColor.red.cgColor

    let top = CGPoint(x: 0, y: size.height * (1.0 - p))
    let bottom = CGPoint(x: 0, y: size.height)

    let colorspace = CGColorSpaceCreateDeviceRGB()

    if let gradient = CGGradient(colorsSpace: colorspace, colors: [c1, c2] as CFArray, locations: [0.0, 1.0]){
        // change 0.0 above to 1-p if you want the top of the gradient orange
        context?.drawLinearGradient(gradient, start: top, end: bottom, options: CGGradientDrawingOptions.drawsAfterEndLocation)
    }


    let img = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return img!
}

这篇关于UILabel具有颜色渐变到标签的特定高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！