(4) BMI計算アプリを作る。

投稿者: | 2018年9月29日
0件のコメント

7,495 views

この記事は最終更新から 2265日 が経過しています。

1. やりたいこと

Android Studioを使った初アプリ制作のテーマとして「BMI計算」を選んだ。

入力 → 計算 → 出力
というコンピュータプログラムの基本をシンプルに実装できるからだ。

ちなみに BMI（Body Mass Index）は以下の式で求める。
BMI = (体重) ÷ (身長)2

※自分の備忘録としてのメモ書きなので、入門用には役立たないかも…

2. やってみる

Step 1 : Android Studioプロジェクトの新規作成

Empty Activityで空プロジェクトを作る。

Step 2 : 表示パーツを配置

下図のように 7個のパーツを配置する。
[1] TextView : 身長ラベル
[2] TextView : 体重ラベル
[3] Number : 身長入力欄
[4] Number : 体重入力欄
[5] Button : 計算実行
[6] TextView : BMIラベル
[7] TextView : BMI計算結果

これを XMLで見るとこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="身長[cm]"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintEnd_toStartOf="@+id/textView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="体重[kg]"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/input_H_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="number"
        android:text="0"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/input_W_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="number"
        android:text="0"
        app:layout_constraintEnd_toEndOf="@+id/textView2"
        app:layout_constraintStart_toStartOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <Button
        android:id="@+id/button_exec_calc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="計算実行"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/input_H_view" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="BMI"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_exec_calc" />

    <TextView
        android:id="@+id/text_BMI_view"
        android:layout_width="wrap_content"
        android:layout_height="61dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Display3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />
</android.support.constraint.ConstraintLayout>

ここまで作ったところで [Run] してみる。

それっぽいのが出てきた！
今回必要な表示パーツはこれだけだ。

Step 3 : [計算実行]ボタン押下時の処理を実装

自動生成された MainActivity.java に、コメント中に★★★を書いた 3箇所を追記する。

package net.dogrow.www.mybmi;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Button execCalcBMI;     //★★★ [計算実行]ボタンへの参照

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        execCalcBMI = findViewById(R.id.button_exec_calc);  //★★★ ボタンの参照を取得

        //★★★ [計算実行]ボタン押下時の処理を追加
        execCalcBMI.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                Log.d("MainActivity","exec. onClick()");  // ※動作確認用、後で削除
            }
        });
    }
}

[Run]で実行してみる。
[計算実行]ボタンを押下すると、期待通りにログ出力された。

Step 4 : BMI計算処理を実装

上記の Step 3 のプログラムに、コメント中に★★★を書いた 6箇所を追記する。

package net.dogrow.www.mybmi;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {
    private Button execCalcBMI;     // [計算実行]ボタンへの参照
    private EditText input_H;       //★★★ 身長入力欄への参照
    private EditText input_W;       //★★★ 体重入力欄への参照

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        execCalcBMI = findViewById(R.id.button_exec_calc);  // ボタンの参照を取得
        input_H = findViewById(R.id.input_H_view);  //★★★ 身長入力欄の参照を取得
        input_W = findViewById(R.id.input_W_view);  //★★★ 体重入力欄の参照を取得

        //★★★ [計算実行]ボタン押下時の処理を追加
        execCalcBMI.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                //★★★ 身長と体重の入力値を取得
                double input_H_double = Double.valueOf(input_H.getText().toString());
                double input_W_double = Double.valueOf(input_W.getText().toString());
                double BMI = calcBMI(input_H_double, input_W_double);
                Log.d("MainActivity","exec. onClick() H=" + input_H_double + ", W=" + input_W_double + ", BMI=" + BMI);  // ※動作確認用、後で削除
            }
        });
    }

    //★★★ BMI算出
    private double calcBMI( double h, double w ){
        // BMI = 体重 ÷ (身長 x 身長)
        double bmi = 0;
        if(w > 0 && h > 0) {
            bmi = w / (h * h) * 10000;
        }
        return bmi;
    }
}

[Run]で実行してみる。
[計算実行]ボタンを押下すると、期待通りに BMI算出結果がログ出力された。

Step 5 : BMI算出結果の表示処理を実装

最後の仕上げ！
算出した BMI値を画面上に表示する。

上記の Step 4 のプログラムに、コメント中に★★★を書いた 3箇所を追記する。

package net.dogrow.www.mybmi;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private Button execCalcBMI;     // [計算実行]ボタンへの参照
    private EditText input_H;       // 身長入力欄への参照
    private EditText input_W;       // 体重入力欄への参照
    private TextView bmi_result;    //★★★ BMI算出結果表示欄への参照

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        execCalcBMI = findViewById(R.id.button_exec_calc);  // ボタンの参照を取得
        input_H = findViewById(R.id.input_H_view);  // 身長入力欄の参照を取得
        input_W = findViewById(R.id.input_W_view);  // 体重入力欄の参照を取得
        bmi_result = findViewById(R.id.text_BMI_view);  //★★★ 体重入力欄の参照を取得

        // [計算実行]ボタン押下時の処理を追加
        execCalcBMI.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                // 身長と体重の入力値を取得
                double input_H_double = Double.valueOf(input_H.getText().toString());
                double input_W_double = Double.valueOf(input_W.getText().toString());
                double BMI = calcBMI(input_H_double, input_W_double);
                //★★★ BMI算出結果を表示
                String result = String.format("%.1f", BMI);
                bmi_result.setText(result);
            }
        });
    }

    // BMI算出
    private double calcBMI( double h, double w ){
        // BMI = 体重 ÷ (身長 x 身長)
        double bmi = 0;
        if(w > 0 && h > 0) {
            bmi = w / (h * h) * 10000;
        }
        return bmi;
    }
}

[Run]で実行してみる。
[計算実行]ボタンを押下すると、期待通りに BMI算出結果が表示された。

3. 所感

・Android Studioを使った初めてのプチアプリ作りができた。
・8年前に Eclipse IDEで Androidアプリを作った時と比べて、そんなに違和感を感じなかった。
・エミュレーターの実行環境は Xeon E3-1271 V3(4core 8thread), メモリ16GB だが、今回は重くは感じなかった。
・自分は iPhoneユーザーなので Androidスマホを持っていない… 実機上で動作確認するために中古で 1台買うか。
・今後は以下をテーマに作って行きたい。
　1. 画面遷移があるアプリ
　2. OpenGL ESを使うアプリ
　3. インターネット通信を使う WEBアプリ
　4. カメラを使うアプリ
　5. 傾き（加速度センサー）を使うアプリ
　6. GoogleMapsを使うアプリ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）