如何在 UIButton 中创建边框？

小开

它非常简单，只需在文件中添加 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;

类似于分段控件。

更新:

不需要加上“石英核”

只要做:

button.layer.cornerRadius = 8.0
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

小开

最佳答案

您可以通过访问按钮的层属性来设置 CALayer 上的边框属性。

首先，加入石英

#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 允许你设置其他属性，比如角半径，maskToBound 等等。

此外，一篇关于按钮乐趣的好文章:

Https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php

小开

在 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];

小开

设置图层的 borderWidth和 borderColor的问题在于，当你触摸按钮时，边框不会产生高亮效果。

当然，您可以观察按钮的事件并相应地更改边框颜色，但是感觉没有必要。

另一种选择是创建一个可伸缩的 UIImage，并将其设置为按钮的背景图像。你可以像下面这样在 Imagees.xcassets 中创建一个 Image 集:

Images.xcassets

然后，将其设置为按钮的背景图像:

Button properties

如果您的图像是一个模板图像，您可以设置色彩的按钮和边框将改变:

Final 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子类，它支持突出显示的状态动画，而不使用图像。当视图的着色模式改变时，它还会更新边框颜色。

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 isHighlighted: Bool {
didSet {
let fadedColor = tintColor.withAlphaComponent(0.2).cgColor


if isHighlighted {
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.add(animation, forKey: nil)
}
}
}
}

用法:

let button = BorderedButton(style: .System) //style .System is important

外表:

小开

更新 Swift 3

    button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.blue.cgColor

小开

这里是一个更新版本(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标记，所得到的按钮可以在 StoryBoard 中使用。

此外，还定义了两个属性，允许您直接在 Interface Builder 上设置边框宽度和颜色，并预览结果。

还可以以类似的方式添加其他属性，如边框半径和突出显示淡出时间。

小开

在 Swift 3中

创建边框

 btnName.layer.borderWidth = 1
btnName.layer.borderColor = UIColor.black.cgColor

使转角变圆

 btnName.layer.cornerRadius = 5

小开

这可以通过 Swift 3.0在2017年8月至8月的最新版本中使用的各种方法来实现

选项1:

直接为 UI Button 分配 borderWidth 属性值:

  btnUserButtonName.layer.borderWidth = 1.0

用 UI 按钮的默认颜色值设置标题:

btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)

为 UI 按钮的边框属性值设置默认颜色的边框:

btnUserButtonName.layer.borderColor = UIColor.red

为 UI Button 的边框属性值设置用户定义的 Color:

   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()

扩展方法输出按钮:

小开

Swift 5

button.layer.borderWidth = 2

更改边框使用的颜色

button.layer.borderColor = CGColor(srgbRed: 255/255, green: 126/255, blue: 121/255, alpha: 1)