6. 結果画面の作成

動画を Android Studio Chipmunk | 2021.2.1 に更新しました。(2022年8月)

目次

はじめに

今回はクイズの正解数とトータルスコアを表示する結果画面を作成していきます。

【完成イメージ】

image1

 

動画

動画を Android Studio Chipmunk | 2021.2.1 に更新しました。(2022年8月)

動画の注意事項

動画内では onClick 属性を使ってクリックイベントを書きましたが、非推奨となったためコードを修正しました。詳しくはテキスト解説をお読みください。

テキスト

1. 結果画面のファイルを作成する

まずは結果画面に必要な

  • ResultActivity.java
  • activity_result.xml

を作成します。

Step 1

app → java → jp.codeforfun.quizapp(パッケージ名)を選択した状態にします。

image2

 

Step 2

右クリック → New → Activity → Empty Activity を選択します。

image3

 

Step 3

Activity Name に ResultActivity と入力して「Finish」を押します。

image4

 

ResultActivity.java と activity_result.xml が作成できたら、結果画面のレイアウトを作成していきましょう。

 

 

2. レイアウトを作成

結果画面のレイアウトを作成していきます。

activity_result.xml を開いて、以下のように書いてください。

image

 

このような画面になりましたか?

image5

 

クイズ画面の作成で書いた XML とほとんど同じですが、いくつか要素を見てみましょう。

 

android:id="@+id/resultLabel"

ここにはクイズの正解数を表示します。

「3 / 5」は 5 問中 3 問正解という意味です。正解数の表示形式はあとで変更できます。

 

android:id="@+id/totalScoreLabel"

ここにはクイズの累積正解数(今までに何問正解したか)を表示します。

このトータルスコアはクイズデータとしてアプリに保存されるようにします。

 

もどるボタン

もう一度クイズに挑戦できるように、クイズ開始画面へもどるボタンを用意します。

クイズ画面の解答ボタンと同じように onClick="returnTop" として、ボタンが押された時に returnTop メソッドを呼び出します。

 

 

3. Warning の解消

レイアウトは完成ですが、android:text="~" の部分に Warning が出ていますね。

image6

 

クイズ画面と同じく strings.xml に文字列を定義していないことが原因なので、修正しておきましょう。

 

strings.xml

10~13行目を追加します。

image

  • 正解数「3 / 5」の 3
  • 「トータルスコア : 333」の 333

は ResultActivity.java から書き換えるので %d を使います。

正解数を「5問中3問正解」と表示したい場合は

<string name="result_score">5問中%d問正解</string>

と書いて下さい。

 

activity_result.xml

android:text="~" を android:text="@string/~" と変更して下さい。

image7

 

3行目のコードも不要なので削除してしまいましょう。

image8

 

次に行うこと

これで結果画面のレイアウトは完成です!

次回はクイズ結果を表示して、スコアを保存できるようにしていきます。

 

ここまでのコード

 

完了して次のステップへ  
コメント

0 コメント