Swift 如何让一个按钮有一个圆形的边框

在Swift中，你可以使用UIButton的layer属性来设置其边框的角半径。你可以使用层（CALayer）属性将边框宽度和颜色应用到按钮上。另外，同一属性还提供了对cornerRadius属性的访问，以使按钮变圆。

我们将使用下面的步骤来使按钮变成圆形的边框

第1步 – 在这一步中，创建一个具有基本自定义功能的按钮对象。
第2步– 在这一步中，为按钮添加一个边框和转角半径。
第3步 – 在这一步中，使按钮变成圆形。

例子

在这一步中，你将创建一个按钮并做一些基本的定制。以下是代码。

import UIKit
class TestController: UIViewController {   
   private let loginButton = UIButton()    
   override func viewDidLoad() {
      super.viewDidLoad()
      initialSetup()
   }    
   private func initialSetup() {        
      // basic setup
      view.backgroundColor = .white
      navigationItem.title = "UIButton"

      // log in button customization
      loginButton.setTitle("Button with rounded border", for: .normal)
      loginButton.setTitleColor(.red, for: .normal)

      // adding the constraints to the login button
      view.addSubview(loginButton)
      loginButton.translatesAutoresizingMaskIntoConstraints = false
      loginButton.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
      loginButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
      loginButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
      loginButton.widthAnchor.constraint(equalToConstant: 280).isActive = true
   }
}

输出

如何在Swift中让一个按钮有一个圆形的边框？

添加一个边框和角的半径

在这一步中，我们将为按钮添加一个角的半径和边框宽度。这里有一个例子–

例子

private func initialSetup() {   
   // basic setup

   // log in button customization

   // adding the constraints to the login button

   addButtonBorder()
}
private func addButtonBorder() {
   loginButton.layer.borderColor = UIColor.red.cgColor
   loginButton.layer.borderWidth = 1.5
   loginButton.layer.cornerRadius = 10.0
   loginButton.layer.masksToBounds = true
}

输出

如何在Swift中让一个按钮有一个圆形的边框？

使按钮的边框变圆

在这一步，我们将使按钮的边框变圆。这里有一个例子 –

例子

private func initialSetup() {
   // basic setup
   // log in button customization
   // adding the constraints to the login button
   makeButtonRounded()
}
private func makeButtonRounded() {
   loginButton.layer.borderColor = UIColor.red.cgColor
   loginButton.layer.borderWidth = 1.5
   loginButton.layer.cornerRadius = 25.0 // height / 2
   loginButton.layer.masksToBounds = true
}