在collectionView单元格中添加渐变到UILabel - swift

Question

我正在尝试将渐变添加到collectionViewCell中的UILabel。要添加渐变我正在使用此功能：

extension UIView
{
     func gradient(colors: [Any], startPoint: CGPoint, endPoint: CGPoint, opacity: Float, location: [NSNumber]?) {
         let gradientLayer = CAGradientLayer()
         gradientLayer.frame = bounds
         gradientLayer.colors = colors
         gradientLayer.startPoint = startPoint
         gradientLayer.endPoint = endPoint
         gradientLayer.opacity = opacity
         gradientLayer.locations = location
         layer.addSublayer(gradientLayer)
     }
}

和我的collectionViewCell：

@IBOutlet weak var discount: UILabel!

override func awakeFromNib() {
    super.awakeFromNib()
    discount.gradient(colors: [green,blue], startPoint: CGPoint(x: 0.0, y: 0.5), endPoint: CGPoint(x: 1.0, y: 0.5), opacity: 1, location: [0.5,0.5])
}

但它没有显示任何东西。添加阴影工作正常，但添加渐变不显示任何内容。为什么会这样？

Answer 1

将您的扩展程序更新为

extension UIView
{
    func gradient(colors: [CGColor], startPoint: CGPoint, endPoint: CGPoint, opacity: Float, location: [NSNumber]?) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = colors
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
        gradientLayer.opacity = opacity
        gradientLayer.locations = location
        layer.addSublayer(gradientLayer)
    }
}

将它从collectionView类中调用为

override func layoutSubviews() {
        discount.gradient(colors: [UIColor.blue.cgColor, UIColor.green.cgColor], startPoint: CGPoint.init(x: 0.5, y: 0.0), endPoint: CGPoint.init(x: 0.5, y: 1.0), opacity: 1.0, location: [0,1])
}

经过测试和工作。

Answer 2

每当我向视图添加子图层时，我都希望确保框架始终在layoutSubviews中更新：

public override func layoutSubviews() {
    super.layoutSubviews()
    gradientLayer.frame = bounds
}

您需要将渐变图层的引用保留为视图中的属性。

Answer 3

如果您的目标是制作渐变文字，那么您必须执行以下操作：

1. 将您的标签嵌入UIView并连接插座（例如discountContainer）
2. 将渐变图层添加到该视图（而不是标签） discountContainer.gradient(colors: [green,blue], startPoint: CGPoint(x: 0.0, y: 0.5), endPoint: CGPoint(x: 1.0, y: 0.5), opacity: 1, location: [0.5,0.5])
3. 将标签设置为视图遮罩
   discountContainer.mask = discount

结果：



编辑：

如果您只需要在背景上制作渐变，那么您应该保留对CAGradientLayer的引用。

extension UIView
{
     func gradient(colors: [Any], startPoint: CGPoint, endPoint: CGPoint, opacity: Float, location: [NSNumber]?) -> CAGradientLayer {
         let gradientLayer = CAGradientLayer()
         gradientLayer.frame = bounds
         gradientLayer.colors = colors
         gradientLayer.startPoint = startPoint
         gradientLayer.endPoint = endPoint
         gradientLayer.opacity = opacity
         gradientLayer.locations = location
         layer.addSublayer(gradientLayer)
         return layer
     }
}

并在您的collectionViewCell中：

@IBOutlet weak var discount: UILabel!
var gradientLayer: CAGradientLayer?

override func awakeFromNib() {
    super.awakeFromNib()
    gradientLayer = discount.gradient(colors: [green,blue], startPoint: CGPoint(x: 0.0, y: 0.5), endPoint: CGPoint(x: 1.0, y: 0.5), opacity: 1, location: [0.5,0.5])
}

public override func layoutSubviews() {
    super.layoutSubviews()
    gradientLayer?.frame = bounds
}

Answer 4

如果您使用过cocoapods，Chameleon Framework提供了一种非常简单的方法来创建渐变色。要使用它，请安装cocoapods，然后安装Chameleon Framework。放

import ChameleonFramework 

位于UIViewController的顶部。

安装后的用法链接如下。

https://github.com/ViccAlexander/Chameleon#gradient-colors-1

如果您使用Swift，它看起来像下面的代码行一样容易。

UIColor(gradientStyle:UIGradientStyle, withFrame:CGRect, andColors:[UIColor])

只需使用上面的代码行设置UILabel的背景。