How To Make Rounded Border Button In Swift

This example will tell you how to create a rounded border button in swift. It will also tell you how to align button in iOS app main screen, how to set button background color, how to set button width and height etc.

1. Rounded Border Button Example UI.

First let us look at the example execution screen as below picture. When the example code run, it will display two rounded border button. One button locate at the screen center ( both horizontal and vertical ), it’s border’s color is green. The other button locate below the first button, and it’s border color is red, it’s width fill the screen width horizontally. All the two buttons has 4 rounded corners.

two swift rounded border button example new

2. How To Create The Example Project And Prerequisites.

  1. First we should create a new swift Xcode project, you can refer article How To Create A Swift Project In Xcode. The project name is RoundedBorderButton. Below is the project files list.
    newly created swift xcode project files list
  2. Add two button from Xcode Library, you can read article How To Display Xcode Library, Assistant Editor, Inspectors Window. Double click the button to edit button text as below picture.
    display xcode ui elements library and search and use ui button

3. How To Make The First Button Locate At Screen Center.

  1. Click the first button to make it selected, then click View —> Inspectors —> Show Size Inspector menu item at Xcode top menu bar to display the Xcode Size Inspector panel window.
  2. Click both Center Horizontally In Container and Center Vertically In Container item in View —> Arrange —> Position View drop down list. Then you will find the button is located at screen center both horizontally and vertically.
    xcode size inspector window
READ :   iOS Auto Layout With Constraint Example

4. How To Make Button Fill The Screen Width.

  1. Select the second button, then show the Size Inspector panel window as above.
  2. Click Fill Container Horizontally item in View —> Arrange —> Position View drop down list. Then you will find the button fill the screen width.

5. How To Set Button Rounded Border In Swift Source Code.

  1. First we need to show Xcode Assistant Editor, after that we can see both storyboard window and source code window side by side. You can read article How To Display Xcode Library, Assistant Editor, Inspectors Window to learn more.
  2. Then add connections between storyboard and ViewController source code in assistant editor ( you can read article How To Connect Storyboard UI Component To ViewController Class Code ). I add two UIButton type outlet variable roundBorderButton and roundBorderButton1, then you can use these two property variable to modify the two button’s attributes.
    @IBOutlet weak var roundBorderButton: UIButton!
    
    @IBOutlet weak var roundBorderButton1: UIButton!
  3. Now you can change the button attribute to make it’s border rounded by override the ViewController’s viewDidLoad() function. Below is ViewController.swift file’s source code.
    //
    //  ViewController.swift
    //  RoundedBorderButton
    //
    //  Created by song zhao on 6/20/19.
    //  Copyright © 2019 dev2qa.com. All rights reserved.
    //
    
    import UIKit
    
    class ViewController: UIViewController {
        
        /* Declare two IBOutlet variable to refer to the two button in storyboard. */
        @IBOutlet weak var roundBorderButton: UIButton!
        @IBOutlet weak var roundBorderButton1: UIButton!
        
        
        override func viewDidLoad() {
            super.viewDidLoad()
        
            // Clear the first button's background color.
            roundBorderButton.backgroundColor = UIColor.clear
            
            // Set button corner radius.
            roundBorderButton.layer.cornerRadius = 10
            
            // Set button border width.
            roundBorderButton.layer.borderWidth = 2
            
            // Set button border color to green.
            roundBorderButton.layer.borderColor = UIColor.green.cgColor
            
            
            // Below is similar settings for the second button.
            roundBorderButton1.backgroundColor = UIColor.clear
            roundBorderButton1.layer.cornerRadius = 18
            roundBorderButton1.layer.borderWidth = 6
            roundBorderButton1.layer.borderColor = UIColor.red.cgColor
        
        }
    
    
    }
    
    

     

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.