公開日:2019年11月10日
更新日:2019年11月15日
目次
テキストビューで簡単なグラフを作成する方法を紹介します。
1. Androidのグラフ作成ライブラリ
Androidでグラフを作成するためのライブラリとして「MPAndroidChart」が用意されています。「MPAndroidChart」を用いることにより、任意に「折れ線グラフ」、「円グラフ」、「棒グラフ」、FXでもお馴染みの「ローソク足」などのグラフが作成できます。今後、使用する機会がありましたら紹介したいと思います。
ただ、単純なグラフ(棒グラフ)であればテキストビューでもできますので、次章ではテキストビューを用いた簡単なグラフの作り方を紹介します。今回は、単に思い付きで作ったプログラムですので、深いツッコミはご遠慮ください。
2. TextViewで簡易グラフを作る
テキストビューによる簡単なグラフの作成方法について説明します。今回のサンプルプログラムですが、構成要素はテキストビュー2つ、ボタン1つのシンプルな画面で、ボタンをクリックすることにより、赤色と青色のテキストビューの比率が7:3に変わります(デフォルトは1:1)。つまり、2つのテキストビューの比率を表示・変更するプログラムとなっています。
~MainActivity.xml~
下記が「activity_main.xml」のプログラムです。
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
(1) android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView"
(2) android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="20sp"
android:textStyle="bold"
android:background="#FF0000"
tools:layout_editor_absoluteX="178dp"
tools:layout_editor_absoluteY="142dp" />
<TextView
android:id="@+id/textView2"
(2) android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="20sp"
android:textStyle="bold"
android:background="#0000FF"
tools:layout_editor_absoluteX="171dp"
tools:layout_editor_absoluteY="269dp" />
</LinearLayout>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
(3) android:onClick="onClkBtn"
android:text="Button"
tools:layout_editor_absoluteX="215dp"
tools:layout_editor_absoluteY="170dp" />
</LinearLayout>
今回はテキストビューの比率を変えるので(1)と(2)のように「WeightSum」と「layout_weight」の値を設定しています。以下で簡単に説明したいと思います。
「WeightSum」では表示割合の最大値を任意に設定し、「layout_weight」では表示割合の合計が最大値になるように設定します。上記のプログラムでは、テキストビューを1:1で表示したいので、「WeightSum」を10に設定し、「layout_weight」をそれぞれ5に設定しています。もう少し簡単に説明しますと、横幅の最大値が10なので、この値を超えないようにそれぞれのテキストビューで値を設定します。上記プログラムの例では、それぞれ5を設定しているので、画面に対し半分半分の割合で表示されます。
上記プログラムの(3)はボタンがクリックされたときに呼び出されるイベント処理で、ここでテキストビューの比率を7:3に変えています。
~MainActivity.java~
下記が「MainActivity.java」のプログラムです。
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
/* ボタン押下イベント */
public void onClkBtn(View v) {
TextView textvew1, textvew2;
LinearLayout.LayoutParams textview1_param, textview2_param;
/* TextView1(赤色のテキストビュー)のweightを変更 */
(1) textview1_param = (LinearLayout.LayoutParams)v.getLayoutParams();
textview1_param.weight = 7;
textvew1 = (TextView)findViewById(R.id.textView);
textvew1.setLayoutParams(textview1_param);
/* TextView2(青色のテキストビュー)のweightを変更 */
(2) textview2_param = (LinearLayout.LayoutParams)v.getLayoutParams();
textview2_param.weight = 3;
textvew2 = (TextView)findViewById(R.id.textView2);
textvew2.setLayoutParams(textview2_param);
}
}
上記プログラムの(1)と(2)で、それぞれ、赤色と青色のテキストビューの比率を7:3に変更しています。以下で詳細を簡単に説明します。
まず、画面要素(View)のパラメータである「weight」に数値を設定します。下記では7を設定しています。
textview1_param = (LinearLayout.LayoutParams)v.getLayoutParams();
textview1_param.weight = 7;
そして、赤色のテキストビューのパラメータに上記で設定したパラメータを設定します。青色のテキストビューも同様の設定です。
textvew1 = (TextView)findViewById(R.id.textView);
textvew1.setLayoutParams(textview1_param);
今回は水平方向に1要素だけグラフ表示する簡単なプログラムでしたが、テキストビューを増やすなどして、複数の要素をグラフ表示させることも可能です。また、同様に垂直方向のグラフを作成することもできます。以上でプログラムの説明は終わりです。
3. まとめ
今回はテキストビューの新たな使い方(簡単なグラフ作成)について紹介しました。下記に要点をまとめましたので、ご参考までにどうぞ。
1. 軸の上限値を設定
「activity_main.xml」でWeightSumの値を設定します。
2. 要素の値を設定
「activity_main.xml」でLayout_weightの値を設定します。
3. 要素の値を変更
「MainActivity.java」で下記のようにViewのパラメータを取得・設定します。
textview1_param = (LinearLayout.LayoutParams)v.getLayoutParams();
textview1_param.weight = 7;
textvew1 = (TextView)findViewById(R.id.textView);
textvew1.setLayoutParams(textview1_param);