5,029 views

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

1. やりたいこと

(4) BMI計算アプリを作る。 で作ったアプリにタイトル画面を付けたい。

タイトル画面を作るということは、BMI計算画面との 2画面構成ということになる。
すなわち、画面遷移を制御する必要がある。

アプリ内で以下のように画面遷移をやりたい。
・アプリ起動時はタイトル画面を表示する。
・ユーザーが画面をタップしたら、BMI計算画面に遷移する。
・BMI計算画面で入力欄以外をタップされたら、タイトル画面に遷移する。

出来上がったアプリの画像はこちら。

2. やってみる！

(1) 方針

画面切り替えには以下の二通りの方法が考えられる。
方法1 : Activityを複数持ち、アクティブな Activityを切り替える。
方法2 : 一つの Activity内でレイアウトを複数持ち、アクティブなレイアウトを切り替える。

今回はベースプログラムからのコード変更量が少なくて済む「方法2」を採用する。

(2) 実装

1) タイトル画面用のレイアウトを新規作成する。

「res」を右クリックしてメニューを表示し、layoutファイルの新規作成を選択する。

名前だけ入力して [OK] を押す。

タイトル画面なので、大きな文字のタイトルと、写真を 1枚配置した。

写真は Explorer上で画像ファイルを「コピー」し、Android Studioの Projectペイン上で drawableに貼り付ける。
※数字から始まるファイル名だとNGだったので注意

2) タップされたら画面切り替えするプログラムを書く。

(4) BMI計算アプリを作る。 で作ったベースプログラムからいろいろと変えてしまったので、プログラムを一気に表示して行ごとに説明を記しておこう。

19行目 : 現在表示している画面を記憶しておくための変数。リソースIDで管理した方がよいかな？
23行目 : どっちの画面を表示するかはサブルーチンに任せる。
27行目 : タイトル画面を表示する処理。レイアウトに従って表示するだけ。
32行目 : BMI計算画面を表示する処理。これはベースプログラムのまんま。
57行目 : 19行目に書いた変数の値を見て、どちらの画面を表示するかを判断・切替実行する。
68行目 : タッチイベント(UP)が Activityまで届いたら、画面切り替え処理を呼び出す。

package net.dogrow.www.mybmi;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
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算出結果表示欄への参照
    private int screenNo = 0;       // アクティブな画面番号の初期値

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        activateTitleScreen();
    }

    // タイトル画面を表示
    private void activateTitleScreen(){
        setContentView(R.layout.activity_title);
    }

    // BMI計算画面を表示
    private void activateMainScreen(){
        setContentView(R.layout.activity_main);
        execCalcBMI = findViewById(R.id.button_exec_calc);  // BMI計算実行ボタンの参照を取得
        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);
                // ソフトキーボードを隠す。
                InputMethodManager inputMethodManager = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
                inputMethodManager.hideSoftInputFromWindow(v.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
            }
        });
    }

    // 画面切り替え
    private void altScreen(){
        if(screenNo == 0){
            screenNo = 1;
            activateMainScreen();
        }else{
            screenNo = 0;
            activateTitleScreen();
        }
    }

    // 背景タッチイベント処理
    @Override public boolean onTouchEvent(MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_UP) {    // タップ終了？
            altScreen();        // 画面切り替え実行
        }
        return true;
    }

    // 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;
    }
}

3. 所感

・タイトル画面が付いただけで、なんだかアプリっぽくなった。