ios - 在自定义 UIView 边框上设置渐变颜色
问题描述
我有一个里面有一个按钮UIView
的 2 UILabels
,我想在它的边框上添加一个渐变颜色。我设法添加了它,并且按钮最终移到了自定义之外,而自UIView
定义UIView
也在较小的设备上一直向外缩小。我该如何解决UIView
以保持相同的大小gradient color
这是最初UIView
的两个UILabels
和一个按钮,里面有一个正常的边框颜色
在这里应用渐变颜色后的外观
这是我如何应用渐变的代码。
@IBOutlet weak var customView: UIView!
let gradient = CAGradientLayer()
gradient.frame.size = self.customView.frame.size
gradient.colors = [UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.red.cgColor]
gradient.startPoint = CGPoint(x: 0.1, y: 0.78)
gradient.endPoint = CGPoint(x: 1.0, y: 0.78)
let shapeLayer = CAShapeLayer()
shapeLayer.path = UIBezierPath(rect: self.customView.bounds).cgPath
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = 4
gradient.mask = shapeLayer
self.customView.layer.addSublayer(gradient)
解决方案
视图调整大小时图层不会调整大小,因此您要创建自定义视图并覆盖layoutSubviews()
。
这是一个例子:
@IBDesignable
class GradBorderView: UIView {
var gradient = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() -> Void {
layer.addSublayer(gradient)
}
override func layoutSubviews() {
gradient.frame = bounds
gradient.colors = [UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.red.cgColor]
gradient.startPoint = CGPoint(x: 0.1, y: 0.78)
gradient.endPoint = CGPoint(x: 1.0, y: 0.78)
let shapeLayer = CAShapeLayer()
shapeLayer.path = UIBezierPath(rect: bounds).cgPath
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = 4
gradient.mask = shapeLayer
}
}
现在,当您的视图根据约束和自动布局更改大小时,您的渐变边框将正确“自动调整大小”。
此外,通过使用@IBDesignable
,您可以在 Storyboard / Interface Builder 中布置视图时查看结果。
这是Grad Border View
宽度设置为时的外观240
:
并将Grad Border View
宽度设置为320
:
编辑
如果我们想使用圆角,我们可以将形状图层路径设置为圆角矩形贝塞尔路径,然后还设置视图图层的圆角半径。
例如:
override func layoutSubviews() {
let cRadius: CGFloat = 8.0
let bWidth: CGFloat = 4.0
// layer border is centered on layer edge
let half: CGFloat = bWidth * 0.5
// make gradient frame size of view + half the border width
gradient.frame = bounds.insetBy(dx: -half, dy: -half)
gradient.colors = [UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.red.cgColor]
gradient.startPoint = CGPoint(x: 0.1, y: 0.78)
gradient.endPoint = CGPoint(x: 1.0, y: 0.78)
let shapeLayer = CAShapeLayer()
// make shapeLayer path the size of view OFFSET by half the border width
// with rounded corners
shapeLayer.path = UIBezierPath(roundedRect: bounds.offsetBy(dx: half, dy: half), cornerRadius: cRadius).cgPath
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = bWidth
gradient.mask = shapeLayer
// same corner radius as shapeLayer path
layer.cornerRadius = cRadius
}
推荐阅读
- c# - 为两种类似方法编写一种通用方法的正确方法?
- android - 如果未在 firebase 中链接,则停止使用电话号码登录
- java - 如何长时间操作位?
- javascript - 如何在 Bootstrap 3 进度条中给出计算出的宽度?
- ios - UITextField 上的清除按钮
- typescript - 如何使用 Typescript 添加网格以伪造查看器 v6?
- c# - 在忽略 xmlns 的同时更改元素值
- c++ - 如何修复条件复制期间发生的崩溃
- python - 如何在 Tensorflow 中获得损失 wrt 模型预测的梯度?
- office-js - 如何使用 officjs 关闭浏览器