如何在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; 

这与分段控件类似。

设置图层的borderWidthborderColor在于,当您触摸button时,边框不会为高光效果设置animation效果。

当然,你可以观察button的事件,并相应地改变边框的颜色,但是感觉没有必要。

另一种select是创build一个可伸缩的UIImage,并将其设置为button的背景图像。 您可以像这样在Images.xcassets中创build一个图像集:

Images.xcassets

然后,将其设置为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