Bagaimana cara menerapkan warna batas gradien ke UIButton?

Anda dapat membuat subkelas BorderedButton Anda sendiri yang akan:

• Tambahkan sublapisan gradien;
• Buat layer bentuk yang terdiri dari jalur perbatasan; Dan
• Gunakan layer bentuk itu sebagai masker pada layer gradien untuk menghasilkan batas gradien dalam bentuk jalur.

E.g.:

@IBDesignable
class BorderedButton: UIButton {
    @IBInspectable var lineWidth:    CGFloat = 3  { didSet { setNeedsLayout() } }
    @IBInspectable var cornerRadius: CGFloat = 10 { didSet { setNeedsLayout() } }

    let borderLayer: CAGradientLayer = {
        let borderLayer = CAGradientLayer()
        borderLayer.type = .axial
        borderLayer.colors = [#colorLiteral(red: 0.6135130525, green: 0.3031745553, blue: 0.9506058097, alpha: 1).cgColor, #colorLiteral(red: 0.9306473136, green: 0.1160953864, blue: 0.8244602084, alpha: 1).cgColor]
        borderLayer.startPoint = CGPoint(x: 0, y: 1)
        borderLayer.endPoint = CGPoint(x: 1, y: 0)
        return borderLayer
    }()

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configure()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configure()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        borderLayer.frame = bounds

        let mask = CAShapeLayer()
        let rect = bounds.insetBy(dx: lineWidth / 2, dy: lineWidth / 2)
        mask.path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).cgPath
        mask.lineWidth = lineWidth
        mask.fillColor = UIColor.clear.cgColor
        mask.strokeColor = UIColor.white.cgColor
        borderLayer.mask = mask
    }
}

private extension BorderedButton {
    func configure() {
        layer.addSublayer(borderLayer)
    }
}

Perhatikan bahwa:

• Saya memperbarui frame dari lapisan gradien dan jalur yang digunakan sebagai mask di dalam metode layoutSubviews, yang memastikan bahwa batas dirender dengan benar jika ukurannya berubah (misalnya Anda menggunakan batasan untuk menentukan ukuran tampilan).
• Saya telah membuat @IBDesignable ini sehingga Anda bahkan dapat menambahkan ini ke storyboard dan Anda akan melihatnya ditampilkan dengan benar.
• Saya telah membuat cornerRadius dan lineWidth menjadi @IBInspectable sehingga Anda dapat menyesuaikannya di IB (dan karena mereka memiliki didSet pengamat yang menetapkan “kebutuhan tata letak”, mereka akan memastikan bahwa perubahan dapat diamati di storyboard).

Bagaimanapun, itu menghasilkan: