如何在UIButton中创build边框?
我在我的应用程序名为“addButton”中使用自定义button,我想用白色边框它如何才能获得我的自定义button周围的白色边框?
您可以通过访问button的图层属性来设置CALayer上的边框属性。
首先,添加Quartz
#import <QuartzCore/QuartzCore.h>
设置属性:
myButton.layer.borderWidth = 2.0f; myButton.layer.borderColor = [UIColor greenColor].CGColor;
看到:
https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer
在上面的链接CALayer允许你设置其他属性,如angular半径,maskToBounds等…
另外,一个关于button乐趣的好文章:
https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php
它非常简单,只需在您的文件中添加quartzCore头(为此,您必须将石英框架添加到您的项目中)
然后做这个
[[button layer] setCornerRadius:8.0f]; [[button layer] setMasksToBounds:YES]; [[button layer] setBorderWidth:1.0f];
您可以根据需要更改浮点值。
请享用。
这是一些典型的现代代码…
self.buttonTag.layer.borderWidth = 1.0f; self.buttonCancel.layer.borderWidth = 1.0f; self.buttonTag.layer.borderColor = [UIColor blueColor].CGColor; self.buttonCancel.layer.borderColor = [UIColor blueColor].CGColor; self.buttonTag.layer.cornerRadius = 4.0f; self.buttonCancel.layer.cornerRadius = 4.0f;
这与分段控件类似。
设置图层的borderWidth
和borderColor
在于,当您触摸button时,边框不会为高光效果设置animation效果。
当然,你可以观察button的事件,并相应地改变边框的颜色,但是感觉没有必要。
另一种select是创build一个可伸缩的UIImage,并将其设置为button的背景图像。 您可以像这样在Images.xcassets中创build一个图像集:
然后,将其设置为button的背景图像:
如果你的图像是一个模板图像,你可以设置button的色调颜色,边框将会改变:
现在边框会在触摸时突出显示button的其余部分。
而在swift中,你不需要导入“QuartzCore / QuartzCore.h”
只要使用:
button.layer.borderWidth = 0.8 button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).CGColor
要么
button.layer.borderWidth = 0.8 button.layer.borderColor = UIColor.grayColor().CGColor
你现在不需要导入QuartzCore.h
。 参考iOS 8 sdk和Xcode 6.1。
直接使用:
[[myButton layer] setBorderWidth:2.0f]; [[myButton layer] setBorderColor:[UIColor greenColor].CGColor];
要改变button半径,颜色和宽度,我这样设置:
self.myBtn.layer.cornerRadius = 10; self.myBtn.layer.borderWidth = 1; self.myBtn.layer.borderColor =[UIColor colorWithRed:189.0/255.0f green:189.0/255.0f blue:189.0/255.0f alpha:1.0].CGColor;
这是一个UIButton
子类,它支持高亮显示的状态animation而不使用图像。 当视图的着色模式改变时,它也更新边框的颜色。
class BorderedButton: UIButton { override init(frame: CGRect) { super.init(frame: frame) layer.borderColor = tintColor.CGColor layer.borderWidth = 1 layer.cornerRadius = 5 contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10) } required init?(coder aDecoder: NSCoder) { fatalError("NSCoding not supported") } override func tintColorDidChange() { super.tintColorDidChange() layer.borderColor = tintColor.CGColor } override var highlighted: Bool { didSet { let fadedColor = tintColor.colorWithAlphaComponent(0.2).CGColor if highlighted { layer.borderColor = fadedColor } else { layer.borderColor = tintColor.CGColor let animation = CABasicAnimation(keyPath: "borderColor") animation.fromValue = fadedColor animation.toValue = tintColor.CGColor animation.duration = 0.4 layer.addAnimation(animation, forKey: "") } } } }
用法:
let button = BorderedButton(style: .System) //style .System is important
出现:
这是Ben Packard 答案的更新版本( Swift 3.0.1 )。
import UIKit @IBDesignable class BorderedButton: UIButton { @IBInspectable var borderColor: UIColor? { didSet { if let bColor = borderColor { self.layer.borderColor = bColor.cgColor } } } @IBInspectable var borderWidth: CGFloat = 0 { didSet { self.layer.borderWidth = borderWidth } } override var isHighlighted: Bool { didSet { guard let currentBorderColor = borderColor else { return } let fadedColor = currentBorderColor.withAlphaComponent(0.2).cgColor if isHighlighted { layer.borderColor = fadedColor } else { self.layer.borderColor = currentBorderColor.cgColor let animation = CABasicAnimation(keyPath: "borderColor") animation.fromValue = fadedColor animation.toValue = currentBorderColor.cgColor animation.duration = 0.4 self.layer.add(animation, forKey: "") } } } }
由于@IBDesignable
和@IBInspectable
标签,结果button可以在StoryBoard中使用。
同样定义了两个属性,允许您直接在界面构build器上设置边框宽度和颜色,并预览结果。
其他属性可以以类似的方式添加,边界半径和高亮衰落时间。
这可以通过Swift 3.0 Worked on Latest version(2017年8月 – 2017年)的各种方法来实现
选项1:
直接为UIbutton分配borderWidth属性值:
btnUserButtonName.layer.borderWidth = 1.0
为UIbutton设置默认颜色值的标题:
btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)
为UIbutton的边框属性值设置带有默认颜色的边框:
btnUserButtonName.layer.borderColor = UIColor.red
为用户界面button的边框属性值设置用户定义的颜色:
let myGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 ) btnUserButtonName.layer.borderColor = myGrayColor.cgColor
选项2:[推荐]
使用扩展方法,所以通过应用程序的button将看起来一致,并且不需要在每个地方重复多行代码。
//Create an extension class in any of the swift file extension UIButton { func setBordersSettings() { let c1GreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0)) self.layer.borderWidth = 1.0 self.layer.cornerRadius = 5.0 self.layer.borderColor = c1GreenColor.cgColor self.setTitleColor(c1GreenColor, for: .normal) self.layer.masksToBounds = true } }
代码中的用法:
//use the method and call whever the border has to be applied btnUserButtonName.setBordersSettings()
扩展方法的输出button:
用Swift 3更新
button.layer.borderWidth = 0.8 button.layer.borderColor = UIColor.blue.cgColor
****在Swift 3 ****
创build边框
btnName.layer.borderWidth = 1 btnName.layer.borderColor = UIColor.black.cgColor
使angular落圆angular
btnName.layer.cornerRadius = 5