How to add rounded corners to a UIView with gradient applied?

问题

I've written custom subclass of UIView that draws a gradient inside of it:

import UIKit

@IBDesignable

class PlayerCellView: UIView {

var startColor: UIColor = UIColor(red:0.20, green:0.75, blue:1.00, alpha:1.00)
var endColor: UIColor = UIColor(red:0.07, green:0.42, blue:1.00, alpha:1.00)

override func draw(_ rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()
    let colors = [startColor.cgColor, endColor.cgColor]
    let locations : [CGFloat] = [0.0, 1.0]

    let gradient = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: colors as CFArray, locations: locations)
    context?.drawLinearGradient(gradient!, start: CGPoint.zero, end: CGPoint(x: 0, y: self.bounds.height), options: .drawsAfterEndLocation)
    }

}

How would I now apply rounded edges to this view?

回答1:

You can add a rounded corner UIView with gradient using the following method:

func makeCircularGradient(){
    let circularView = UIView()
    self.view.addSubview(circularView)
    circularView.translatesAutoresizingMaskIntoConstraints = false
    circularView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
    circularView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    circularView.widthAnchor.constraint(equalToConstant: 200).isActive = true
    circularView.heightAnchor.constraint(equalToConstant: 200).isActive = true
    self.view.layoutIfNeeded()

    let gradient = CAGradientLayer()
    gradient.frame = circularView.bounds
    gradient.colors = [UIColor.blue.cgColor,
                       UIColor.red.cgColor]
    gradient.startPoint = CGPoint(x: 0, y: 1)
    gradient.endPoint = CGPoint(x: 1, y: 0)
    circularView.layer.addSublayer(gradient)


    let circularPath = CGMutablePath()
    circularPath.addArc(center: CGPoint.init(x: circularView.bounds.width / 2, y: circularView.bounds.height / 2), radius: circularView.bounds.width / 2, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true, transform: .identity)

    let maskLayer = CAShapeLayer()
    maskLayer.path = circularPath
    maskLayer.fillRule = kCAFillRuleEvenOdd
    maskLayer.fillColor = UIColor.red.cgColor
    circularView.layer.mask = maskLayer


}

Make a UIView and set the constraints as you see fit
Make a CAGradientLayer with colours of your choice
Make a circular mask layer and apply to the UIView.

The result will be something like below:

Making a curved corner radius View with gradient is a little bit more difficult than the circular one. And can be done like :

func makeCurvedCornerGradient(){
    let circularView = UIView()
    self.view.addSubview(circularView)
    circularView.translatesAutoresizingMaskIntoConstraints = false
    circularView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
    circularView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    circularView.widthAnchor.constraint(equalToConstant: 200).isActive = true
    circularView.heightAnchor.constraint(equalToConstant: 200).isActive = true
    self.view.layoutIfNeeded()

    let gradient = CAGradientLayer()
    gradient.frame = circularView.bounds
    gradient.colors = [UIColor.blue.cgColor,
                       UIColor.red.cgColor]
    gradient.startPoint = CGPoint(x: 0, y: 1)
    gradient.endPoint = CGPoint(x: 1, y: 0)
    circularView.layer.addSublayer(gradient)


    let circularPath = CGMutablePath()

    circularPath.move(to: CGPoint.init(x: 20, y: 0))
    circularPath.addLine(to: CGPoint.init(x: circularView.bounds.width - 20, y: 0))
    circularPath.addQuadCurve(to: CGPoint.init(x: circularView.bounds.width, y: 20), control: CGPoint.init(x: circularView.bounds.width, y: 0))
    circularPath.addLine(to: CGPoint.init(x: circularView.bounds.width, y: circularView.bounds.height - 20))
    circularPath.addQuadCurve(to: CGPoint.init(x: circularView.bounds.width - 20, y: circularView.bounds.height), control: CGPoint.init(x: circularView.bounds.width, y: circularView.bounds.height))
    circularPath.addLine(to: CGPoint.init(x: 20, y: circularView.bounds.height))
    circularPath.addQuadCurve(to: CGPoint.init(x: 0, y: circularView.bounds.height - 20), control: CGPoint.init(x: 0, y: circularView.bounds.height))
    circularPath.addLine(to: CGPoint.init(x: 0, y: 20))
    circularPath.addQuadCurve(to: CGPoint.init(x: 20, y: 0), control: CGPoint.init(x: 0, y: 0))


    let maskLayer = CAShapeLayer()
    maskLayer.path = circularPath
    maskLayer.fillRule = kCAFillRuleEvenOdd
    maskLayer.fillColor = UIColor.red.cgColor
    circularView.layer.mask = maskLayer


}

Change the values according to your need. Output:

回答2:

use this extension method:

extension UIView {
    func addGradientLayer(with colors: [CGColor], startPoint: CGPoint, endPoint: CGPoint, locations: [NSNumber] = [0.0, 1.0], frame: CGRect = CGRect.zero) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = colors

        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint

        gradientLayer.locations = locations
        gradientLayer.frame = frame

        gradientLayer.cornerRadius = self.layer.cornerRadius
        self.layer.insertSublayer(gradientLayer, at: 0)
    }
}

回答3:

You can possibly use the Following Code:

func setGradientBorderWidthColor(view: UIView)
{
    let gradientColor = CAGradientLayer()
    gradientColor.frame =  CGRect(origin: CGPoint.zero, size: view.frame.size)
    gradientColor.colors = [UIColor.blue.cgColor, UIColor.green.cgColor]

    let pathWithRadius = UIBezierPath(roundedRect:view.bounds, byRoundingCorners:[.topRight, .topLeft, .bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20.0, height: 20.0))
    let shape = CAShapeLayer()
    shape.lineWidth = 3
    shape.path = pathWithRadius.cgPath
    shape.strokeColor = UIColor.black.cgColor
    shape.fillColor = UIColor.clear.cgColor
    gradientColor.mask = shape
    view.layer.mask = shape
    view.layer.addSublayer(gradientColor)
}

You can use this as:

    let myView = UIView()
    myView.backgroundColor = UIColor.gray
    myView.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
    setGradientBorderWidthColor(view: myView)
    self.view.addSubview(myView)

Output is like this:

Hope this Helps!

来源：https://stackoverflow.com/questions/49878293/how-to-add-rounded-corners-to-a-uiview-with-gradient-applied

标签

swift

xcode

uiview

cgrect