こんにちは。研究開発チームでイケてるUI100を作っている美馬(@amyu_san)です。
主にAndroidの変なViewを作る担当です。

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

BeerSwipeRefreshLayout

BeerSwipeRefreshLayout をOSSにしました！！

使い方

1) build.gradle に追加する

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

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

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

1
2
3
4
5
6
7
8
9
10
11
<jp.co.recruit_lifestyle.android.widget.BeerSwipeRefreshLayout
        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.BeerSwipeRefreshLayout>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mBeerSwipeRefreshLayout = (BeerSwipeRefreshLayout) findViewById(R.id.main_swipe);
mBeerSwipeRefreshLayout.setOnRefreshListener(new BeerSwipeRefreshLayout.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.
    mBeerSwipeRefreshLayout.setRefreshing(false);
    super.onPostExecute(result);
  }
}

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

おまけ

画像ファイルを使わずに良い感じに描画する方法

BeerSwipeRefreshLayout は画像ファイルを一枚も使っていません。
すべて座標を指定し、Canvas・Path・Paintを使い、描画しています。

どのように描画したいオブジェクトの座標の取得して曲線の描画を行ったかをちょっとだけ詳しく書いていきます。

描画したいオブジェクトの座標の取り方

1) Illustratorを開く

2) 1cm × 1cm の新規ドキュメントを作成する

3) 曲線ツールのみを使い、描く

4) それぞれの座標を取得する

ベジェ曲線のハンドルとアンカーポイントをそれぞれ取得していきます。ハンドルとアンカーを簡単に表示するスクリプトを作ったので、完成次第公開します。

曲線の描画

続いて、曲線の描画の仕方。曲線の描画では Path#cubicTo() を使います。

上のような曲線の時、

1
2
3
4
5
6
7
8
mPath.reset();
mPath.moveTo(Ax, Ay);
mPath.cubicTo(
  Bx, By,
  Cx, Cy,
  Dx, Dy
);
canvas.drawPath(mPath,mPaint);

コレで描画することができます。

まとめ

IllustratorとPathさえあれば描画できないものはない！

次は、 このViewを紹介しようと思います。 お楽しみに！！

美馬 優貴

（スマートデバイス開発チーム）

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

Tweet