将渐变应用到 UIView 的一个角

Posted 2023-02-23

【中文标题】将渐变应用到 UIView 的一个角

【英文标题】：Apply gradient to just one corner of a 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/…

【参考方案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()