CODEWITHSUNDEEP
iosswift3
P.Festus
P.Festus

Reputation: 95

UIView / can't get corner radius to show when applying gradient

The following code creates a square UIView frame with a gradient layer inside a detail view controller. However, the square.layer.cornerRadius doesn't show. It remains square. 

    class Colors {
    let colorTop = UIColor(red: 68.0/255.0, green: 107.0/255.0, blue: 207.0/255, alpha: 1.0).cgColor
    let colorBottom = UIColor(red: 68.0/255.0, green: 108.0/255.0, blue: 179.0/255, alpha: 1.0).cgColor

    let gl: CAGradientLayer

    init() {
        gl = CAGradientLayer()
        gl.colors = [ colorTop, colorBottom]
        gl.locations = [ 0.0, 1.0]
     }
   }

 class DetailViewController: UIViewController {

 func viewWillAppear {
   let colors = Colors() // is a class that creates the gradient
   let square = UIView(frame: CGRect(x: 18, y: 109, width: 60, height: 60))
   square.layer.cornerRadius = 10
   let backgroundLayer = colors.gl
   backgroundLayer.frame = square.frame
   backgroundLayer.maskToBounds = true
   view.layer.insertSublayer(backgroundLayer, at: 1)
  }
 }

Upvotes: 2

Views: 3889

Answers (4)

azhman_adam
azhman_adam

Reputation: 31

Set your gradient's corner radius equal to the view's corner radius. (the view that you want to apply the gradient on)

    gradient.cornerRadius = view.layer.cornerRadius
    gradient.masksToBounds = true

Upvotes: 2

DevSpace
DevSpace

Reputation: 125

I know you did it programmatically but here's another tip, all you have to do if it's a storyboard UIView is just enable "Clip to Bounds" on the UIView. This always works for me when I add a gradient and set the cornerRadius programmatically.

Upvotes: 3

Leo Dabus
Leo Dabus

Reputation: 236548

I have added some additional properties to the original GradientView to add the desired functionality to it:

@IBDesignable 
class GradientView: UIView {
    @IBInspectable var startColor: UIColor = .black
    @IBInspectable var endColor:   UIColor = .white
    @IBInspectable var startLocation: Double = 0.05
    @IBInspectable var endLocation:   Double = 0.95
    @IBInspectable var horizontalMode: Bool = false
    @IBInspectable var diagonalMode: Bool = false

     // add border color, width and corner radius properties to your GradientView
    @IBInspectable var cornerRadius: CGFloat = 0
    @IBInspectable var borderColor: UIColor = .clear
    @IBInspectable var borderWidth: CGFloat = 0

    override class var layerClass: AnyClass { return CAGradientLayer.self }
    var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }

    override func layoutSubviews() {
        super.layoutSubviews()
        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)
        }
        gradientLayer.locations = [startLocation as NSNumber,  endLocation  as NSNumber]
        gradientLayer.colors    = [startColor.cgColor, endColor.cgColor]

        // add border and corner radius also to your layer
        gradientLayer.cornerRadius = cornerRadius
        gradientLayer.borderColor = borderColor.cgColor
        gradientLayer.borderWidth = borderWidth
    }
}

Upvotes: 3

Aakash
Aakash

Reputation: 2269

You are giving cornerRadius to your square view but not adding it your main view instead you are creating backgroundLayer and adding it your main view.

BackgroundLayer is not rounded as the when your are assigning the square view's frame a rectangular(square in your case) is assigned to the backgroundLayer without any cornerRadius.

You should add your backgroundLayer to your square view and then add the square view to your main view. Like,

square.layer.insertSublayer(backgroundLayer, at: 1)
view.addSubview(square)

Also do,

    square.clipsToBounds = true

This should resolve your issue.

Upvotes: 9

Related Questions