新しいプロジェクトとクイズ画面の作成

目次

はじめに

ここでは
・新しいプロジェクトの作成
・クイズ画面の作成
をしていきます。

動画


テキスト

1. 新しいプロジェクトを始める

まずは 「Start a new Android Studio project」をクリックします。


2. アプリの情報を入力する

次にアプリの情報を入力していきます。


Application Name アプリの名前
Company Domain 会社ドメイン
Project Location プロジェクトを保存する場所

 

ドメインとは?

ウェブサイトの「住所」と言われるものです。例えば、

https://codeforfun.jp/android/ の codeforfun.jp の部分がドメインです。

 

Company Domain(カンパニードメイン)は、Package Name(パッケージネーム)の作成に使われます。

私の場合はカンパニードメインに codeforfun.jp を設定したので、パッケージネームが jp.codeforfun.quizapp になっています。


このパッケージネームはアプリを公開した時の ID になります。

同じ ID のアプリは公開できないため、他の人と同じにならないようにする必要があります。


自分のドメインを使用するのが一番良いのですが、ドメインを持っていない場合は名前やニックネームでも大丈夫です。

その場合は、他の人が使っていないような名前にしてください。


入力ができたら「Next」を押します。


3. ミニマムSDKを設定する

ここでは、どこまで古い機種に対応させるかを決めます。

このアプリでは、API 15 にしたのでほぼ 100% の機種に対応できます。

今回はとてもシンプルなアプリなので低い API でも問題ありませんが、

開発するアプリや使用したいライブラリに合わせて決める必要があります。


入力ができたら「Next」を押します。


4. Activityを選択

「Empty Activity」を選択します。

Empty は空っぽという意味で、Empty Activity(エンプティーアクティビティ)はナビゲーションやマップなどが入っていない空っぽのアクティビティです。


選択したら「Next」を押します。


5. Activityの名前

ここではActivityに名前をつけます。

「MainActivity」「activity_main」のままで大丈夫です。


名前を確認したら「Finish」を押して、プロジェクトの作成が完了するのを待ちましょう!


6. プロジェクトのフォルダを確認

プロジェクトの作成が完了すると、画像のようにファイルが作成されていると思います。


MainActivity.java にクイズの機能を実装し、

activity_main.xml にクイズや答えボタンなどを表示していきます。


簡単に言うと

MainActivity.java → アプリのユーザーから見えない部分

activity_main.xml → アプリのユーザーから見える部分

となります。


7. Gradleを確認

最後に app.gradle(Module: app) というファイルを見てみます。

プロジェクト作成時に設定した applicationId, minimumSDK が設定されています。

細かいことがたくさん書いてありますが、AdMob 広告を実装する時とアプリの新しいバージョンを公開するときにまた紹介します。

8. クイズ画面について

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

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


【完成イメージ】

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

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

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

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


9. Design? Text?

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

Android アプリのレイアウトは XML で書かれており、「Design」「Text」のどちらの方法で作成するか選ぶことができます。


Design(デザイン)

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

長所:簡単に画面が作れる

短所:XML ファイルがゴチャゴチャする

 

Text(テキスト)

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

長所:コードがスッキリする

短所:手間がかかる

 

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


10. レイアウトについて

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

2行目 <android.support.constraint.ConstraintLayout

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


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

今回は ConstraintLayout ではなく「LinearLayout(リニアレイアウト)」を使います。

LinearLayout はボタンやテキストなどを横一列・縦一列に並べることができるレイアウトです。

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


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

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

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

 

2行目、21行目

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

 

9行目

android:gravity="center_horizontal"

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

 

10行目

android:orientation="vertical"

LinearLayout 内の要素を垂直方向に並べる設定です。

horizontal と vertical はレイアウトの作成でよく使いますので、覚えておくと便利です。


12. クイズ番号

今ある 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 のサイズを設定します。

wrap_content にすると幅・高さが文字数にあわせて調整されます。

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

 

5行目

android:text="Q1"

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

 

6行目

android:textSize="22sp"

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

 

7行目

android:layout_marginTop="30dp"

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


13. 問題文

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

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


14. 解答ボタン

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


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

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

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

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

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

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


まとめ

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

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


ここまでのコード

コメント

0 コメント