UIView의 borderColor를 그라데이션으로 만들고 싶습니다.
10608 단어 XcodeiOSSwiftObjective-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)
이것이라든가 제대로 읽으면 알지도 모르지만, 조금 시간 걸릴 것 같아··
Reference
이 문제에 관하여(UIView의 borderColor를 그라데이션으로 만들고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/abouch/items/4fe1657255b8d2aba0c0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)