うまいやり方全然わかなないのでどなたか教えてください・・・
やったこと
①ViewのlayerにCAGradientLayerをMaskしたものを追加する
.swift
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みたいなものはないのかなーって調べたら
下記コードのようなものを発見した。
.swift
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!)
}
.swift
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)
これとかちゃんと読めばわかるかもしれないけど、ちょっと時間かかりそう・・