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")
 
の数値はプログラムに影響しないので、お使いの機種やエミュレーターに合わせて自由に変更してください。

 

動画

動画では Android Studio 3.1.4 を使用していますが 3.6 でも動作確認済みです。動画の下にある解説では Android Studio 3.6.3 を使用しているので、そちらもご確認ください。

0:46 ~

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

 
 

解説

Code? Split? Design?

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

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


 
 

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

XMLとは?

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

 


 

① Code

「Code」では自分で XML を書いていきます。

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

② Split

「Split」では Code 画面とプレビュー画面が分割で表示されます。

左側に XML を書きながら、右側でスマホ画面のプレビューを確認することができます。
 
 

③ Design

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

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

どれを使うか?

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

レイアウトについて

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

<android.support.constraint.ConstraintLayout

(API 28 以上の場合は androidx.constraintlayout.widget.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 の上に隙間を作ります。


 
 
 

問題文

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

 

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

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

解答ボタン

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

 

ここで新しく出てくるのが android:onClick="checkAnswer" です。

これは「ボタンを押した時に checkAnswer 関数を呼びます」という設定です。

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

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

これは「MainActivity に checkAnswer 関数がありません!」という警告です。

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

ここまでのコード

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

 

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

 
 
 

次に行うこと

これでクイズ画面の用意ができました。
次回はクイズの出題に必要な準備をしていきます。

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

クイズアプリ開発講座の完全版について

もっとアプリ開発をしてみたい!自分のアプリをリリースしたい!という方のために、この講座の完全版をご用意しました。

 
完全版では

  • SQLite Databaseを使ってのクイズ管理
  • クイズカテゴリの選択
  • 正解・不正解の効果音
  • Google Play Games との連携
  • リーダーボードによるランキング機能
  • アチーブメント(実績)

などを実装していきます。
 
全手順の動画付きで、アプリの開発から公開・アップデートまで出来る講座になっています。

初めてアプリを作るという方もぜひ挑戦してみてください
 

 
 

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

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

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

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

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

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

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

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

無料体験はこちら

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

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

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

3. Treehouse

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

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

COMMENT

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

CAPTCHA