アプリ | #iOS | #Android ファショ通

ゲージ付の折れ線グラフをすばやくつくれるライブラリ「Spark」

最終更新日時 : 2016-04-19 07:25

折れ線グラフをすばやくつくりましょう.

Introducing_Spark_—_Robinhood_Engineering_—_Medium

Introducing Spark — Robinhood Engineering — Medium

手順

1. ライブラリを追加する.


compile ‘com.robinhood.spark:spark:{latest release}’

2. View を設置する.


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.robinhood.spark.SparkView
        android:id="@+id/sparkview"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:spark_lineColor="@color/colorAccent"
        app:spark_scrubEnabled="true"
        app:spark_animateChanges="true"/>
...

3. データ float[] を渡す Adapter を作る.


public class MyAdapter extends SparkAdapter {
    private float[] yData;

    public MyAdapter(float[] yData) {
      this.yData = yData;
    }

    @Override
    public int getCount() {
      return yData.length;
    }

    @Override
    public Object getItem(int index) {
      return yData[index];
    }

    @Override
    public float getY(int index) {
      return yData[index];
    }
}

4. Adapter を View にセットして, ゲージをタッチしたときの Listener をつける.


SparkView sparkView = (SparkView) findViewById(R.id.sparkview);
sparkView.setAdapter(new MyAdapter(data));
sparkView.setScrubListener(new SparkView.OnScrubListener() {
    @Override
    public void onScrubbed(Object value) {
        if (value == null) {
            scrubInfoTextView.setText(R.string.scrub_empty);
        } else {
            scrubInfoTextView.setText(getString(R.string.scrub_format, value));
        }
    }
});

5. 出来上がり

20160419-072257_1

数値の推移を確認するには折れ線グラフは非常にわかりやすく, タップしてその時点の数値も簡単に表示できてしまうこのライブラリは非常に重宝するものだと思われます.

robinhoodmarkets/spark: A simple Android sparkline chart view.

res ディレクトリは小分けにしたほうがいいのではないか

最終更新日時 : 2016-04-20 01:20

java ディレクトリ以下は, お好みで小分けして素早くたどりつけるのに,

1-A-m20R0Qve-eB4ishqZc_Q

ソースディレクトリの構成時にもっておくべき「会社別」のイメージ

res ディレクトリ以下ときたら, なんの整理もしなくて, 該当ファイルになかなか辿りつけない.

res ディレクトリ以下も, 共用/画面別に分けたりするのはどうでしょうか, と GoogleDeveloperExperts の方が言っておられます.

Android_Project_Structure_—_alternative_way_—_Google_Developer_Experts_—_Medium

小分けにしても, マージして読み取ってくれるんですね.


sourceSets {
    main {
        res.srcDirs = [
                'src/main/res-main',
                'src/main/res-screen/about',
                'src/main/res-screen/chat',
                'src/main/res-screen/home',
                'src/main/res-screen/login',
                ....
        ]
    }
}

「Project View」でしか利用できないそうですが.

Android Project Structure — alternative way — Google Developer Experts — Medium

In this case, both resource folders have the same priority. This means that if a resource is declared in both folders, the merge will fail and an error will be reported.

Resource Merging - Android Studio Project Site

マージ後に重複するファイルがあればエラーとなり, 各ディレクトリ同士の優先順位はなしのフラット扱いらしいです.

IDE自体にどんな便利なショートカットや検索機能があったとしても, 直感的にわかりやすい構成にしておきたいですよね!

CoordinatorLayout がわかりづらいのはデフォルトのせい?

最終更新日時 : 2016-04-14 20:14

よくある画面要素の組み合わせ ActionBar + RecyclerView + FAB.

ActionBar 部分をスクロール時に上にスライドさせて消したいですよね!

まずは CoordinatorLayout で囲みます.

レイアウトはこんなかんじの構成ですね.


<CoordinatorLayout>
  <AppBarLayout>
    <Toolbar />
  </AppBarLayout>
  <RecyclerView />
  <FloatingActionButton />  
</CoordinatorLayout>

ここでは, 連携する挙動の始まりとなる「きっかけ」を RecyclerView のスクロールとしましたが, 以下の View や Layout は, デフォルトで同様に「きっかけ」にすることができます.

HorizontalGridView
NestedScrollView
RecyclerView
SwipeRefreshLayout
VerticalGridView

NestedScrollingChild | Android Developers

よく画面をみてみると, RecyclerView の最上段をみることができないようになってますね!

20160414-190459_1

それは, CoordinatorLayout は FrameLayout だからです.

CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout | Android Developers

でも, とりあえず無視します.

次に, アクションバー部分が「きっかけ」に反応して「ふるまう」するようにします.

AppBarLayout または Toolbar に, 属性「app:layout_behavior」をつけて, 「ふるまう」時の挙動を追加したくなります.

でも, 必要なかったりします.

ふるまいを記述する Behavior は, デフォルトですでに AppBarLayout にアノテーションを利用してセットされているからです.


@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout {

Cross Reference: AppBarLayout.java

なので, ふるまい方の種類だけをその子である Toolbar 記述します.


<CoordinatorLayout>
  <AppBarLayout>
    <Toolbar
      app:layout_scrollFlags="scroll|enterAlways" />
  </AppBarLayout>
  <RecyclerView />
  <FLoatingActionButton />  
</CoordinatorLayout>

ここで, 動かしてみます.

20160414-191401_1

アクションバーが消えていくようになりましたね!

最後に, RecyclerView 自体も「ふるまわ」せます.

AppBarLayout のふるまい方と同じふるまい方をするように同じ Behavior をセットします.


<CoordinatorLayout>
  <AppBarLayout>
    <Toolbar
      app:layout_scrollFlags="scroll|enterAlways" />
  </AppBarLayout>
  <RecyclerView
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  <FLoatingActionButton />  
</CoordinatorLayout>

ここでいきなり現れた文字列 @string/appbar_scrolling_view_behavior は, デフォルトでセットされている


android.support.design.widget.AppBarLayout$ScrollingViewBehavior

のことです.

AppBarLayout にデフォルトで設定されているものと同じですね.

ここで, また動かしてみます.

20160414-195431_1

AppBarLayout の Behavior と同じものを RecyvlerView にもセットしたので, 同じように動きます.

スクロール時にAppBarと同じように開閉スライドすることになるので, RecyclerView との重なり合いがなくなり RecyclerView の最上段も表示されるようになりましたね!

実際の簡略化していないレイアウトを貼っておきます.


<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:layout_scrollFlags="scroll|enterAlways" />
  </android.support.design.widget.AppBarLayout>
  <android.support.v7.widget.RecyclerView
      android:id="@+id/recycler_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  <android.support.design.widget.FloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginRight="16dp"
      android:layout_marginBottom="16dp"
      android:layout_gravity="right|bottom"
      android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

以上のように, レイアウトファイルだけを編集するだけで, インタラクティブな挙動を画面の要素たちに行わせることができるので, 便利な気もしますね!!

→ 少しややこしいので「まとめ」ようとしてつづく (作成中)