Question

我编写了UIView的自定义子类，在其中绘制了一个渐变：

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

}

我现在如何将圆边应用于此视图？

Answer 1

使用此扩展方法：

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

Answer 2

您可以使用以下方法添加带渐变的圆角UIView：

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


}

制作UIView并根据需要设置约束
使用您选择的颜色制作CAGradientLayer
制作一个圆形遮罩层并应用于UIView。

结果将如下所示：

制作弯曲的圆角半径使用渐变视图比圆形视图更难。并且可以像：

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


}

根据需要更改值。输出：

Answer 3

您可以使用以下代码：

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

您可以将其用作：

    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)

输出如下：

希望这有帮助！

如何在应用了渐变的UIView中添加圆角？

3 个答案: