【Swift】よくみかける立体的で丸いボタンをコードで作ってみた(解説付き)

よく色々なアプリで見かける立体的で丸いボタンを作ってみました。
こんなやつです。

##環境
Xcode12.4
Swift5

#コード全体
先に上記で作成したボタンのコードを載せておきます。

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // ボタン作成
        let customButton = UIButton()

        // スクリーンサイズ取得
        let screenWidth:CGFloat = self.view.frame.width
        let screenHeight:CGFloat = self.view.frame.height

        // ボタンサイズ指定
        let buttonWidth: CGFloat = 100
        let buttonHeight: CGFloat = 100

        // ボタンに反映（中央に位置調整）
        customButton.frame = CGRect(
            x: screenWidth/2-buttonWidth/2,
            y: screenHeight/2-buttonHeight/2,
            width: buttonWidth,
            height: buttonHeight)

        // ボタンの背景色
        customButton.backgroundColor = UIColor.white

        // アプリ標準のシステム画像を設定
        customButton.setImage(UIImage(systemName: "location.fill"), for: .normal)
        // 画像の色をdarkGrayに変更
        customButton.tintColor = .darkGray

        // 縦幅・横幅いっぱいに画像を表示
        customButton.contentHorizontalAlignment = .fill
        customButton.contentVerticalAlignment = .fill

        // ボタンを丸くする(サイズ/2で設定)
        customButton.layer.cornerRadius = 50
        // 画像を縮小する(マージンのようなもの)
        customButton.imageEdgeInsets = UIEdgeInsets(top: 30, left: 30, bottom: 30, right: 30)

        // 影の色
        customButton.layer.shadowColor = UIColor.black.cgColor
        // 影のぼかし？
        customButton.layer.shadowRadius = 3
        // 影の位置
        customButton.layer.shadowOffset = CGSize(width: 1.5, height: 1.5)
        // 影の濃さ
        customButton.layer.shadowOpacity = 0.3

        // ボタンをViewに追加
        view.addSubview(customButton)
    }
}

#解説
##ボタン作成
まずはボタンを作って、画像を設定してみます。
ボタンの背景色は白だと見えないので一時的にlightGrayに設定。

// ボタン作成
let customButton = UIButton()

// スクリーンサイズ取得
let screenWidth:CGFloat = self.view.frame.width
let screenHeight:CGFloat = self.view.frame.height

// ボタンサイズ指定
let buttonWidth: CGFloat = 100
let buttonHeight: CGFloat = 100

// ボタンに反映（中央に位置調整）
customButton.frame = CGRect(
    x: screenWidth/2-buttonWidth/2,
    y: screenHeight/2-buttonHeight/2,
    width: buttonWidth,
    height: buttonHeight)

// ボタンの背景色を設定(わかりやすいように一時的にlightGrayを設定)
customButton.backgroundColor = UIColor.lightGray

// アプリ標準のシステム画像を設定
customButton.setImage(UIImage(systemName: "location.fill"), for: .normal)
// 画像の色をdarkGrayに変更
customButton.tintColor = .darkGray

// ボタンをViewに追加
view.addSubview(customButton)

見た目はこんな感じです。

##画像を幅いっぱいに広げる
画像を大きくしたいのでAligmentをfillにして幅いっぱいにする

// 縦幅・横幅いっぱいに画像を表示
customButton.contentHorizontalAlignment = .fill
customButton.contentVerticalAlignment = .fill

ちょっと大きすぎますが、一旦このままで。

##ボタンを丸くする
いよいよボタンを丸くします。
値はボタンのサイズ/2で設定すると丸くなります。

// ボタンを丸くする(サイズ/2で設定)
customButton.layer.cornerRadius = 50

画像がはみ出ていますが、丸くなりました。
先程Aligmentの設定をしましたが、さすがにcornerRadiusを考慮して自動的に小さくはならないですね。

##画像の大きさを調整する
画像を小さくするために、UIEdgeInsetsを追加します。
ボタンと画像の間にマージンを入れているようなもので、値が大きくなる程間隔が大きくなり、画像が小さくなります。

// 画像を縮小する(マージンのようなもの)
customButton.imageEdgeInsets = UIEdgeInsets(top: 30, left: 30, bottom: 30, right: 30)

画像の大きさが良い感じなりました。

##ボタンに影をつける
最後にボタンを立体的に見せるために、影をつけます。
ボタンの背景色は白くします。

// ボタンの背景色を白に戻す
customButton.backgroundColor = UIColor.white
// 影の色
customButton.layer.shadowColor = UIColor.black.cgColor
// 影のぼかし？
customButton.layer.shadowRadius = 3
// 影の位置
customButton.layer.shadowOffset = CGSize(width: 1.5, height: 1.5)
// 影の濃さ
customButton.layer.shadowOpacity = 0.3

立体的で丸いボタンのできあがりです。

##補足：影のプロパティについて
今回設定したshadowのプロパティが何なのかそれぞれみていきます。
###影の色(shadowColor)、影の濃さ(shadowOpacity)
影の色と濃さはそのまんまです。
例えば、赤色でもっと濃くしてみます。

// 影の色
customButton.layer.shadowColor = UIColor.red.cgColor
// 影の濃さ
customButton.layer.shadowOpacity = 0.9

こんな感じです。

###影のぼかし？(shadowRadius)
続いて影のぼかし？というのでしょうか。
値を大きすると影が広がります。

// 影のぼかし？
customButton.layer.shadowRadius = 50

影が大分広がりました。

###影の位置(shadowOffset)
最後に影の位置についてです。
値を大きくすると影が離れていきます。

// 影の位置
customButton.layer.shadowOffset = CGSize(width: 30, height: 30)

影がボタンから大きく離れました.

##おわり
最後まで読んで頂きありがとうございます。
不備や補足などありましたら教えて頂けますと助かります。