UIViewのborderColorをグラデーションにしたい。

10918 ワード
Xcode iOS Swift Objective-C Objective-C テキストリンク

うまいやり方全然わかなないのでどなたか教えてください・・・
やったこと

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

これとかちゃんと読めばわかるかもしれないけど、ちょっと時間かかりそう・・