Search code examples
iosswiftuikitcagradientlayer

Apply gradient to just one corner of a UIView

I have a UIView where I display a video with a AVPlayer. I need to show the time of the video in one of the corners and for that I need to add a black gradient to one of the corners so the time in white is always visible.

Something like this:

Sample

My idea is to add a UIView (ViewA) on top of the UIView with the video, and add the gradient to ViewA and also the UILabel to that view...

My problem is that I have no clue how to add that gradient in just one corner that goes from UIColor.clear to UIColor.black.

Any clue, idea how to just apply the gradient to just one of the corners?

Thanks!

Solution

  • Add this to your UIView, you can change the parameters programmatically as well as from the storyboard.

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