在Swift中具有透明背景的按钮边框

Question

How can I make a UIButton border to look alike in the below image (the "Getting Started") button with a transparent background?

How should I achieve this using storyboard or how to do it programmatically?

Answer 1

Setting the backgroundColor to clearColor makes the button transparent.
Try the code below for example. You can configure and vary the borderAlpha,cornerRadius and colours as your want.

let borderAlpha : CGFloat = 0.7
let cornerRadius : CGFloat = 5.0

button.frame = CGRectMake(100, 100, 200, 40)
button.setTitle("Get Started", forState: UIControlState.Normal)
button.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
button.backgroundColor = UIColor.clearColor()
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor(white: 1.0, alpha: borderAlpha).CGColor
button.layer.cornerRadius = cornerRadius

Answer 2

using Extension:

extension UIButton
{
 func setUpLayer(sampleButton: UIButton?) {
  sampleButton!.setTitle("GET STARTED", forState: UIControlState.Normal)
  sampleButton?.tintColor =  UIColor.whiteColor()
  sampleButton!.frame = CGRect(x:50, y:500, width:170, height:40)
  sampleButton!.layer.borderWidth = 1.0
  sampleButton!.layer.borderColor = UIColor.whiteColor().colorWithAlphaComponent(0.5).CGColor
  sampleButton!.layer.cornerRadius = 5.0

  sampleButton!.layer.shadowRadius =  3.0
  sampleButton!.layer.shadowColor =  UIColor.whiteColor().CGColor
  sampleButton!.layer.shadowOpacity =  0.3
 }

}

Usage:

  let sampleUIButton =  UIButton()
  sampleUIButton.setUpLayer(sampleUIButton)
  self.view.addSubview(sampleUIButton)

Answer 3

Using Swift 3, for Storyboard, just add this subclass to your project, then in the Identity Inspector, make this the class for the UIButton on your storyboard. You should then be able to adjust the boarder color and width.

@IBDesignable class CustomButton: UIButton {

 @IBInspectable var borderColor: UIColor = UIColor.white {
    didSet {
        layer.borderColor = borderColor.cgColor
    }
 }

 @IBInspectable var borderWidth: CGFloat = 2.0 {
    didSet {
        layer.borderWidth = borderWidth
    }
 }

 override public func layoutSubviews() {
    super.layoutSubviews()
    clipsToBounds = true
 }
}

Answer 4

Swift 5

Similar to @rakeshbs, but in Swift 5 :

    let borderAlpha : CGFloat = 0.7
    let cornerRadius : CGFloat = 5.0

    self.frame = CGRect(x: 100, y: 100, width: 200, height: 40)
    self.setTitle("Login", for: UIControl.State.normal)
    self.setTitleColor(UIColor.white, for: UIControl.State.normal)
    self.backgroundColor = UIColor.clear
    self.layer.borderWidth = 1.0
    self.layer.borderColor = UIColor(white: 1.0, alpha: borderAlpha).cgColor
    self.layer.cornerRadius = cornerRadius