PixateでNavigationDrawerを作りたい

Motivation

ぱっと出てきそうなのに調べても調べてもそれっぽいものに出会わなかったので。 ゴリ押し感が否めないので、もっと良いやり方があればぜひ教えてほしいですです。

レイヤー配置

レイヤーは次のように設定した。

緑の領域がMainActivity想定のエリアで左上の青い四角がToolbar上のタップするとDrawerが出てくるボタン。
左部分に見えているグレーの領域がDrawerLayoutを想定している。 グレーの領域はMainActivityの領域に少しはみ出ている。
このはみ出た部分をつかむことで左から出てくるアクションを作っている。
レイヤー自体は透明に出来るので、実際にははみ出た部分が見えることはないので大丈夫。

左上のボタンでの挙動を設定する

左上のボタンでの挙動を設定する。
タップするとDrawerが引き出され、空いたスペースをタップするとまた戻るという具合。

まず、ボタンに対しタップイベントを登録する。

同じ方法でActivityにもタップイベントを登録する。

続いて、NavigationLayoutにMoveイベントを登録する。

Moveイベントはボタンタップ時にDrawerを表示するケースとActivityタップ時にDrawerをしまうケースの2つ登録する。

• ボタンタップ時

どこに	入力内容
IF節	drawerlayout.x < 0
move to LEFT	0

• Activityタップ時

どこに	入力内容
IF節	drawerlayout.right >= 260
move to LEFT	-250

move toのLEFTを使ってDrawerLayoutのポジションを移動させている。
DrawerLayoutの初期状態を left = -250 width = 265としたため隠れているときは、
drawerlayout.xは必ず負の為に上がわのケースに入る。
他方では下側のケースに入り期待通りに動く。

DrawerLayoutのドラッグイベントを設定する

まず、DrawerLayoutに対してDragイベントを登録する。

続いてDragイベントの詳細を設定する。

横向きの移動のみなのでHorizontalを指定し、動き幅の最大最小値を設定する。
Drawerの初期状態に合わせて、最小値は Right = 15(初期に見えているのが15px) 最大値はRight = 265とした

ドラッグを途中で放したときのイベントを設定する

最後に、DrawerLayoutにドラッグを放した時のイベントを設定する。
Drawerを半分以上出していれば全部出し、それ未満ならしまうという形とした。

ポイントはIFの節。

Demo

なんかGIFがうまく貼り付けられなかったので、Githubでどうぞ。
プロジェクトも一緒においてあります。

github.com

Excuse

タッチ座標の取得の仕方が分からなかったので、仕方なくDrawerLayoutを少しはみ出させておく方法をとったけれど、
これのせいで操作性があまり良くない感じ。