4択クイズアプリ

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

ここまでの記事はこちら
 

 
前回プロジェクトを作成をしたので、今回はクイズ画面を作っていきましょう。
 

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

  • クイズ番号
  • 問題文
  • 解答ボタンを4つ

 

【完成イメージ】


 

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

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

解答ボタンを4つ
4択クイズなので解答ボタンを4つ用意します。
例えば、問題文が「北海道」のときは、解答ボタンに「札幌市」「仙台市」「金沢市」「奈良市」と表示します。
 
 

それでは、Android Studioを開いて始めていきましょう!
 

画面サイズについて

今回はNexus4(動画ではNexus5)のサイズで開発していきます。
 
・文字サイズ(android:textSize="22sp")
・ボタンサイズ(android:layout_width="300dp", android:layout_height="60dp")
・マージン(android:layout_marginTop="30dp")
 
の数値はプログラムに影響しないので、
お使いの機種やエミュレーターに合わせて変更してください。

 


 

 

動画

0:46 ~

【Android Studio】4択クイズアプリ開発講座 #2 新しいプロジェクトとクイズ画面の作成

 
 

Design? Text?

activity_main.xmlファイルを開きます。

activity_main.xmlを開くと、下の方に「Design」「Text」というタブがあります。


 
 

Androidアプリ開発では、レイアウトをXMLで書いていきます。
このとき「Design」「Text」の2つの方法を選ぶことができます。

XMLとは?

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

 

Design(デザイン)

デザインタブでは、ドラッグ&ドロップでボタンやテキストを置いていくことができます。
それらを置くと自動的にactivity_main.xmlにコードが追加されます。

長所:簡単に画面が作れる
短所:XMLファイルがゴチャゴチャする
 

Text(テキスト)

テキストタブでは、自分でXMLを書いていきます。

長所:コードがスッキリする
短所:手間がかかる
 
 

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

レイアウトについて

activity_main.xmlを開いてみると、2行目にこんなコードが書いてあります。

<android.support.constraint.ConstraintLayout

これは「ConstraintLayoutというレイアウトを使用します」という意味です。

ConstraintLayout(コンストレイトレイアウト)とは、自動的にボタンやテキストの位置を最適化し調整してくれるレイアウトです。

今回はこれを使わずに「LinearLayout(リニアレイアウト)」を使います。
LinearLayoutは、ボタンやテキストなどを横一列・縦一列に並べることができるレイアウトです。
 

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

 
 

LinearLayout

まずはこのように書き換えてみてください。

 

追加・変更したのは、2, 9, 10, 21行目です。
 

2行目、21行目

LinearLayoutに変更し、21行目もLinerLayoutで閉じるようにします。
 

9行目

android:gravity="center_horizontal"
ボタンやテキストなどの要素を水平方向中央に配置する設定です。「Hello World!」の文字が左右中央になりましたね。
 

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

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

 

メモ

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

 
 

クイズ番号

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

 

2行目

android:id="@+id/countLabel"

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

3、4行目

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

TextViewのサイズを設定します。
wrap_contentにすると幅・高さが文字数にあわせて調整されます。

match_parentにするとparent(親)要素であるLinearLayoutと同じ幅・高さになってしまいます。
 

5行目

android:text="Q1"

TextViewに表示するテキストです。
 

6行目

android:textSize="22sp"

テキストの文字サイズです。
 

7行目

android:layout_marginTop="30dp"

画像のように"Q1"の上に隙間を作ります。
 

 
 
 

問題文

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

 

項目は先ほどのクイズ番号と同じです。
 
 

解答ボタン

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

 

ここで新しく出てくるのが android:onClick="checkAnswer" です。
これは「ボタンを押した時にcheckAnswer関数を呼びます」という設定です。

checkAnswer関数は、ボタンを押したときに正解か不正解かをチェックするために使います。
 

今は「checkAnswer」の部分に赤い波線がついているかと思います。

これは「MainActivityにcheckAnswer関数がありません!」という警告です。
次回、MainActivity.javaを書くときに消えますので、そのままにしておいて大丈夫です。
 
 

ここまでのコード

今回書いたコードのまとめです。

 

このようなレイアウトになりましたか?
 

 
 
 

次に行うこと

これでactivity_main.xmlファイルは完成です。
次回はクイズの出題に必要な準備をしていきます。

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

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

COMMENT

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