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. 所感
・タイトル画面が付いただけで、なんだかアプリっぽくなった。