[Swift]コードで書いたボタンに角丸、影をつけたい。

Question

前提・実現したいこと

swiftでボタンを、コードで書いています。
ボタンに角を丸くする、影をつけることがどうしても上手くいきません。
ご教授よろしくお願いいたします。
[参考にしたサイト]
ここ
ここ

発生している問題

角が丸くならず影だけがついてしまいます。

該当のソースコード

　　　
    let sButtonImage:UIImage = UIImage(named: "xxxxxx")!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let sButton = UIButton(frame: CGRect(x: 0, y: 0, width: 360, height: 200 ))

        sButton.setImage(sButtonImage, for: UIControlState())
        sButton.center = CGPoint(x: 375/2, y: 200)
        sButton.layer.cornerRadius = 10
        sButton.layer.shadowColor = UIColor.black.cgColor
        // 透明度
        sButton.layer.shadowOpacity = 0.5
        // 距離
        sButton.layer.shadowOffset = CGSize(width: 5, height: 5)
        // ぼかし量
        sButton.layer.shadowRadius = 5
        
        view.addSubview(sButton)
        
    }

補足情報（FW/ツールのバージョンなど）

swit4.0 xcode9.4.1

Answer 1

テキストでタイトルを表示するボタンであれば、
sButton.backgroundColorを設定して
ボタン全体に色をつければ、それが角丸に表示され、
影もつきます。

画像をボタンにする場合、まず先に指摘しておきますが、
sButton.setImage()は、テキストタイトルの
左に表示するアイコン画像の設定なので、ボタン全体に
画像が表示されません。ボタン全体を画像にしたい場合は
sButton.setBackgroundImage()を使って
ボタンの背景画像に設定する必要があります。

ただ、画像を設定した場合は、cornerRadiusを設定した
だけでは角丸にならず、masksToBoundsをtrueにして
角丸ではみ出た画像をカットするよう設定する必要があります。
しかし、こうすると影もカットされてしまうので、うまくいきません。

そこで、画像を角丸にカットした上で影をつけたい場合は、
画像ボタンを角丸にした上で、影表示用のビューを別に作り、
それに画像ボタンを乗せるとうまくいきます。

        // 影表示用のビュー
        let shadowView = UIView(frame: CGRect(x: 0, y: 0, width: 360, height: 200 ))
        shadowView.center = CGPoint(x: 375/2, y: 200)
        shadowView.layer.shadowColor = UIColor.black.cgColor
        shadowView.layer.shadowOpacity = 0.5
        shadowView.layer.shadowOffset = CGSize(width: 5, height: 5)
        shadowView.layer.shadowRadius = 5

        // 画像ボタン
        let sButton = UIButton(frame: shadowView.bounds)
        sButton.setBackgroundImage(sButtonImage, for: [])
        sButton.layer.cornerRadius = 10
        sButton.layer.masksToBounds = true

        // 影表示用のビューに画像ボタンを乗せる
        shadowView.addSubview(sButton)
        
        // 影表示+画像ボタンのビューを乗せる
        view.addSubview(shadowView)

Comments

[sya]

うまくいくことができました。
ご教授ありがとうございました。