将渐变应用到 UIView 的一个角答案

【问题标题】：Apply gradient to just one corner of a UIView将渐变应用到 UIView 的一个角
【发布时间】：2017-07-01 23:30:14
【问题描述】：

我有一个 UIView，我在其中显示带有 AVPlayer 的视频。我需要在其中一个角落显示视频的时间，为此我需要在其中一个角落添加黑色渐变，这样白色的时间始终可见。

类似这样的：

我的想法是在带有视频的 UIView 顶部添加一个 UIView (ViewA)，并将渐变添加到 ViewA 并将 UILabel 添加到该视图...

我的问题是我不知道如何在从 UIColor.clear 到 UIColor.black 的一个角落添加渐变。

任何线索，知道如何只将渐变应用于其中一个角？

谢谢！

【问题讨论】：

如果您知道如何使用 CoreImage 过滤器，CIRadialGradient 可能会成功。我从未使用过它，但看起来您可以选择一个足够大的半径来拥有四个角，如您所愿 - 从那里开始，您的 UIViews 和/或 CALayers 的层次结构就更重要了。 developer.apple.com/library/content/documentation/…

标签： ios swift uikit cagradientlayer

【解决方案1】：

将此添加到您的 UIView，您可以通过编程方式以及从情节提要更改参数。

@IBDesignable
class GradientView: UIView {

@IBInspectable var startColor:   UIColor = .black { didSet { updateColors() }}
@IBInspectable var endColor:     UIColor = .white { didSet { updateColors() }}
@IBInspectable var startLocation: Double =   0.05 { didSet { updateLocations() }}
@IBInspectable var endLocation:   Double =   0.95 { didSet { updateLocations() }}
@IBInspectable var horizontalMode:  Bool =  false { didSet { updatePoints() }}
@IBInspectable var diagonalMode:    Bool =  false { didSet { updatePoints() }}

override class var layerClass: AnyClass { return CAGradientLayer.self }

var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }

func updatePoints() {
    if horizontalMode {
        gradientLayer.startPoint = diagonalMode ? CGPoint(x: 1, y: 0) : CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0.5)
    } else {
        gradientLayer.startPoint = diagonalMode ? CGPoint(x: 0, y: 0) : CGPoint(x: 0.5, y: 0)
        gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 1, y: 1) : CGPoint(x: 0.5, y: 1)
    }
}
func updateLocations() {
    gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
}
func updateColors() {
    gradientLayer.colors    = [startColor.cgColor, endColor.cgColor]
}

override func layoutSubviews() {
    super.layoutSubviews()
    updatePoints()
    updateLocations()
    updateColors()
}
}

【讨论】：