LoginSignup
7
7

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-06-01

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

①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

スクリーンショット 2018-06-01 11.06.18.png

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!)
    }

スクリーンショット 2018-06-01 10.55.26.png

        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)

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

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7