読者です 読者をやめる 読者になる 読者になる

techium

このブログは何かに追われないと頑張れない人たちが週一更新をノルマに技術情報を発信するブログです。もし何か調査して欲しい内容がありましたら、@kobashinG or @muchiki0226 までいただけますと気が向いたら調査するかもしれません。

PixateでNavigationDrawerを作りたい

Motivation

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

レイヤー配置

レイヤーは次のように設定した。
f:id:kobashin__G:20160421013437p:plain

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

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

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

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

f:id:kobashin__G:20160421011731p:plain

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

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

f:id:kobashin__G:20160421012644p:plain

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イベントを登録する。

f:id:kobashin__G:20160421014003p:plain

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

f:id:kobashin__G:20160421014050p:plain

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

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

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

f:id:kobashin__G:20160421014556p:plain

f:id:kobashin__G:20160421014604p:plain

ポイントはIFの節。

Demo

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

github.com

Excuse

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