moxt

Just another Blog site

手を動かしてViewDragHelperを学ぶ(無駄にKotlin)

      2016/03/13

まず、Youtubeの公式Androidアプリみたいなヤツ作りたくなった。

すでに有志がライブラリ作ってた。。

結構イイカンジに動くので「実装どうなってんのかな」と見てみたら、ViewDragHelperってヤツがいた。
こいつがイイカンジにDrag処理を捌いてくれてるっぽい。

コード読んでみたけど、手を動かしてみないと定着しないのでアレ。

なので簡単なアプリ(ゴミ)を作りながら、どういうことができるのか試してみた。

とりあえず適当なViewをドラッグしたい

カスタムViewGroupにViewDragHelperインスタンスを持たせ、かつ必要に応じて処理を呼ぶ必要がある。

とりあえず適当なViewをドラッグしたいなら、最低限必要な準備は次の6つ。

  • ViewDragHelperインスタンスを作る
  • onTouchEventprocessTouchEvent(e: MotionEvent)を呼ぶ
  • ViewDragHelper.Callback()のサブクラスを用意する
  • tryCaptureViewを実装
  • clampViewPositionVerticalをオーバライド
  • clampViewPositionHorizontalをオーバライド

これだけ。
あとはカスタムViewGroup上に適当な子Viewを載せてやればOK

https://gyazo.com/0b31de31511f1550011d5956be7d3701

あー、ドラッグできた。
気持ちいいね。清原的な意味ではなく。

いろんなメソッド(コールバック)を試してみる

smoothSlideViewTo

指定したViewを指定した位置に移動してくれるメソッド。
ボタンをタップするたびに適当な位置に滑らか移動してもらうようにした。

  • smoothSlideViewToを呼び出した後にinvalidate()を呼ぶ
  • computeScrollをオーバライドしてDragHelpercontinueSettingを呼びつつinvalidate()してやる

https://gyazo.com/ac997f605fe87e130acac291a3d6ee45

setEdgeTrackingEnabled

親ViewのEdgeのタッチイベントを検出できるようにする。
ナビゲーションドロワーみたいなヤツはこれを使って実現してる。

setEdgetTrackgingEnabled(ViewDragHelper.LEFT)

これで画面左端のタッチをトラッキングしてくれるようになった。
トラッキングしたイベントのハンドリングはViewDragHelper.Callbackに委譲する。

onEdgeDragStarted、エッジ上でのドラッグイベント開始を検出したタイミングでViewDragHelperにドラッグ対象のViewを与える。それがcaptureChildView
captureChildViewに与えたViewの親Viewと、ViewDragHelperが保持してるViewが一致しないとエラー吐くので注意。

↑この辺の処理をまとめのが下記。

https://gyazo.com/d99d9357e34c0619741d6df076a74fea

こんな感じで、エッジのドラッグによってView(星)を動かすことができた。

onViewReleased

ドラッグ状態が解除されたときに呼ばれるコールバック。
先のonEdgeDragStartedの例に少しコードを付け足して、エッジドラッグ中に画面から指を離したらView(星)が元の位置に戻るようにしてみる。。

onViewReleased内でsmoothSlideViewToを呼ぶだけ。

https://gyazo.com/d2c9f4007d1d75f9fa2d736236cb671d

TODO : 他のヤツも試す

 - Android

  • このエントリーをはてなブックマークに追加
  • follow us in feedly