最近似たようなレイアウト実装作業をしたため、試しに実装してみた。
実装イメージ
こんなの。
Androidのマテリアルデザイン用ライブラリみたいに下のレイアウトに
シャドウっぽいレイヤーをかける作業は省いのたで、
一旦見やすいようにメニュー用レイアウトに色をつけた。
左側でにょきにょきとレイアウトを変えるあたりのために入れた設定の備忘録。
準備
実装イメージのようにナビゲーションバーの上にメニューをのっけたい場合、
メニューのレイアウトとその下のレイアウトは共にContainer Viewにのっける。
こんな感じ。
中身に入れる画面はEmbedで繋いどく。
今回メニュー部分のレイアウトは左から生やすので、上・下・左辺は固定しとく。
メニューレイアウトの表示/非表示実装
Storyboard
1．メニューレイアウトの幅設定を自ビューでも親ビュー比較でもいいので2個設定する。
1個は表示時、2個は非表示時。
初期表示で適用したい方のpriorityの設定値を高くする。以下キャプチャが設定例。
【表示側】
【非表示側】
2．上記のうち、どっちの設定でもいいのでIBOutlet設定をUIViewControllerへインポート。
3．メニューの開閉を行うボタンのIBAction設定を
Container View内のUIViewControllerへインポート。
ソースコード
メニューレイアウトの開閉に必要なコーディングは、
Storyboardの設定手順2でインポートしたNSLayoutConstraintのpriorityの数字を変更して
layoutIfNeeded()を呼んで変更を画面に適用するだけ。
priorityの数字は変更後に1001以上にならなければ何でもいい。
以下のソースコードは今回のようなメイン画面もメニュー画面も
Container View入りの場合の例。
class ViewController: UIViewController {
/// メニューレイアウトの幅
@IBOutlet weak var _menuWidth: NSLayoutConstraint!
/// メニュー表示フラグ
var showMenu = false
override func viewDidLoad() {
super.viewDidLoad()
// メイン画面にこのクラスを渡して、メニューボタン押下時の処理を呼べるようにしておく
let mainNavi = self.childViewControllers[0] as! UINavigationController
let mainController = mainNavi.childViewControllers[0] as! MainViewController
mainController.parentController = self
}
func changeMenuLayout() {
if self.showMenu {
// メニューを閉じる
self.showMenu = false
self._menuWidth.priority += 2 // width=0設定の優先度を上げて、メニュー非表示
} else {
// メニューを開く
self.showMenu = true
self._menuWidth.priority -= 2 // width=0設定の優先度を下げて、メニュー表示
}
// アニメーションさせつつメニューの開閉を切り替える
UIView.animate(withDuration: 0.5, animations: {() -> Void in
self.view.layoutIfNeeded()
})
}
}
changeMenuLayoutメソッドが処理今回目的とするレイアウト変更処理本体。
viewDidLoadでは子要素のContainer View内でchangeMenuLayoutを呼ぶ準備をしてるだけ。
準備した先で呼んでる処理が以下。
class MainViewController: UIViewController {
/// 親コントローラ
var parentController: ViewController?
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func menuButtonDidTap(_ sender: UIBarButtonItem) {
// メニューの開閉をする
parentController?.changeMenuLayout()
}
}
備考
メニューの開閉に沿って今回下に表示していたメイン画面もスライドしたい、
メニューレイアウト分うまいこと縮小表示したい場合は
メニュー画面の右辺とメイン画面の左辺をEqual設定したりなどなど、
基本Storyboard上の静的設定の追加で対応可能。