たくさんネット上でみつけることができるようになってきています!!
熊本地震 - Google
熊本-阿蘇-大分地震 2016年4月
H28熊本地震 災害トイレ地図
熊本・大分で営業しているスーパー
炊き出し＆支援物資集積地点
熊本県の透析施設マップ
熊本県の透析施設マップ
熊本県内の避難所一覧
熊本市体育施設マップ
上熊本地区医療施設
熊本市 - スポーツ施設
熊本市 - 高齢者のための支援施設
熊本県 銭湯・温泉マップ
熊本市立中学校マップ
熊本市立小学校マップ
パソコンだけでなく, Android や iPhone などのスマートフォンでも作成して公開することができます.
マイマップを使って自分の地図を作成、編集する - マップ ヘルプ
たくさんの情報を共有できるようにどんどん使っていきましょう!!
折れ線グラフをすばやくつくりましょう.
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. 出来上がり
数値の推移を確認するには折れ線グラフは非常にわかりやすく, タップしてその時点の数値も簡単に表示できてしまうこのライブラリは非常に重宝するものだと思われます.
robinhoodmarkets/spark: A simple Android sparkline chart view.
よくある画面要素の組み合わせ ActionBar + RecyclerView + FAB.
ActionBar 部分をスクロール時に上にスライドさせて消したいですよね!
まずは CoordinatorLayout で囲みます.
レイアウトはこんなかんじの構成ですね.
<CoordinatorLayout>
<AppBarLayout>
<Toolbar />
</AppBarLayout>
<RecyclerView />
<FloatingActionButton />
</CoordinatorLayout>
ここでは, 連携する挙動の始まりとなる「きっかけ」を RecyclerView のスクロールとしましたが, 以下の View や Layout は, デフォルトで同様に「きっかけ」にすることができます.
HorizontalGridView
NestedScrollView
RecyclerView
SwipeRefreshLayout
VerticalGridView
NestedScrollingChild | Android Developers
よく画面をみてみると, RecyclerView の最上段をみることができないようになってますね!
それは, 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>
ここで, 動かしてみます.
アクションバーが消えていくようになりましたね!
最後に, 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 にデフォルトで設定されているものと同じですね.
ここで, また動かしてみます.
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>
以上のように, レイアウトファイルだけを編集するだけで, インタラクティブな挙動を画面の要素たちに行わせることができるので, 便利な気もしますね!!