SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

業務アプリ開発に使えるUIが満載、「Xuni(ズーニー)」で作るAndroid/iOSアプリ(AD)

クラウド上のデータをグリッドやグラフで表示してみよう

業務アプリ開発に使えるUIが満載、「Xuni(ズーニー)」で作るAndroid/iOSアプリ 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

グラフを表示する

 同じデータをグラフでも表示してみましょう。

FlexChartを追加する

 グラフを表示するために、「chartcore.aar」と「flexchart.aar」をプロジェクトに追加して、「settings.gradle」と「build.gradle」に追加します。詳細はサンプルコードを参照ください。

グラフ画面を表示するボタンを追加する

 先の「PopulationActivity.java」にグラフ表示のボタンを追加して、「PopulationGraphActivity」の画面を表示できるようにします。画面を表示する際に、人口のデータである「Populations」をパラメーターとして渡します。

findViewById(R.id.buttonGraph).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(getApplicationContext(), PopulationGraphActivity.class);
        intent.putExtra("itemSource", mPopulations);
        startActivity(intent);
    }
});

グラフ表示画面を実装する

 前回ご紹介したFlexChartサンプルアプリの「GettingStartedActivity」と同様に実装していきます。setItemsSourceをする際に、前のActivityから受け取ったパラメーターを次のように展開してセットします。

// インテントから人口をセットする
Populations populations = (Populations) getIntent().getSerializableExtra("itemSource");
mChart.setItemsSource(populations.getPopulations());

 グラフを表示すると棒グラフで表示されます。

 少しわかりにくいので、折れ線グラフにしてみましょう。グラフの種類は次のようにセットするだけで簡単に切り替えられます。

mChart.setChartType(ChartType.LINE);

 先ほどより、大分わかりやすくなりました。年齢間の比率をもう少し直感的に表示したいので、積み上げ面グラフにしてみましょう。これも設定は簡単です。

mChart.setChartType(ChartType.AREA);
mChart.setStackingType(ChartStackingType.STACKED);

 年次による人口比が直感的にわかるようになりましたね。

軸に説明を追加する

 縦軸・横軸の単位がわからないので、設定します。これも次のようにするだけで簡単にできます。

mChart.getAxisX().setTitle("年次");
mChart.getAxisY().setTitle("人口(単位:1000人)");

 横画面もバッチリ表示ができます。

ズームを有効にする

 拡大して詳しく表示させたい場合は、次のコードを書き加えるだけでピンチイン・ピンチアウトによるズームが可能になります。

mChart.setZoomMode(ZoomMode.XY);

まとめ

 Xuniで、簡単にクラウド上のデータを表示することができました。このほかにも機能はたくさんありますので、ぜひ「Xuni for Android のユーザーガイド」及び「Xuni for Android のAPI リファレンス」を参考に改造してみてください。

 次回は、iOS版についてご紹介します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
業務アプリ開発に使えるUIが満載、「Xuni(ズーニー)」で作るAndroid/iOSアプリ連載記事一覧

もっと読む

この記事の著者

山本 誠樹(ヤマモト マサキ)

 スマホアプリからクラウドアプリまで作成するフリーのデベロッパー。記事へ質問などあればお気軽にご連絡ください。 Twitter:@nnasaki blog:http://blog.nnasaki.com

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9271 2016/02/29 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング