[Swift] Try setting background, Border, rounded corners on UIButton

＊Swift5, Xcode ver 12.1

I tried to make buttons with rounded corners and shadows, images and titles, and circler buttons

Font specification, font size
Put any character in the button title
Text color
Do not let the characters stick out
Border color of button
Border width of button
Rounded border of the button
Shadow color
Shadow opacity
Shadow radius
Shadow direction
Circler button
Button with image and title
Create a button subclass

Font specification, font size

button.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)

[Swift] iOS font list

[Swift] [Xcode] List of iOS fonts. I refer to it so that I can compare it with different fonts.

Put any character in the button title

button.setTitle("Button", for: .normal)

Text color

let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        //        button.setTitleColor(UIColor.blue, for: .normal)
        button.setTitleColor(textColor, for: .normal)

【Swift】How to change the color of Text

The code changes the Text color in System color, RGB, and color code. Please refer to it when changing the text color of labels and text.

Do not let the characters stick out

button.sizeToFit()

Border color of button

let borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
        button.layer.borderColor = borderColor

Border width of button

button.layer.borderWidth = 3

Rounded border of the button

button.layer.cornerRadius = 5

Shadow color

let shadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
        //        button.layer.shadowColor = UIColor.lightGray.cgColor
        button.layer.shadowColor = shadowColor

Shadow opacity

button.layer.shadowOpacity = 1.0

Shadow radius

button.layer.shadowRadius = 3

Shadow direction

As width = value increases, the shadow grows “to the right”, and as height = value increases, the shadow grows “downward”.

button.layer.shadowOffset = CGSize(width: 8, height: 8)

Circler button

circleButton.layer.cornerRadius = circleButton.bounds.width / 2
        print("height", circleButton.bounds.size.height)
        print("corner", circleButton.layer.cornerRadius)
        circleButton.clipsToBounds = true

Button with image and title

When using System image

UIImage(systemName: "chevron.right")

For custom images (images prepared by yourself), the code below will be used, so be careful when using them properly.

UIImage(named: "foo")

It’s called LTR or RTL. In this code, .forceLeftToRight is set so that the image is on the left. If you want to place the image on the right side, please use .forceRightToLeft

semanticContentAttribute = .forceLeftToRight

This code determines where in the image there is whitespace. Right now, I have set 20 spaces on the right side of the image.

imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0)

 let image = UIImage(systemName: "chevron.right")
        imageButton.setImage(image, for: .normal)
        let imageColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        imageButton.tintColor = imageColor
        imageButton.semanticContentAttribute = .forceLeftToRight
        imageButton.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0)

Whole code



import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var circleButton: UIButton!
    @IBOutlet weak var imageButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        button.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
        button.setTitle("Button", for: .normal)
        let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        //        button.setTitleColor(UIColor.blue, for: .normal)
        button.setTitleColor(textColor, for: .normal)
        button.sizeToFit()
        let backGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
        //        button.backgroundColor = UIColor.blue
        button.backgroundColor = backGroundColor
        let borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
        button.layer.borderColor = borderColor
        button.layer.borderWidth = 3
        button.layer.cornerRadius = 5
        let shadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
        //        button.layer.shadowColor = UIColor.lightGray.cgColor
        button.layer.shadowColor = shadowColor
        button.layer.shadowOpacity = 1.0
        button.layer.shadowRadius = 3
        button.layer.shadowOffset = CGSize(width: 8, height: 8)
        
        ///        Circler button

        circleButton.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
        circleButton.setTitle("Circle Button", for: .normal)
        let circleTextColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        //        button.setTitleColor(UIColor.blue, for: .normal)
        circleButton.setTitleColor(circleTextColor, for: .normal)
        let circleBackGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
        //        button.backgroundColor = UIColor.blue
        circleButton.backgroundColor = circleBackGroundColor
        let circleBorderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
        circleButton.layer.borderColor = circleBorderColor
        circleButton.layer.borderWidth = 3
        circleButton.layer.cornerRadius = circleButton.bounds.width / 2
        print("height", circleButton.bounds.size.height)
        print("corner", circleButton.layer.cornerRadius)
        circleButton.clipsToBounds = true
        
        ///Image with title button

        imageButton.titleLabel?.font = UIFont(name: "Helvetica Neue Bold", size: 17)
        imageButton.setTitle("Button", for: .normal)
        let imageTextColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        //        button.setTitleColor(UIColor.blue, for: .normal)
        imageButton.setTitleColor(imageTextColor, for: .normal)
        //        imageButton.sizeToFit()
        //        let imageBackGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
        //        button.backgroundColor = UIColor.blue
        //        imageButton.backgroundColor = imageBackGroundColor
        let imageBorderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
        imageButton.layer.borderColor = imageBorderColor
        imageButton.layer.borderWidth = 3
        imageButton.layer.cornerRadius = 5
        let imageShadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
        //        button.layer.shadowColor = UIColor.lightGray.cgColor
        imageButton.layer.shadowColor = imageShadowColor
        imageButton.layer.shadowOpacity = 1.0
        imageButton.layer.shadowRadius = 3
        imageButton.layer.shadowOffset = CGSize(width: 8, height: 8)
        //System imageの時はUIImage(systemName: "pencil")
        let image = UIImage(systemName: "chevron.right")
        imageButton.setImage(image, for: .normal)
        let imageColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        imageButton.tintColor = imageColor
        imageButton.semanticContentAttribute = .forceLeftToRight
        imageButton.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0)
    }
}

When I run this code, it looks like the image below

Create a button subclass

Writing the same code for each button can be tedious and difficult to read, so in such cases it is convenient to create a subclass of Button and it is convenient to omit unnecessary code.

Select New File and select Cocoa Touch Class

Please give the class a suitable name that is easy to understand.
*Select UIButton for Subclass

Let’s write the following code when File is successfully created

import UIKit

class CustomButton: UIButton {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        customDesign()
      }

      required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        customDesign()
      }
      
      override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        customDesign()
      }
      
      private func customDesign() {
        layer.borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
        layer.borderWidth = 2
        layer.cornerRadius = 5
        layer.backgroundColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1).cgColor
        layer.shadowOpacity = 2
        layer.shadowRadius = 3
        layer.shadowColor = UIColor.gray.cgColor
        layer.shadowOffset = CGSize(width: 4, height: 4)
        setTitleColor(UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0), for: .normal)
        titleLabel?.font = UIFont(name: "Helvetica Neue", size: 24)
        
      }
    }

Finally, select the button you want to apply in Storyboard, select the class you created earlier from Custom Class, and you’re done! !!

that’s all! Was it helpful? If you find it helpful, please like one button! !! 😉