Android View Collections

WaveSwipeRefreshLayout

WaveSwipeRefreshLayoutをリリースしました!

こんにちは。研究開発チームでイケてるUI100を作っている美馬(@amyu_san)です。
ココ最近の好きな開発手法は、SDD(謝罪せよ Driven Development)です。

また、良い感じのViewを作ったので紹介します!

WaveSwipeRefreshLayout

WaveSwipeRefreshLayout をOSSにしました!!
https://github.com/recruit-lifestyle/WaveSwipeRefreshLayout

使い方

1) build.gradle に追加する

1
2
3
4
5
6
7
8
9
repositories {
    maven {
        url "https://jitpack.io"
    }
}

dependencies {
  compile 'jp.co.recruit_lifestyle:WaveSwipeRefreshLayout:1.0'
}

2) XMLのレイアウトファイルに、AbsListViewの親になるように jp.co.recruit_lifestyle.android.widget.WaveSwipeRefreshLayout を追加する

1
2
3
4
5
6
7
8
9
10
11
<jp.co.recruit_lifestyle.android.widget.WaveSwipeRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_swipe">

      <ListView
          android:id="@+id/main_list"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>

</jp.co.recruit_lifestyle.android.widget.WaveSwipeRefreshLayout>

3) リフレッシュが終わった時などのListenerを追加する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mWaveSwipeRefreshLayout = (WaveSwipeRefreshLayout) findViewById(R.id.main_swipe);
mWaveSwipeRefreshLayout.setOnRefreshListener(new WaveSwipeRefreshLayout.OnRefreshListener() {
  @Override public void onRefresh() {
    // Do work to refresh the list here.
    new Task().execute();
  }
});

private class Task extends AsyncTask<Void, Void, String[]> {
  ...
  @Override protected void onPostExecute(String[] result) {
    // Call setRefreshing(false) when the list has been refreshed.
    mWaveSwipeRefreshLayout.setRefreshing(false);
    super.onPostExecute(result);
  }
}

基本的な使い方は、SwipeRefreshLayoutと同じになっているので、そちらを参考にしてもらえればと思います。

おまけ

PathでのAnimation

今回のWaveSwipeRefreshLayoutでは、3つのフェーズに分けて座標を指定しています。
その中から、Phase1からPhase2に切り替わるときの実装について書いていきます。 取得した座標は基本的に閾値として扱い、Phase1からPhase2に変わる際の下スワイプで起こる各アンカーとハンドルのポイントの動きを見ます。

そして、動きがプラス方向かマイナス方向かを判断し、座標をTouch移動量分変化させ、閾値で止めます。

そうすることにより、座標を望んだところで止め、スワイプした際でもきれいなAnimationを実現することができます。
各点の移動量に重みを付けると、よりきれいなAnimationをすることができます。

通常の自動Animationの場合、ValueAnimatorなどを使うと思いますが、2次元の座標をAnimationさせる場合は、ValueAnimator#ofFloat などを使って表現するのが大変なので、TypeEvaluator を使い、移動座標を楽に求められるようにしています。

TypeEvaluatorを使った簡単なValueAniamtor にある2次元座標のTypeEvaluatorを一度コピペしておけば、2次元座標間のAnimationも楽になります。

まとめ

画像ファイルをAnimationする場合、細かい部分のAnimationが大変で、画像ファイルが大きくなればなるほどメモリなど容量を使います。

例えば、
上のように、画像ファイルを使わなくても、再生・停止ボタンを描画するだけで、簡単にAnimationを設定でき、リッチなViewに変えることができます。

また、Viewの大きさをAndroid TVアプリ用に大きく使いたいといった場合でも、座標を保持しているだけなので、とても簡単に、当然ぼやけることなく使うことができます。
とてもすごいですね!

「Androidはここまで描画できるんだ!」というのをアピールして、デザイナから素晴らしいUI/UX、Animationの指定が来るのを楽しみにしています!

美馬 優貴

(スマートデバイス開発チーム)

AndroidのViewを開発しています。

NEXT