swift - 将圆角半径应用于递减按钮
问题描述
我有一个非常好看的按钮。
import UIKit
class NiseButtonVC: UIViewController {
var button = MyShrinkingButton()
var button2 = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
button = MyShrinkingButton()
button.bounds = CGRect(x: 0, y: 0, width: 200, height: 80)
button.center = view.center
button.addTarget(self, action: #selector(buttonPressed), for: .touchUpInside)
button.setTitle("button", for: .normal)
button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 40)
button.titleLabel?.adjustsFontSizeToFitWidth = true
let backGroundImage = UIImage.from(color: .orange)
button.setBackgroundImage(backGroundImage, for: .normal)
button.adjustsImageWhenHighlighted = false
// button.layer.cornerRadius = 10
// button.layer.masksToBounds = true
view.addSubview(button)
}
@objc func buttonPressed(sender: UIButton){
print("button pressed")
}
}
extension CGSize {
func sizeByDelta(dw:CGFloat, dh:CGFloat) -> CGSize {
return CGSize(width:self.width + dw, height:self.height + dh)
}
}
class MyShrinkingButton: UIButton {
override func backgroundRect(forBounds bounds: CGRect) -> CGRect {
var result = super.backgroundRect(forBounds:bounds)
if self.isHighlighted {
result = result.insetBy(dx: 3, dy: 3)
}
return result
}
override var intrinsicContentSize : CGSize {
return super.intrinsicContentSize.sizeByDelta(dw:25, dh: 20)
}
override func titleRect(forContentRect bounds: CGRect) -> CGRect {
var result = super.titleRect(forContentRect:bounds)
if self.isHighlighted {
result = result.insetBy(dx: 3, dy: 3)
}
return result
}
}
extension UIImage {
static func from(color: UIColor) -> UIImage {
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
context!.setFillColor(color.cgColor)
context!.fill(rect)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return img!
}
}
但我希望按钮具有圆角边缘。我可以将cornerRadius用于.normal状态,但是当按下按钮时效果消失。事实上,我想为按钮添加阴影,我可以自己添加阴影,但我不知道如何结合阴影和圆角边缘。
现在看起来
我想看看
我不能使用 button.backgroundColor 代替 button.setBackgroundColor,因为当你点击时按钮不会减小。这是我几周前发现的: UIButton 的方法“backgroundRect(forBounds:)”用于什么?
最终代码。只有影子不起作用。但圆角半径也只适用于 viewDidLoad:
import UIKit
class ViewController: UIViewController {
var button = ShrinkingButton()
override func viewDidLoad() {
super.viewDidLoad()
button = ShrinkingButton()
button.bounds = CGRect(x: 0, y: 0, width: 200, height: 80)
button.center = view.center
button.setTitle("button", for: .normal)
button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 40)
button.titleLabel?.adjustsFontSizeToFitWidth = true
button.backgroundColor = .orange
button.setTitleColor(.white, for: .normal)
button.adjustsImageWhenHighlighted = false
button.layer.cornerRadius = 10
button.layer.masksToBounds = true
view.addSubview(button)
}
}
class ShrinkingButton: UIButton {
override var isHighlighted: Bool {
didSet {
UIView.animate(withDuration: 0.1) {
self.isHighlighted ? self.layer.setAffineTransform(CGAffineTransform(scaleX: 0.9, y: 0.9 )) :
self.layer.setAffineTransform(.identity)
}
}
}
override func awakeFromNib() {
super.awakeFromNib()
layer.cornerRadius = 10
layer.shadowOffset = CGSize(width: -1, height: 2)
layer.shadowRadius = 5
layer.shadowOpacity = 0.5
}
}
解决方案
该按钮会消失,因为您仅将背景图像设置为正常状态。
这意味着对于任何其他状态,按钮都没有背景图像。
更好的方法是设置背景颜色而不是图像
button.backgroundColor = .orange
如果您想使用不仅仅是颜色的背景图像,那么也许您可以使用它
button.setBackgroundImage(image, for: UIControlState())
使用 showdow 在印刷机上产生收缩效果
import UIKit
class ShrinkingButton: UIButton {
override var isHighlighted: Bool {
didSet {
UIView.animate(withDuration: 0.1) {
self.isHighlighted ? self.layer.setAffineTransform(CGAffineTransform(scaleX: 0.9, y: 0.9 )) :
self.layer.setAffineTransform(.identity)
}
}
}
override func awakeFromNib() {
super.awakeFromNib()
layer.cornerRadius = 10
layer.shadowOffset = CGSize(width: -1, height: 2)
layer.shadowRadius = 5
layer.shadowOpacity = 0.5
}
}
推荐阅读
- python - 少数未知测试用例失败 - 字符串操作
- javascript - 如果没有在 URL 更改上重新加载页面,React 不会呈现
- regex - 正则表达式允许最大字符的字母数字直到 12 位
- sql - 选择另一个表中的列?
- php - 如何访问laravel中的相关表
- angular - Angular 9 - NGCC 失败并出现未处理的异常
- angular - Angular 9 Ivy 和 Wishtack ReactiveComponentLoader
- javascript - 如何使用 sql 查询将数据发送到 wordpress 数据库。我尝试通过以下代码发送数据
- c++ - 我的restapi客户端qt代码或设置有什么问题
- r - 绘制数据和操纵 y 轴