ios - 创建带有渐变边框和渐变文本的清除按钮
问题描述
我正在尝试将渐变添加到我的 UIButton 标题和按钮的边框。我已经在这里完成了大部分解决方案,我无法为我的生活工作,可能已经过时了,我不确定。所以目前我扩展 UIView 以设置任何渐变。那么我该如何为这个功能添加另一个功能呢?
func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
let gradientlayer = CAGradientLayer()
gradientlayer.frame = bounds
gradientlayer.colors = [colorOne.cgColor, colorTwo.cgColor]
gradientlayer.locations = [0, 1]
gradientlayer.startPoint = CGPoint(x: 1.0, y: 0.0)
gradientlayer.endPoint = CGPoint(x: 0.0, y: 0.0)
layer.insertSublayer(gradientlayer, at: 0)
}
解决方案
我为您创建了一个演示,您可以在CAGradientLayer
查看以下输出和代码的帮助下完成此操作。
故事板:
对于渐变按钮文本颜色和边框放在你UIButton
里面UIView
,然后分配CAGradientLayer
给UIview
.
注意:-不要忘记将按钮设置为视图掩码,请参见以下代码。
import UIKit
class ViewController: UIViewController {
@IBOutlet var viewForButton: UIView!
@IBOutlet var myButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// Create a gradient layer
let gradient = CAGradientLayer()
// gradient colors in order which they will visually appear
gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
// Gradient from left to right
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
// set the gradient layer to the same size as the view
gradient.frame = viewForButton.bounds
// add the gradient layer to the views layer for rendering
viewForButton.layer.insertSublayer(gradient, at: 0)
// Tha magic! Set the button as the views mask
viewForButton.mask = myButton
//Set corner Radius and border Width of button
myButton.layer.cornerRadius = myButton.frame.size.height / 2
myButton.layer.borderWidth = 5.0
}
}
扩展名:您也可以更喜欢这个扩展名。
extension UIView{
func gradientButton(_ buttonText:String, startColor:UIColor, endColor:UIColor) {
let button:UIButton = UIButton(frame: self.bounds)
button.setTitle(buttonText, for: .normal)
let gradient = CAGradientLayer()
gradient.colors = [startColor.cgColor, endColor.cgColor]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
gradient.frame = self.bounds
self.layer.insertSublayer(gradient, at: 0)
self.mask = button
button.layer.cornerRadius = button.frame.size.height / 2
button.layer.borderWidth = 5.0
}
}
如何使用:
testView.gradientButton("Hello", startColor: .red, endColor: .blue)
推荐阅读
- java - 在 Spring Boot 中加载外部库的配置
- php - Delete id if not in database from a value
- javascript - 在 reactjs 中从 JSON 获取数组
- datatable - Eclipse 在使用 Cucumber 数据表时无法找到 raw() 方法
- sql - 用于查找具有某些值的记录的 SQL 查询在同一个表中具有不同的 id
- java - 当我将 javaFX stage 的 re-sizable 属性设置为 false 时,为什么我的内容周围会出现空白?
- arrays - Json-schema - 如何验证特定元素不在数组中?
- shuffle - 随机改组 Torch 张量
- api - 从 NVP 移植到 REST API
- python - 将excel文件中的所有excel表导入pandas