【Swift】簡単なスライドメニューの作り方

よくあるヘッダーのボタンを押したらアニメーションでスライドして

メニューが開くViewを作っていきます。

やり方はたくさんありますが、今回はコード量も少なく

シンプルな作り方の説明をしていきます。

①Main.storyboardにUIを配置

1. 左上にUIButtonを配置します。
2. １番で配置したUIButtonの下にUIViewを配置します。
3. UIとコードの紐付けを行います。

ここではViewのWidthを240に設定をし、

わかりやすくするためbackgroundを設定しています。

※スライドしてくるViewをリスト表示したい方はここをUITableViewに変更してください

②ViewControllerにコードを書いていく

class ViewController: UIViewController {
    @IBOutlet weak var slideMenuView: UIView!
    @IBAction func touchedButton(_ sender: UIButton) {
        
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
    }
}

①までで上記のコードまでできているかと思います。

次の順序を書いていきます。

1. スライドViewが開いている時と閉じている時を判断するフラグを作る
2. 開閉のメソッドを作る
3. ボタンタがタップされた時のアクションを記述する

以上３点です。実際に記述していきます。

まず開いているのか、閉じているのかのフラグを作ります。

※始めは開いたままにしておきます。

var isExpanded: Bool =true

開閉のメソッドを作ります。

func showMenu(shouldExpand: Bool) {
    if shouldExpand {
        // show menu
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {

           self.slideMenuView.frame.origin.x = 0

        }, completion: nil)
    } else {
        // hide menu
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {

            self.slideMenuView.frame.origin.x = -240

        }, completion: nil)
    }
}

ボタンがタップされた時のアクションを記述します。

@IBAction func touchedButton(_ sender: UIButton) {
    isExpanded = !isExpanded
    showMenu(shouldExpand: isExpanded)
}

全てのコード

class ViewController: UIViewController {
    @IBOutlet weak var slideMenuView: UIView!
    var isExpanded: Bool = true
    @IBAction func touchedButton(_ sender: UIButton) {
        isExpanded = !isExpanded
        showMenu(shouldExpand: isExpanded)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
    }
    
    func showMenu(shouldExpand: Bool) {
        if shouldExpand {
            // show menu
            UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
                self.slideMenuView.frame.origin.x = 0
            }, completion: nil)
        } else {
            // hide menu
            UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
                self.slideMenuView.frame.origin.x = -240
            }, completion: nil)
        }
    }
}

ビルドしてみると以下の下記の動画のようになります！

slideMenud動画

ABOUT ME

goto

海外事業担当兼iOSエンジニア。 元々海外に行くことが好きで、海外で知り合った方に、CEO馬谷の話を聞き2019年2月に株式会社Playgroundに入社。 今も海外での生活、海外での仕事に憧れている。 今個人的にプライベートで行きたい国はイスラエルとポーランド。