blocks|key|728421|text|您可以通过访问按钮的CALayer属性来设置该按钮的边框属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|728422|首先，添加Quartz|728423|#import+<QuartzCore/QuartzCore.h>|code-block|syntax|javascript|728424|设置属性：|728425|myButton.layer.borderWidth+=+2.0f;
myButton.layer.borderColor+=+[UIColor+greenColor].CGColor;|728426|请参见：|728427|https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer|offset|length|728428|上面链接中的CALayer允许您设置其他属性，如拐角半径、maskToBounds等。|728429|另外，还有一篇关于按钮乐趣的好文章：|728430|https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php|728431|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|0|0|0|2F|0|0|0|0|0|2M|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@$Q|1D|R|1E|1|1F]]|A|$]]|$1|S|3|T|5|6|7|1G|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1H|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1I|8|@]|9|@$Q|1J|R|1K|1|1L]]|A|$]]|$1|Y|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|P]]|15|$5|11|12|13|A|$14|X]]]]

You can set the border properties on the CALayer by accessing the layer property of the button.

First, add Quartz

<pre><code>#import &lt;QuartzCore/QuartzCore.h&gt;
</code></pre>

Set properties:

<pre><code>myButton.layer.borderWidth = 2.0f;
myButton.layer.borderColor = [UIColor greenColor].CGColor;
</code></pre>

See:

<a href="https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer" rel="noreferrer">https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer</a>

The CALayer in the link above allows you to set other properties like corner radius, maskToBounds etc...

Also, a good article on button fun:

<a href="https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php" rel="noreferrer">https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php</a>

blocks|key|728485|text|在swift中，你不需要导入"QuartzCore/QuartzCore.h“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|728486|只需使用：|728487|button.layer.borderWidth+=+0.8
button.layer.borderColor+=+(UIColor(+red:+0.5,+green:+0.5,+blue:0,+alpha:+1.0+)).cgColor|code-block|syntax|javascript|728488|或|728489|button.layer.borderWidth+=+0.8
button.layer.borderColor+=+UIColor.grayColor().cgColor|728490|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

And in swift, you don't need to import "QuartzCore/QuartzCore.h"

Just use:

<pre><code>button.layer.borderWidth = 0.8
button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).cgColor
</code></pre>

or

<pre><code>button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.grayColor().cgColor
</code></pre>

blocks|key|512082|text|您现在不需要导入QuartzCore.h。参考iOS+8SDK和Xcode6.1。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|512083|直接使用：|512084|[[myButton+layer]+setBorderWidth:2.0f];
[[myButton+layer]+setBorderColor:[UIColor+greenColor].CGColor];|code-block|syntax|javascript|512085|entityMap^0|8|C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You don't need to import <code>QuartzCore.h</code> now. Taking iOS 8 sdk and Xcode 6.1 in referrence.

Directly use:

<pre><code>[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor greenColor].CGColor];
</code></pre>

blocks|key|512293|text|设置图层的borderWidth和borderColor的问题是，当你触摸按钮时，边框不会产生高亮效果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|512294|当然，您可以观察按钮的事件并相应地更改边框颜色，但这感觉没有必要。|512295|另一种选择是创建一个可伸展的UIImage，并将其设置为按钮的背景图像。您可以在Images.xcassets中创建图像集，如下所示：|512296|​|512297|📷|atomic|512298|512299|然后，将其设置为按钮的背景图像：|512300|512301|512302|512303|如果您的图像是模板图像，您可以设置按钮的色调颜色，边框将更改：|512304|512305|512306|512307|现在，当触摸时，边框将与按钮的其余部分一起高亮显示。|512308|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/91c645e4373d254ffc1dffadb2ac23d3.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/809b1b154926824534e1d6094b5df1a1.png|2|https://ask.qcloudimg.com/http-save/yehe-900000/78f0152dda71cb4f9a114c991224c83b.png^0|5|B|H|B|0|0|0|0|0|1|0|0|0|0|0|0|1|1|0|0|0|0|0|1|2|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1K|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1L|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|O|3|K|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1R|8|@]|D|@]|E|$]]|$1|R|3|K|5|6|7|1S|8|@]|D|@]|E|$]]|$1|S|3|M|5|N|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|T|3|K|5|6|7|1X|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|W|3|K|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|X|3|M|5|N|7|20|8|@]|D|@$9|21|A|22|1|23]]|E|$]]|$1|Y|3|K|5|6|7|24|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|25|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18|19|-4]]|1A|$5|14|15|16|E|$17|1B|19|-4]]|1C|$5|14|15|16|E|$17|1D|19|-4]]]]

