【Swift】スライドメニューを実装する

SlideMenuControllerSwiftをCocoaPodで取得

podfile.rb
pod 'SlideMenuControllerSwift'

を記述した後、ターミナルでプロジェクトのディレクトリに移動後、pod installを行います。(念のためinstall後にpod updateもしてください)

ViewController追加

以下のViewControllerを追加します
– MainViewController
– SlideViewController
– LeftMenuViewController

StoryBoardはこんなかんじ。

StoryBoardIDも設定

  • MainViewController → Main
  • SlideViewController → Slide
  • LeftMenuViewController → Left
MainViewController
import UIKit
import SlideMenuControllerSwift

class MainViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationController?.navigationBar.isHidden = false
        self.navigationItem.title = "Main"
        addLeftBarButtonWithImage(UIImage(named: "menu")!)
    }
}
SlideViewController
import UIKit
import SlideMenuControllerSwift

class SlideViewController: SlideMenuController {

    override func awakeFromNib() {
        let mainVC = storyboard?.instantiateViewController(withIdentifier: "Main")
        let leftVC = storyboard?.instantiateViewController(withIdentifier: "Left")

        //NavigationBarを生成
        let navigationController = UINavigationController(rootViewController: mainVC!)
        navigationController.navigationBar.barTintColor = UIColor.colorWithHexString("0033FF")
        navigationController.navigationBar.tintColor = UIColor.white
        navigationController.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]

        //ライブラリ特有のプロパティにセット
        mainViewController = navigationController
        leftViewController = leftVC
        SlideMenuOptions.leftViewWidth = 200
        super.awakeFromNib()
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
}
LeftMenuViewController
import UIKit

class LeftMenuViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
}

メニューの開閉操作

  • (ボタンイベントなどで)メニューをOpen

self.slideMenuController()?.openLeft()

  • (ボタンイベントなどで)メニューをClose

self.slideMenuController()?.closeLeft()

Settingプロパティ

SlideMenuOptions
  • leftViewWidth: CGFloat = 270.0
    左メニューの横幅
  • rightViewWidth: CGFloat = 270.0
    右メニューの横幅
  • leftBezelWidth: CGFloat? = 16.0
    画面スワイプ時に感知する左からの横幅
  • rightBezelWidth: CGFloat? = 16.0
    画面スワイプ時に感知する右からの横幅
  • rightPanFromBezel: Bool = true
    falseにするとスワイプでメニューを開くことができなくなる
  • contentViewScale: CGFloat = 0.96
    メニューを開いた時のmainVCの縮み率
  • opacityViewBackgroundColor: UIColor = UIColor.black
    メニューを開いた時のmainVCにかかる色
  • contentViewOpacity: CGFloat = 0.5
    メニューを開いた時のmainVCにかかる色のalpha値
  • contentViewDrag: Bool = false
    メニューを開いた時にmainVCがメニューのwidth分ずれて表示されるかどうか
  • shadowOpacity: CGFloat = 0
    影の明るさ(0)
  • shadowRadius: CGFloat = 0
    影のぼかし具合(0)
  • shadowOffset: CGSize = CGSize.zero
    矩形からどれだけ影がずれているか
  • panFromBezel: Bool = true
    画面スワイプでメニューを出せるかどうか
  • animationDuration: CGFloat = 0.4
    メニューを出す速度
  • hideStatusBar: Bool = true
    ステータスバーを隠すかどうか
  • simultaneousGestureRecognizers: Bool = true
    複数のジェスチャーに対応するかどうか
  • panGesturesEnabled: Bool = true
    スワイプでのメニュー開閉動作が可能かどうか
  • tapGesturesEnabled: Bool = true
    タップでのメニューを閉じる動作が可能かどうか

メニューの状態を監視するときはSlideMenuControllerDelegateを使う

  • func leftWillOpen ()
  • func leftDidOpen ()
  • func leftWillClose ()
  • func leftDidClose ()
  • func rightWillOpen ()
  • func rightDidOpen ()
  • func rightWillClose ()
  • func rightDidClose ()
参考サイト

https://translate.googleusercontent.com/translate_c?depth=1&hl=ja&prev=search&rurl=translate.google.co.jp&sl=en&sp=nmt4&u=https://github.com/dekatotoro/SlideMenuControllerSwift&usg=ALkJrhjoTupE4uwtg0Pf1C9cBMzK9OgRBA

http://qiita.com/KikurageChan/items/3b817b41f44957c6ac68

参考テキスト
詳解Swift 第3版 [ 荻原 剛志 ]

詳解Swift 第3版 [ 荻原 剛志 ]

価格:3,456円
(2017/1/3 01:58時点)
感想(0件)

スポンサーサイト
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中