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

  関連記事

no image
[WIP]AndroidでParseを使ってみる

今更感溢れてるが。 バックエンドな実装・運用は面倒くさい、Railsとか使い方分からない、的な人はParse良いかもしれない。 …

wallpaper.big-j.cs
Facebook製の画像ライブラリFrescoのコードを読んでいる

Facebookが新たに画像ライブラリFrescoを公開した。 DraweeView,DraweeController,DraweeHierarchyというクラスを利用したMVC的な構成を成しており、画像を効率よく読み込むようになっているらしい。(雑) …

wallpaper.big-j.cs
Androidアプリで使う画像素材の圧縮をgulpで一括処理する

まず、デザイナーやらディレクターやらプロデューサーやらに『圧縮された画像をgitなどのバージョン管理システム上にコミットしてもらえる』そんな幸福な環境であれば無縁な話。 大概の組織では共有ファイルシステムに新しく追加する、もしくは変更された画像をドカッと置かれて「よろしく」って感じだろう。 …

wallpaper.big-j.cs
Androidで超シンプルなWidgetを作りたい

情報が少なくてちょっとつまづいたのでメモ。 Contents1 …

logo_og
ReactNativeでGiphyのデータを表示する

まずは下記をサクッとパクってみる。 当方、比較的AndroiderなのでAndroidで。 …

no image
AndroidでGoogleTagManagerを使いたい

Contents1 GoogleTagManagerとは2 …

wallpaper.big-j.cs
LeakCanaryの仕組みをある程度理解したいマン

Contents1 LeakCanaryとは何か2 …

wallpaper.big-j.cs
GridViewからRecyclerViewに移行したい

GridViewからRecyclerViewにクラス名変えるだけじゃ動かない。 移行過程をメモ。 …