我想添加渐变作为标签的背景。我使用以下代码来实现这一目标。但问题是,虽然标签上出现渐变颜色,但文本不可见。请帮忙
lblPatientDetail.text=PatientsDetails;
lblPatientDetail.textColor=[UIColor blackColor];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = lblPatientDetail.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor],(id)[[UIColor colorWithRed:255/255.0 green:239/255.0 blue:215/255.0 alpha:1.0] CGColor],nil];
[lblPatientDetail.layer addSublayer:gradient];
lblPatientDetail.backgroundColor=[UIColor clearColor];
向 UILabel 插入子图层会隐藏文本,因此获得所需内容的最佳方法是将标签和渐变图层添加到 UIView。
UIView *gradientLabelView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = gradientLabelView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor],(id)[[UIColor colorWithRed:255/255.0 green:239/255.0 blue:215/255.0 alpha:1.0] CGColor],nil];
[gradientLabelView.layer addSublayer:gradient];
lblPatientDetail.frame = gradientLabelView.bounds;
lblPatientDetail.backgroundColor = [UIColor clearColor];
[gradientLabelView addSubview:lblPatientDetail];
[self addSubview:gradientLabelView];
在 UIView 中使用 UILabel 的建议答案是有效的。显然,在给背景提供渐变颜色背景后,UILabels 不能在其中包含文本......不知道为什么......
但是这是解决方案的完整代码......希望这对某人有帮助:)
UIView *EnvironmentalsLabelView = [[UIView alloc] initWithFrame:CGRectMake(0, 300, 320, 20)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = EnvironmentalsLabelView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor darkGrayColor]CGColor], (id)[[UIColor blackColor]CGColor], nil];
[EnvironmentalsLabelView.layer insertSublayer:gradient atIndex:0];
[scroller addSubview:EnvironmentalsLabelView];
UILabel *EnviornmentalsLabelText = [[UILabel alloc] initWithFrame:EnvironmentalsLabelView.bounds];
[EnviornmentalsLabelText setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12.0f]];
EnviornmentalsLabelText.textAlignment = NSTextAlignmentCenter;
EnviornmentalsLabelText.backgroundColor = [UIColor clearColor];
EnviornmentalsLabelText.text = @"Environmental Benefits";
[EnvironmentalsLabelView addSubview:EnviornmentalsLabelText];
编码快乐!!!!
再思考一下正确答案。 如果您使用自动布局来放置自定义视图,您可能会遇到此问题 - http://prntscr.com/5tj7bx
因此您的视图的大小与 subView - UILabel 和 subLayer - 渐变层不同。
我通过添加一种方法解决了这个问题
class wResultView: UIView {
var label = UILabel()
var gradientLayer = CAGradientLayer()
override func layoutSubviews() {
gradientLayer.frame = self.bounds
label.frame = self.bounds
}
......
这是Apple的一个巨大错误,他们从来没有修复过20个?年。
要解决此问题,只需在顶部添加另一个 UILabel 并传递“.text”设置即可。
class TrickLabel: UIILabel {
override var text: String? {
didSet {
_label.text = text
}
}
private lazy var bg: CAGradientLayer = {
let l = CAGradientLayer()
l.startPoint = CGPoint(x: 0.5, y: 0)
l.endPoint = CGPoint(x: 0.5, y: 1)
l.locations = [-1, 2]
l.colors = [UIColor.cyan,UIColor.yellow].compactMap{$0.cgColor}
layer.insertSublayer(l, at: 0) // NOTE, MUST USE INSERT NOT ADD
return l
}()
private lazy var _label: UILabel = {
let v = UILabel.Typical
v.backgroundColor = .clear
v.font = blah
addSubview(v)
v.bindEdgesToSuperview()
return v
}()
override func layoutSubviews() {
super.layoutSubviews()
bg.frame = bounds
_ = _label
}
}
如有需要,您还可以“传递”例如字体、文字颜色等
就这么简单。 TrickLabel 的工作方式与 UILabel 完全相同,您可以像平常一样说
.text = "blah"
等。
该解决方案意味着创建 UIView 对于常规使用来说不太方便。让我为此建议一个可重复使用的解决方案。
import UIKit
@IBDesignable
class GradientTextLabel: UILabel {
// MARK: - Public vars
@IBInspectable var startColor: UIColor = .red { didSet { setNeedsDisplay() } }
@IBInspectable var midColor: UIColor = .orange { didSet { setNeedsDisplay() } }
@IBInspectable var endColor: UIColor = .yellow { didSet { setNeedsDisplay() } }
@IBInspectable var vertical = false { didSet { setNeedsDisplay() } }
// MARK: - Lifecycle methods
override func layoutSubviews() {
super.layoutSubviews()
let gradient = getGradientLayer(bounds: bounds)
textColor = gradientColor(bounds: bounds, gradientLayer: gradient)
}
override func prepareForInterfaceBuilder() {
setNeedsDisplay()
}
// MARK: - Private methods
private func getGradientLayer(bounds : CGRect) -> CAGradientLayer{
let gradient = CAGradientLayer()
gradient.frame = bounds
gradient.colors = [startColor.cgColor, midColor.cgColor, endColor.cgColor]
if vertical {
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
} else {
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
}
return gradient
}
private func gradientColor(bounds: CGRect, gradientLayer :CAGradientLayer) -> UIColor? {
UIGraphicsBeginImageContext(gradientLayer.bounds.size)
//create UIImage by rendering gradient layer.
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
//get gradient UIcolor from gradient UIImage
return UIColor(patternImage: image!)
}
}
您可以在
UILabel
内添加UILabel
像这样。
class GradientLabel: UILabel {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.clipsToBounds = true
DispatchQueue.main.async {
self.applyGradient(with: Color.gradientColor, gradient: GradientOrientation.topLeftBottomRight)
self.textColor = UIColor.white
}
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.1) {
let label = UILabel(frame: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height))
label.text = self.text
label.font = self.font
label.textColor = self.textColor
label.textAlignment = self.textAlignment
self.text = ""
self.addSubview(label)
}
}
}
extension UIView {
func applyGradient(with colours: [UIColor], locations: [NSNumber]? = nil) {
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = colours.map { $0.cgColor }
gradient.locations = locations
self.layer.insertSublayer(gradient, at: 0)
}
func applyGradient(with colours: [UIColor], gradient orientation: GradientOrientation) {
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = colours.map { $0.cgColor }
gradient.startPoint = orientation.startPoint
gradient.endPoint = orientation.endPoint
self.layer.insertSublayer(gradient, at: 0)
}
}
我认为你可以通过调整上面代码中的alpha值来创建渐变颜色。
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor],(id)[[UIColor colorWithRed:255/255.0 green:239/255.0 blue:215/255.0 alpha:0.1] CGColor],nil];
这样做我能够得到渐变效果。