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

buttonSwift

*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

button.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
スポンサーリンク

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)

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

Circle button
スポンサーリンク

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

Circle Button

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

Circle button

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! !! 😉

コメント

タイトルとURLをコピーしました