📝

Twitterのツイート作成のような丸い立体的なボタン作る

2022/07/09に公開

実現したいこと

Twitterのタイムラインの右下に、丸いプラスマークのボタンがある。今回は、このボタンのように、丸い立体的なボタンを作成したい。

実装方法

コードは以下のようにする。
今回はStoryBoard上でボタンを作成し、コードで見た目を変えていく。

ViewController
import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var testButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureTestButton()
    }
    
    func configureTestButton() {
        //ボタンを丸くする処理。ボタンが正方形の時、一辺を2で割った数値を入れる。(今回の場合、 ボタンのサイズは70×70であるので、35。)
        testButton.layer.cornerRadius = 35
	//影の色を指定。(UIColorをCGColorに変換している)
        testButton.layer.shadowColor = UIColor.black.cgColor
	//影の縁のぼかしの強さを指定
        testButton.layer.shadowRadius = 3
	//影の位置を指定
        testButton.layer.shadowOffset = CGSize(width: 1.5, height: 1.5)
	//影の不透明度(濃さ)を指定
        testButton.layer.shadowOpacity = 1.0
    }    
}

実行すると下のようなボタンになる。

Discussion