4択クイズアプリ

【Android Studio 4.1】クイズアプリ開発講座 第2回「クイズ画面の作成」

 
この講座の目次はこちら

Android Studio 3.x / 4.0.1 をお使いの方はこちらをお読み下さい。

今回はクイズ画面を作成していきます。

クイズ画面に必要なのは、この3つです。

  1. クイズ番号
  2. 問題文
  3. 解答ボタンを4つ

 

【完成イメージ】
クイズ画面完成イメージ

1. クイズ番号
クイズ番号は「Q1」「第1問」という表示です。

2. 問題文
今回は県庁所在地クイズを作るので、問題文には「北海道、東京都」などの都道府県名を表示します。

3. 解答ボタン
4択クイズなので解答ボタンを4つ用意します。

例えば、問題文が「北海道」のときは、解答ボタンに「札幌市」「仙台市」「金沢市」「奈良市」と表示します。
 

それでは activity_main.xml を開いてクイズ画面を作成していきましょう!
 


 

動画

【Android Studio 4.1】クイズアプリ開発講座 #3 クイズ画面の作成

 
 

テキスト

1. Code? Split? Design?

activity_main.xml を開くと、右上に Code / Split / Design の3つのタブがあります。

Code / Split / Design
 

Android アプリ開発ではレイアウトを XML で書いていくのですが、このとき Code / Split / Design の3つの作成方法を選ぶことができます。

XMLとは?

XMLとはExtensible Markup Language(エクステンシブル マークアップ ランゲージ)の略です。簡単に言うと HTML のデータ管理バージョンです。HTML はウェブサイトの画面を作るときに使いますが、XML は主にデータを管理するときに使われます。

 

Code / Split / Design
 

① Code(コード)

Code では自分で XML を書いていきます。
スッキリとした XML コードを書けることがメリットですが、慣れるまで少し手間がかかることがデメリットです。
 
 

② Split(スプリット)

Split では Code 画面とプレビュー画面が分割で表示されます。
左側に XML を書きながら、右側でレイアウトのプレビューを確認することができます。
 
 

③ Design(デザイン)

Design ではドラッグ&ドロップでボタンやテキストなどの要素を置いていきます。要素を置くと自動的に activity_main.xml に XML コードが追加される仕組みです。

簡単に画面が作れるのがメリットですが、XML がゴチャゴチャするするのがデメリットです。
 
 

どれを使うか?

どれを使っても良いですが、個人的にはコードがスッキリとする② Split をいつも使用しています。
初めての方にもわかりやすいと思うので、今回は② Split でレイアウトを作っていきましょう。
 
 

プレビュー表示の設定

Split 画面を開くと、以下のようにプレビューが表示されているかもしれません。

Splitプレビュー画面
 

これだと画面が見にくいので、いくつか設定を変更します。
 

プレビュー画面内のメニュー左上にある「青い正方形が重なったようなアイコン」をクリックして、Design を選択します。

プレビュー設定
 

次に、そのすぐ下にある「目のようなアイコン」をクリックして、Show System UI を選択します。

プレビュー設定
 

「Pixel」をクリックするとタブレットやエミュレータなどに切り替えることもできます。ここでは使用する Android Emulator に合わせておくのがお勧めです。

プレビュー設定
 

ここからはこのような画面で開発を進めていきましょう。

プレビュー設定
 
 

2. レイアウトについて

activity_main.xml の2行目にこんなコードが書いてあります。

<androidx.constraintlayout.widget.ConstraintLayout

これは「ConstraintLayout を使用します」という意味です。

ConstraintLayout(コンストレイトレイアウト)は、テキスト・ボタン・画像などの要素の位置関係が複雑な場合に役立つレイアウトです。
 

今回は

  • レイアウトに慣れるまでは記述が難しいこと
  • ConstraintLayout では XML が少し複雑になってしまうこと
  • クイズ画面はボタンとテキストだけであること

から ConstraintLayout ではなく LinearLayout(リニアレイアウト)を使います。

LinearLayout を使うと、ボタンやテキストを簡単に横一列・縦一列に並べることができます。
 

このようにクイズ番号・問題文・解答ボタンを縦一列に並べて、クイズ画面を作成していきましょう。

クイズ画面はLinearLayoutで作成
 
 

3. LinearLayout(リニアレイアウト)

まずはコードを以下のように書き換えてください。

追加・変更するのは、2・ 8・ 9・ 20行目です。

 

2・20行目

LinearLayout に変更し、20行目も LinearLayout で閉じます。
 

8行目

android:orientation="vertical"

LinearLayout 内の要素を vertical(垂直方向)に並べる設定です。
orientation を書かない場合は horizontal(水平方向)に要素が並びます。
 

9行目

android:gravity="center"

ボタンやテキストなどの要素をcenter(中央)に配置する設定です。
「Hello World!」が画面中央に表示されましたね。
 

他にもこのような設定ができます。

android:gravity="center_horizontal"左右中央
android:gravity="center_vertical"上下中央
android:gravity="center"上下左右中央

 

メモ

horizontal:水平方向 / vertical:垂直方向
はレイアウトの設定でよく使う英単語なので覚えておくと便利です。

 
 

4. クイズ番号

今ある TextView「Hello World!」を以下のように書き換えます。

 

2行目

android:id="@+id/countLabel"

この TextView に id(名前)をつけています。id を書くことで MainActivity.java からこの TextView を呼び出せるようになります。

 

3・4行目

android:layout_width="wrap_content"
android:layout_height="wrap_content"

TextView の width(幅)height(高さ)を設定しています。

サイズの指定方法は3種類あります。

