gpt4 book ai didi

ios - 如何在 Swift 4 的 UIView 中创建带圆角的渐变边框

转载 作者:行者123 更新时间:2023-11-28 10:08:01 37 4
gpt4 key购买 nike

我想在 UIView 中使用从左到右 [Red, Green] 的渐变设置边框颜色。像例子:

enter image description here

我试过下面的代码:-

class View: UIView {

override func layoutSubviews() {
super.layoutSubviews()

let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [.topLeft, .bottomLeft, .topRight, .bottomRight], cornerRadii: CGSize(width: frame.size.height / 2, height: frame.size.height / 2))

let gradient = CAGradientLayer()
gradient.frame = CGRect(origin: CGPoint.zero, size: frame.size)
gradient.colors = [UIColor.green.cgColor, UIColor.red.cgColor]

let shape = CAShapeLayer()
shape.lineWidth = 10
shape.path = path.cgPath
shape.strokeColor = UIColor.black.cgColor
shape.fillColor = UIColor.clear.cgColor
gradient.mask = shape

layer.insertSublayer(gradient, at: 0)
}
}

我无法解决三个问题:-
1- 我设置了 lineWidth 10,但它在角落和水平/垂直处的显示宽度仅为 5。
2- 我想显示从左到右而不是从上到下的渐变。

我尝试了下面的代码来设置从左到右的渐变但不起作用:-

//        gradient.frame =  CGRect(origin: CGPoint.zero, size: frame.size)
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)

enter image description here

请帮忙。提前致谢。

最佳答案

编辑

I want to set border from left to right

你需要改变 gradient.startPoint 和 gradient.endPoint

enum Direction {
case horizontal
case vertical
}

class View: UIView {

init(frame: CGRect, cornerRadius: CGFloat, colors: [UIColor], lineWidth: CGFloat = 5, direction: Direction = .horizontal) {
super.init(frame: frame)

self.layer.cornerRadius = cornerRadius
self.layer.masksToBounds = true
let gradient = CAGradientLayer()
gradient.frame = CGRect(origin: CGPoint.zero, size: self.frame.size)
gradient.colors = colors.map({ (color) -> CGColor in
color.cgColor
})

switch direction {
case .horizontal:
gradient.startPoint = CGPoint(x: 0, y: 1)
gradient.endPoint = CGPoint(x: 1, y: 1)
case .vertical:
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 0, y: 1)
}

let shape = CAShapeLayer()
shape.lineWidth = lineWidth
shape.path = UIBezierPath(roundedRect: self.bounds.insetBy(dx: lineWidth,
dy: lineWidth), cornerRadius: cornerRadius).cgPath
shape.strokeColor = UIColor.black.cgColor
shape.fillColor = UIColor.clear.cgColor
gradient.mask = shape

self.layer.addSublayer(gradient)
}

required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}

如您所见,我添加了一些额外的参数。我通过向 roundedRect 添加插图解决了这个问题:

shape.path = UIBezierPath(roundedRect: self.bounds.insetBy(dx: lineWidth, 
dy: lineWidth), cornerRadius: cornerRadius).cgPath

使用方法:

let myView = View(frame: CGRect(x: 0, y: 0, width: 200, height: 50), cornerRadius: 25, colors: [UIColor.red, .orange, .yellow], lineWidth: 2, direction: .horizontal)
myView.center = view.center
view.addSubview(myView)

截图:

roundedViewWithGradient

关于ios - 如何在 Swift 4 的 UIView 中创建带圆角的渐变边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51325250/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com