将渐变应用于 UIView 的一个角

Question

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

像这样：

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

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

任何线索，关于如何仅将渐变应用于其中一个角的想法？

谢谢！

Answer 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()
}
}

将渐变应用于 UIView 的一个角

Apply gradient to just one corner of a UIView

uikit

ios

cagradientlayer

swift