Written by elevenlab employee

[Swift]タップすると押し込んだように見えるボタン

CODEのみで作成しています

MyButton.swift

import UIKit

class MyButton: UIButton {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // ボタンの色を設定
        backgroundColor = .red
    }
    
    override func setNeedsLayout() {
        super.setNeedsLayout()
        
        // 円形処理
        layer.cornerRadius = frame.width / 2
        // 影の色を設定
        layer.shadowColor = UIColor.black.cgColor
        // 影の方向を設定 (下方向)
        layer.shadowOffset = CGSize(width: 0.0, height: 4.0)
        // 影の色の濃さを設定
        layer.shadowOpacity = 0.6
        // 影で囲う厚さ設定
        layer.shadowRadius = 1
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        // 指が画面に触れた時
        UIView.animate(withDuration: 0.01) {
            // 影の色を透明にする
            self.layer.shadowColor = UIColor.clear.cgColor
            // 下方向に動かす
            self.transform = self.transform.translatedBy(x: 0, y: 4)
        }
    }
    
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        // 指が画面から離れた時
        UIView.animate(withDuration: 0.01) {
            // 影の色を黒にする
            self.layer.shadowColor = UIColor.black.cgColor
            // 元の位置に戻す
            self.transform = CGAffineTransform.identity
        }
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

ViewController.swift

import UIKit

class ViewController: UIViewController {

    // 作成した MyButton クラスを使用
    let button = MyButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 画面の半分の長さをボタンの大きさに設定
        let buttonWidth = view.frame.width * 0.5
        button.frame.size = CGSize(width: buttonWidth, height: buttonWidth)
        // 画面の中心にボタンを配置
        button.center = view.center
        // ボタンを view に追加
        view.addSubview(button)
    }

}

完成

この記事を書いた人

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です