UIButton 그라데이션 배경을 스토리 보드에서 설정

소개

UIButton의 배경에 그라데이션을 붙이는 장면이 있었으므로, Storyboard상에서 외형을 보면서 설정할 수 있으면 좋겠다고 생각 UIButton의 서브 클래스를 만들었습니다.

환경: Xcode10.0, Swift 4

코드

IBDesignable을 붙이면 스토리 보드에서 설정할 수 있으며 설정하려는 변수에는 IBInspectable을 붙입니다.
상부의 색과 하부의 색을 설정, 또 테두리의 색・굵기, 각환도 설정할 수 있도록 하고 있습니다.

import UIKit

@IBDesignable
class BGButton: UIButton {

    var gradientLayer = CAGradientLayer()

    @IBInspectable var startColor: UIColor = UIColor.white {
        didSet {
            setGradient()
        }
    }

    @IBInspectable var endColor: UIColor = UIColor.black {
        didSet {
            setGradient()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            setGradient()
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
            setGradient()
        }
    }

    @IBInspectable var borderColor: UIColor = UIColor.clear {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var startPoint: CGPoint = CGPoint(x: 0, y: 0.5) {
        didSet {
            setGradient()
        }
    }

    @IBInspectable var endPoint: CGPoint = CGPoint(x: 0, y: 1) {
        didSet {
            setGradient()
        }
    }

    private func setGradient() {

        gradientLayer.removeFromSuperlayer()

        gradientLayer = CAGradientLayer()
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        gradientLayer.frame.size = frame.size
        gradientLayer.frame.origin = CGPoint.init(x: 0.0, y: 0.0)
        gradientLayer.cornerRadius = cornerRadius
        gradientLayer.zPosition = -100
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
        self.layer.insertSublayer(gradientLayer, at: 0)
        self.layer.masksToBounds = true

        imageView?.layer.zPosition = 0

    }

}

사용법

위의 코드를 BGButton.swift 등 적절한 파일을 만들어 복사하십시오.

UIButton을 배치하고 CustomClass에 위 코드의 클래스를 설정합니다.

상하의 색, 테두리, 둥근, 그라데이션의 방향을 좋아하는 것으로 바꿉니다.

※ 상당히 시간 없이 만들었기 때문에 이상한 곳 있을지도입니다.
있으면 가르쳐주세요.

- 10/25 추가
imageView 설정하면 표시되지 않는 것을 고쳤습니다.