【Swift】UIButtonを丸くする方法（基本文法）

2019/5/25 2019/9/19 プログラミング

UIButtonを角丸にする方法。かわいい感じのUIにしたいときによく使うのでメモ。
Buttonクラスが直接持つプロパティではなく、
Buttonクラスの持つCALayerで調整する。

実行環境

Swift：4.1.2
Xcode:10.1

UIButtonを丸くする方法

 import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var button: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.button.frame = CGRect(x: (self.view.frame.size.width / 2) - 150, y: (self.view.frame.size.height / 2) - 50, width: 300, height: 100)
        self.button.backgroundColor = UIColor.red
        
        //角丸の程度を指定
        self.button.layer.cornerRadius = 10.0
    }

}

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var button: UIButton!

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

}

override func viewDidLayoutSubviews() {

super.viewDidLayoutSubviews()

self.button.frame = CGRect(x: (self.view.frame.size.width / 2) - 150, y: (self.view.frame.size.height / 2) - 50, width: 300, height: 100)

self.button.backgroundColor = UIColor.red

//角丸の程度を指定

self.button.layer.cornerRadius = 10.0

}

なお、以下のようにボタンに画像を突っ込んでいるときは、下記のように設定しないと角丸にならないので、要注意。

let picture = UIImage(named: "Sample")
self.button.setImage(picture, for: .normal)
self.button.layer.masksToBounds = true

let picture = UIImage(named: "Sample")

self.button.setImage(picture, for: .normal)

self.button.layer.masksToBounds = true