如何使一个简单的圆形按钮在故事板？

为了在故事板中完成这项工作，您需要为按钮使用一个图像。

或者你也可以用代码来做:

 btn.layer.cornerRadius = 10
btn.clipsToBounds = true

试试这个！

 override func viewDidLoad() {
super.viewDidLoad()


var button = UIButton.buttonWithType(.Custom) as UIButton
button.frame = CGRectMake(160, 100, 200,40)


button.layer.cornerRadius =5.0
button.layer.borderColor = UIColor.redColor().CGColor
button.layer.borderWidth = 2.0


button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
button.clipsToBounds = true


view.addSubview(button)
}
func OnClickroundButton() {
NSLog(@"roundButton Method Called");
}

您可以从故事板连接按钮的 IBOutlet。

然后您可以设置 corner radius的您的按钮，使它的角落圆。

例如，你的 outlet是 myButton,

Obj-C

 self.myButton.layer.cornerRadius = 5.0 ;

斯威夫特

  myButton.layer.cornerRadius = 5.0

如果你想要精确的圆形按钮，那么你的按钮的 width和 height必须是 equal和 cornerRadius必须等于高度或宽度/2(宽度或高度的一半)。

简短回答: 是的

你完全可以做一个简单的圆角按钮，而不需要额外的背景图片或编写相同的任何代码。只要按照下面给出的截图，设置按钮的运行时属性，就可以得到所需的结果。

它不会在 Storyboard中显示，但是当您运行该项目时，它会正常工作。

注:
「主要路径」 layer.cornerRadius，值为5。该值需要根据按钮的高度和宽度进行更改。它的公式是按钮的高度 * 0.50。因此，在模拟器或物理设备上围绕该值进行操作，以查看期望的圆角按钮。如果在故事板中有多个按钮要四舍五入，那么这个过程看起来会很乏味。

你可以这样做:

@IBDesignable class MyButton: UIButton
{
override func layoutSubviews() {
super.layoutSubviews()


updateCornerRadius()
}


@IBInspectable var rounded: Bool = false {
didSet {
updateCornerRadius()
}
}


func updateCornerRadius() {
layer.cornerRadius = rounded ? frame.size.height / 2 : 0
}
}

在 Identity Inspector中将类设置为 MyButton，在 IB 中将具有 rounded属性:

在故事板中添加 layer.cornerRadius时，要确保没有前导空格或尾随空格。如果复制粘贴，可能会插入空格。如果 XCode 显示某种警告或错误就好了。

1. 创建 Cocoa Touch 类。

2. 在 RoundButton 类中插入代码。

   import UIKit
   
   
   @IBDesignable
   class RoundButton: UIButton {
   
   
   @IBInspectable var cornerRadius: CGFloat = 0{
   didSet{
   self.layer.cornerRadius = cornerRadius
   }
   }
   
   
   @IBInspectable var borderWidth: CGFloat = 0{
   didSet{
   self.layer.borderWidth = borderWidth
   }
   }
   
   
   @IBInspectable var borderColor: UIColor = UIColor.clear{
   didSet{
   self.layer.borderColor = borderColor.cgColor
   }
   }
   }
   

3. Refer the image.

正如其他答案所建议的，在代码中执行大部分工作，只有一个答案实际上提供了一种方法来查看故事板 IB 接口中的更改。我的答案不仅仅是允许你改变视图、按钮、图像等的角半径。

请看下面的代码。使用这段代码创建一个名为 RoundedView 或任何你想叫它的快捷文件，然后转到你的故事板，并将类更改为“ RoundedView”，“ RoundedImageView”或“ RoundedButton”。

import UIKit


@IBDesignable class RoundedImage: UIImageView
{
override func layoutSubviews() {
super.layoutSubviews()


updateCornerRadius()
}


@IBInspectable var rounded: Bool = false {
didSet {
updateCornerRadius()
}
}


@IBInspectable var cornerRadius: CGFloat = 0.1 {
didSet {
updateCornerRadius()
}
}


func updateCornerRadius() {
layer.cornerRadius = rounded ? cornerRadius : 0
layer.masksToBounds = rounded ? true : false
}
}


@IBDesignable class RoundedView: UIView
{
override func layoutSubviews() {
super.layoutSubviews()


updateCornerRadius()
}


@IBInspectable var rounded: Bool = false {
didSet {
updateCornerRadius()
}
}


@IBInspectable var cornerRadius: CGFloat = 0.1 {
didSet {
updateCornerRadius()
}
}


func updateCornerRadius() {
layer.cornerRadius = rounded ? cornerRadius : 0
layer.masksToBounds = rounded ? true : false
}
}


@IBDesignable class RoundedButton: UIButton
{
override func layoutSubviews() {
super.layoutSubviews()


updateCornerRadius()
}


@IBInspectable var rounded: Bool = false {
didSet {
updateCornerRadius()
}
}


@IBInspectable var cornerRadius: CGFloat = 0.1 {
didSet {
updateCornerRadius()
}
}


func updateCornerRadius() {
layer.cornerRadius = rounded ? cornerRadius : 0
layer.masksToBounds = rounded ? true : false
}
}

import UIKit


@IBDesignable class MyButton: UIButton
{
override func layoutSubviews() {
super.layoutSubviews()




}


func updateCornerRadius(radius:CGFloat) {
layer.cornerRadius = radius
}
@IBInspectable var cornerRadius:CGFloat = 0{
didSet{
updateCornerRadius(radius: cornerRadius)
}
}
}

我发现最简单的方法是将角半径设置为视图高度的一半。

button.layer.cornerRadius = button.bounds.size.height/2

扩展是解决此问题的最佳选择。创建 View 或 Button 的扩展

public extension UIView {
//Round the corners
func roundCorners(){
let radius = bounds.maxX / 16
layer.cornerRadius = radius
}
}

从代码中调用它

button.roundCorners()

我正在使用 Xcode Version 11.4

在属性检查器中，可以定义拐角半径。

它不会显示在故事板中，但是当您运行项目时，它会正常工作。

按照下面的屏幕截图。当你运行模拟器的时候它会工作(在预览中看不到它)

Xcode 13添加了一个选项，通过调整“角落样式”属性(在“后台配置”下)来实现这一点。

必须在“背景配置”中配置背景，然后将“查看背景”设置为默认值(无)。

将背景默认设置更改为自定义

然后给出边界半径

结果是这样的

或者你也可以在 UIKit 和 iOS15 + 上编写代码

    var config = UIButton.Configuration.filled()
config.cornerStyle = .capsule
let btn = UIButton(configuration: config)
btn.tintColor = .blue