wrap_content文字数にあわせて幅・高さが調整されます。
match_parentparent(親)要素である LinearLayout と同じ幅・高さになります。
好きな数値 + dp300dp のように直接サイズを指定します。
dp は Density-independent Pixels の略で、画面密度に合わせてサイズを調整してくれる単位です。

 

5行目

android:text="Q1"

TextView に表示するテキストです。
文字が黄色に変わっていると思いますが、あとで修正するのでそのままにしておいてください。

TextViewのWarning
 

6行目

android:textSize="22sp"

テキストの文字サイズを指定しています。

sp は Scalable Pixel(スケーラブルピクセル)の略で、ユーザが設定しているフォントサイズに合わせてスケールが調整される単位です。

文字サイズの単位は sp と覚えておいて下さい。
 
 

5. 問題文

クイズ番号の下に、コードを追加します。

クイズ番号のコードとほとんど同じですが、id が questionLabel になっています。

1つのアクティビティ内で同じ id を使うことはできないので、要素ごとに異なる id 名を付ける必要があります。
 

7行目

android:layout_marginTop="60dp"

問題文の上側に 60dp のマージン(余白)を付けています。

layout_marginTop
 
 

6. 解答ボタン

問題文の下に、コードを追加します。

 

style

style="@style/Widget.MaterialComponents.Button.OutlinedButton"

前回確認した MaterialComponents テーマに用意されているボタンのスタイルを指定しています。

他にも色付きのボタン(デフォルト)、テキストだけのボタン(TextButton)が用意されています。
MaterialComponentsテーマのボタン
 

android:onClick="checkAnswer"

「このボタンを押した時に checkAnswer メソッドを呼びます」という設定です。

checkAnswer メソッドは、ボタンを押したときに正解・不正解を判定するために使います。
 

今は checkAnswer の文字が赤くなっていると思います。

checkAnswerメソッドの警告

これは「MainActivity に checkAnswer メソッドがありません!」という警告です。

このあと MainActivity.java を書くときに消えますので、そのままにしておいて大丈夫です。
 
 

7. Warning の解消

これでレイアウトは完成ですが、Warning(文字が黄色に変わっている箇所)がいくつかありますね。

Warning
 

Warning は「注意・お知らせ」のようなものなので、そのままにしておいてもアプリの動作に影響はありません。

それでも、コードがマーカーだらけだとあまり良い感じはしないので修正しておきましょう。
 

22行目あたり

一つ目は android:text="問題文" の部分です。(Q1 はこの後修正していきます。)

色が変わっている部分にカーソルを合わせてみると

Hardcoded string "問題文", should use "@string" resource

と表示されます。

Hardcoded string should use string resource
 

これは「ハードコードされている文字列 "問題文" には @string リソースを使うべきです」という Warning です。

@string リソースは文字列を定義するために用意されている strings.xml ファイルのことです。ハードコードとは strings.xml を使わずに直接文字列を書いていることを指しています。

メッセージの通り strings.xml に文字列を定義していきましょう。
 

Android Studio 画面左側のプロジェクト構造から app → res → values → strings.xml を開きます。

strings.xml
 

strings.xml を開いたら、4行目を追加します。

name 属性にこの文字列の名前を指定して、<string></string> の間に定義する文字列を書きます。
 

文字列を定義したら activity_main.xml に戻って

android:text="問題文"

android:text="@string/question_label"

に変更します。

@string/名前と書くことで、strings.xml に定義した文字列を呼び出すことができます。
 

Warning が消えたでしょうか?

string/question_label
 
 

15行目あたり

次は15行目あたりにある android:text="Q1" です。
先ほどの「問題文」と同じ方法で Warning を消すことができますが、少しだけ書き方が変わります。

Q11 の部分は第何問目かを表すので、クイズを出題するたびに更新します。このようにあとで数値を入れる部分には %d を使用します。

strings.xml に5行目を追加します。

今回は数値なので %d ですが、文字列を入れる場合は %s を使用します。
 

activity_main.xml での書き方は同じで

android:text="@string/count_label"

と書きます。
 
 

30行目あたり

次は30行目あたりにある android:text="選択肢" です。

android:text=選択肢
 

これも TextView と同じく strings.xml から文字列を指定していないことが原因なので、同じ方法で消していきましょう。

strings.xml に6行目を追加します。

 

activity_main.xml の Button 要素の text を以下のように変更します。

android:text=”@string/answer_btn”

他の3つのボタンも @string/answer_btn を指定して Warning を消して下さい。
 
 

8. アプリを実行する

ここで一度アプリをエミュレータで実行してみましょう。

実行するエミュレータを確認して Run 'app' アイコンを押します。

Run app アイコン
 

Android Studio のプレビュー画面と同じレイアウトになったでしょうか?

このままでも良いですが、このアプリにはアクションバーは必要ないので非表示にしておきましょう。

アクションバーを非表示にする
 
 

9. アクションバーを非表示にする

画面左側のプロジェクト構造から res → values → themes → themes.xml を開いて下さい。

themes.xml
 

3行目あたりにある

parent="Theme.MaterialComponents.DayNight.DarkActionBar"

parent="Theme.MaterialComponents.DayNight.NoActionBar"

に変更します。
 

エミュレータでもう一度アプリを実行して下さい。

アクションバーが非表示になっていれば完成です。

アクションバーを非表示にする
 
 

次に行うこと

クイズ画面の作成は完成です!

次回はクイズを出題する準備を進めていきます。

第3回「クイズを準備する」に進む
 

ここまでのコード

activity_main.xml

 

strings.xml

 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

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

CAPTCHA