はじめに

なんかサイドメニューが出るアプリがかっこいいと思ったので作ってみた。
忘れると虚しいので備忘録としてQiitaさんに残す。

開発環境

Xcode8.1
Swift3.0

実装方法

イメージとしては、スクリーン内にメイン画面を表示し、左の画面外にサイドメニューを追加する。
アプリ起動直後はサイドメニューはスクリーン外にあるので、スクリーン内に表示されない。
ボタンを押すことで、スクリーン外のサイドメニューをアニメーション付きでスクリーン内に移動させる。
こんな感じでサイドメニューを実装してみた。

storyboard

storyboardでメイン画面とサイドメニューを作成
メイン画面にはサイドメニューを出し入れするためのボタンをつける
サイドメニューのstoryboard IDにsideMenuと入力する

ViewController.swift

import UIKit

class ViewController: UIViewController {

    //  サイドメニューが表示中かの真偽
    var isDisplayedSideMenu: Bool = false

    //  スクリーンサイズを格納するための変数
    var screenWidth: CGFloat = 0

    //  storyboard上のサイドメニュー(UIViewController)を格納するためのもの
    var sideMenuVC: UIViewController!


    override func viewDidLoad() {
        super.viewDidLoad()

        //  スクリーンの幅を取得して、変数に格納
        screenWidth = getScreenSize().0

        //  メインビューにサイドメニューを追加
        addSideMenu()
    }


    /*
     *  @IBAction
     */
    //  メイン画面のボタンと紐付ける
    @IBAction func button(_ sender: Any) {
        //  サイドメニューが表示されていない時
        if isDisplayedSideMenu == false {
            //  サイドメニューを出す
            displaySideMenu()
        }
        //  サイドメニューが表示されている時
        else {
            //  サイドメニューを閉じる
            closeSideMenu()
        }
    }


    /*
     *  メソッド
     */
    // スクリーンのサイズを取得するためのメソッド
    func getScreenSize() -> (CGFloat, CGFloat) {

        //  スクリーンサイズを取得
        let screenSize = UIScreen.main.bounds.size

        //  スクリーンの幅と高さを変数に格納
        let width: CGFloat = screenSize.width
        let height: CGFloat = screenSize.height

        return (width, height)
    }

    //  サイドメニューをメインビューに追加するためのメソッド
    func addSideMenu() {

        //  サイドメニューをメインビューに追加
        sideMenuVC = (storyboard?.instantiateViewController(withIdentifier: "sideMenu"))! as UIViewController
        self.addChildViewController(sideMenuVC)
        self.view.addSubview(sideMenuVC.view)
        sideMenuVC.didMove(toParentViewController: self)

        //  画面外に追加したサイドメニューを移動
        sideMenuVC.view.transform = CGAffineTransform(translationX: (screenWidth * -1), y: 0)
    }

    //  サイドメニューをメインビューに出すためのメソッド
    func displaySideMenu() {

        //  サイドメニューをアニメーション付きで移動させる
        UIView.animate(withDuration: 0.2, animations: { () -> Void in
            self.sideMenuVC.view.transform = CGAffineTransform(translationX: (self.screenWidth * -1/2), y: 0)
        })

        //  サイドメニューが表示されていることにする
        isDisplayedSideMenu = true
    }

    //  サイドメニューを格納するためのメソッド
    func closeSideMenu() {

        //  サイドメニューをアニメーション付きで移動させる
        UIView.animate(withDuration: 0.2, animations: { () -> Void in
            self.sideMenuVC.view.transform = CGAffineTransform(translationX: (self.screenWidth * -1), y: 0)
        })

        //  サイドメニューが表示されていることにする
        isDisplayedSideMenu = false
    }
}

起動後

ボタンを押すと...

【Swift3.0】サイドメニューもどきを作ってみた

はじめに

開発環境

実装方法

storyboard

ViewController.swift