The problem setting the layer's <code>borderWidth</code> and <code>borderColor</code> is that the when you touch the button the border doesn't animate the highlight effect.
Of course, you can observe the button's events and change the border color accordingly but that feels unnecessary.
Another option is to create a stretchable UIImage and setting it as the button's background image. You can create an Image set in your Images.xcassets like this:
<img src="https://i.stack.imgur.com/34Puw.png" alt="Images.xcassets" />
Then, you set it as the button's background image:
<img src="https://i.stack.imgur.com/yyJZG.png" alt="Button properties" />
If your image is a template image you can set tint color of the button and the border will change:
<img src="https://i.stack.imgur.com/XZTz6.png" alt="Final Button" />
Now the border will highlight with the rest of the button when touched.

blocks|key|512376|text|要更改我设置的按钮半径、颜色和宽度，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|512377|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;|code-block|syntax|javascript|512378|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To change button Radius, Color and Width I set like this:

<pre><code>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;
</code></pre>

blocks|key|512519|text|下面是一个UIButton子类，它支持高亮显示的状态动画，而不使用图像。当视图的色调模式改变时，它还会更新边框颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|512520|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)
++++++++++++}
++++++++}
++++}
}|code-block|syntax|javascript|512521|用法：|512522|let+button+=+BorderedButton(style:+.System)+//style+.System+is+important|512523|外观：|512524|​|512525|📷|atomic|512526|512527|512528|512529|512530|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/9827862ee702faea56a2dcdc5292def1.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/cb67e8b889eaabe70950f4952b9c781b.gif^0|5|8|0|0|0|0|20|0|0|0|0|1|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1E|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|T|5|U|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|V|3|R|5|6|7|1O|8|@]|D|@]|E|$]]|$1|W|3|R|5|6|7|1P|8|@]|D|@]|E|$]]|$1|X|3|T|5|U|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|Y|3|R|5|6|7|1U|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16|17|-4]]|18|$5|12|13|14|E|$15|19|17|-4]]]]

Here's a <code>UIButton</code> subclass that supports the highlighted state animation without using images. It also updates the border color when the view's tint mode changes.
<pre class="lang-swift prettyprint-override"><code>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(&quot;NSCoding not supported&quot;)
 }

 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: &quot;borderColor&quot;)
 animation.fromValue = fadedColor
 animation.toValue = tintColor.cgColor
 animation.duration = 0.4
 layer.add(animation, forKey: nil)
 }
 }
 }
}
</code></pre>
Usage:
<code>let button = BorderedButton(style: .System) //style .System is important</code>
Appearance:
<a href="https://i.stack.imgur.com/ZlkLR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZlkLR.png" alt="enter image description here" /></a>
<a href="https://i.stack.imgur.com/8l1DM.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8l1DM.gif" alt="enter image description here" /></a>

blocks|key|512602|text|使用Swift+3更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|512603|++++button.layer.borderWidth+=+0.8
++++button.layer.borderColor+=+UIColor.blue.cgColor|code-block|syntax|javascript|512604|​|512605|📷|atomic|offset|length|512606|512607|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/2c577d23ac9efe02160b8a0307f8f258.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

Update with Swift 3

<pre><code> button.layer.borderWidth = 0.8
 button.layer.borderColor = UIColor.blue.cgColor
</code></pre>

<a href="https://i.stack.imgur.com/fgzOX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fgzOX.png" alt="enter image description here"></a>

blocks|key|512650|text|*在Swift+3中*|type|unstyled|depth|inlineStyleRanges|entityRanges|data|512651|创建边框的步骤|512652|+btnName.layer.borderWidth+=+1
+btnName.layer.borderColor+=+UIColor.black.cgColor|code-block|syntax|javascript|512653|使圆角变圆角|512654|+btnName.layer.cornerRadius+=+5|512655|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

****In Swift 3****

To create border

<pre><code> btnName.layer.borderWidth = 1
 btnName.layer.borderColor = UIColor.black.cgColor
</code></pre>

To make corner rounded

<pre><code> btnName.layer.cornerRadius = 5
</code></pre>

blocks|key|512671|text|Swift+5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|512672|button.layer.borderWidth+=+2|code-block|syntax|javascript|512673|更改边框使用的颜色|512674|button.layer.borderColor+=+CGColor(srgbRed:+255/255,+green:+126/255,+blue:+121/255,+alpha:+1)|512675|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Swift 5

<pre><code>button.layer.borderWidth = 2
</code></pre>

To change the colour of the border use

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

I use custom button in my app named "addButton" and I want to border it with white color how can i get the white color border around my custom button?

How to create border in UIButton?

Swift

我在我的名为"addButton“的应用程序中使用了自定义按钮，并且我想要用白色来边框，我如何才能在自定义按钮周围获得白色边框？

问如何在UIButton中创建边框？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在UIButton中创建边框？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在UIButton中创建边框？
EN