当我尝试将边框的颜色设置为渐变颜色时，如何解决此错误

Question

我创建了一个消息应用程序，我想将边框颜色设置为渐变而不是纯色。

到目前为止，当我运行我的代码时，所看到的是：

渐变颜色应该是每个消息单元格的边框颜色

我不知道是什么让它看起来像现在这样 这就是我的编码方式：

我创建了一个扩展来处理渐变，它看起来像这样：

extension UIView {
     func gradientButton( startColor:UIColor, endColor:UIColor) {

        let view:UIView = UIView(frame: self.bounds)

        let gradient = CAGradientLayer()
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradient.frame = self.bounds
        self.layer.insertSublayer(gradient, at: 0)
        self.mask = view

        view.layer.borderWidth = 2
    
}

}

当我设置渐变时，我在我的 chatController 类中这样设置

class ChatController: UICollectionViewController, UICollectionViewDelegateFlowLayout, ChatCellSettingsDelegate {

    func configureMessage(cell: ChatCell, message: Message) {
        cell.bubbleView.gradientButton(startColor: blue, endColor: green)
    }

bubbleView 包含文本，它是在我的 ChatCell 类中创建的消息的 textView：

class ChatCell: UICollectionViewCell {
    
    let bubbleView: UIView = {
    let bubble = UIView()
    bubble.backgroundColor = UIColor.rgb(red: 0, green: 171, blue: 154, alpha: 1)
    bubble.translatesAutoresizingMaskIntoConstraints = false
    bubble.layer.masksToBounds = true
    bubble.layer.cornerRadius = 13
    bubble.backgroundColor = .white
    return bubble
}()

let textView: UITextView = {
    let text = UITextView()
    text.text = "test"
    text.font = UIFont.systemFont(ofSize: 16)
    text.backgroundColor = .clear
    text.translatesAutoresizingMaskIntoConstraints = false
    text.isEditable = false
    return text
}()


}

我该如何解决这个问题？ 任何帮助都会有所帮助 谢谢

我可以使用下面的代码将边框颜色设置为纯色：

cell.bubbleView.layer.borderColor = UIColor.rgb(red: 91, green: 184, blue: 153, alpha: 0.8).cgColor

然后它看起来像这样：

Answer 1

您可以创建自己的边框视图并在自定义单元格中使用它：

import UIKit
import PlaygroundSupport
public class GradientBorder: UIView {
    var startColor:   UIColor = .black
    var endColor:     UIColor = .white
    var startLocation: Double = 0.05
    var endLocation:   Double = 0.95
    var path: UIBezierPath!
    let shape = CAShapeLayer()
    var lineWidth: CGFloat = 5
    override public class var layerClass: AnyClass { CAGradientLayer.self }
    var gradientLayer: CAGradientLayer { layer as! CAGradientLayer }
    func update() {
        gradientLayer.startPoint = .init(x: 0.0, y: 0.5)
        gradientLayer.endPoint   = .init(x: 1.0, y: 0.5)
        gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        path = .init(roundedRect: bounds.insetBy(dx: lineWidth/2, dy: lineWidth/2), byRoundingCorners: [.topLeft, .bottomLeft, .topRight, .bottomRight], cornerRadii: CGSize(width: frame.size.height / 2, height: frame.size.height / 2))
        shape.lineWidth = lineWidth
        shape.path = path.cgPath
        shape.strokeColor = UIColor.black.cgColor
        shape.fillColor = UIColor.clear.cgColor
        gradientLayer.mask = shape
    }
    override public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        update()
    }
}

---

游乐场测试：

let gradientBorderedView = GradientBorder()
gradientBorderedView.frame = .init(origin: .zero, size: .init(width: 200, height: 40))
let view = UIView()
view.frame = .init(origin: .zero, size: .init(width: 375, height: 812))
view.backgroundColor = .blue
view.addSubview(gradientBorderedView)
PlaygroundPage.current.liveView = view