📝
Twitterのツイート作成のような丸い立体的なボタン作る
実現したいこと
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