소개

왠지 사이드 메뉴가 나오는 앱이 멋지다고 생각했기 때문에 만들어 보았다.
잊으면 허무하기 때문에 비망록으로서 Qiita씨에게 남긴다.

개발 환경

Xcode8.1

Swift3.0

구현 방법

이미지로서는, 스크린 내에 메인 화면을 표시하고, 왼쪽의 화면 밖에 사이드 메뉴를 추가한다.
앱 시작 직후에는 사이드 메뉴가 화면 밖에 있으므로 화면에 표시되지 않습니다.
버튼을 누르면 스크린 외부의 사이드 메뉴가 애니메이션으로 화면으로 이동합니다.
이런 식으로 사이드 메뉴를 구현해 보았다.

storyboard

storyboard에서 메인 화면과 사이드 메뉴 만들기

메인 화면에 사이드 메뉴를 출입하기위한 버튼을 붙인다

사이드 메뉴의 storyboard ID에 sideMenu를 입력합니다

ViewController.swift

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
    }
}

부팅 후


버튼을 누르면 ...