UIView의 borderColor를 그라데이션으로 만들고 싶습니다.

잘하는 방법 전혀 모르기 때문에 누군가를 가르쳐주세요 ...
했던 일

①View의 layer에 CAGradientLayer를 Mask한 것을 추가한다


        let color: [UIColor] = [.yellow, .cyan]
        let gradientLayer = CAGradientLayer()
        gradientLayer.bounds.size = CGSize(width: 200, height: 200)
        gradientLayer.position = view.center
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        gradientLayer.colors = color.map { $0.cgColor }
        view.layer.addSublayer(gradientLayer)

        let maskLayer = CAShapeLayer()
        maskLayer.fillRule = kCAFillRuleEvenOdd
        let path = UIBezierPath(ovalIn: gradientLayer.bounds.insetBy(dx: 4, dy: 4))
        path.append(UIBezierPath(ovalIn: gradientLayer.bounds))
        maskLayer.fillColor = UIColor.red.cgColor
        maskLayer.path = path.cgPath
        path.fill()
        gradientLayer.mask  = maskLayer



viewDidLoad에 붙이면 이런 느낌.
이번은 위의 원형이었기 때문에 이것으로 해결했지만 애니메이션 붙이거나 직사각형으로 하거나 하기에는 한 번 걸릴 것 같다.

② 그라데이션의 UIColor를 작성해 View의 borderColor에 지정한다.



Sketch와 같이 border색에 직접 그라데이션의 색 지정할 수 있으면 편하기 때문에
애초에 UIColor.gradient 같은 것은 없을까-라고 조사하면
아래 코드와 같은 것을 발견했다.

    func colorWithGradient(size: CGSize, colors: [UIColor]) -> UIColor {

        let backgroundGradientLayer = CAGradientLayer()
        backgroundGradientLayer.frame = CGRect(origin: .zero, size: size)
        backgroundGradientLayer.colors = colors.map { $0.cgColor }
        UIGraphicsBeginImageContext(size)
        backgroundGradientLayer.render(in: UIGraphicsGetCurrentContext()!)
        let backgroundColorImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return UIColor(patternImage: backgroundColorImage!)
    }


        let label = UILabel()
        label.text = "gradation border"
        label.textColor = .lightGray
        label.textAlignment = .center
        label.bounds.size = CGSize(width: 200, height: 40)
        label.center = view.center
        label.layer.borderColor = colorWithGradient(size: CGSize(width: 200, height: 40), colors: [.cyan, .magenta]).cgColor
        label.layer.borderWidth = 2
        label.layer.cornerRadius = 20
        view.addSubview(label)


이것이라든가 제대로 읽으면 알지도 모르지만, 조금 시간 걸릴 것 같아··

좋은 웹페이지 즐겨찾기