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

目次

はじめに

今回は

を行なっていきます。

動画

Android Studio バージョンについて

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


テキスト

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

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



2. Activityの選択

ここではアプリのレイアウトを選択することができます。

今回は「Empty Activity」を選択します。


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


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


3. プロジェクト情報の入力

次にプロジェクトの名前・保存先などを入力していきます。


①アプリ名

アプリの名前を入力します。


②パッケージ名

パッケージネームはアプリを公開した時の ID になるものです。

https://play.google.com/store/apps/details?id=パッケージ名

同じ ID のアプリを公開することはできないので、他の人と重複しないパッケージ名にする必要があります。

独自ドメインを取得してパッケージ名に使用するのが一番良いのですが、ドメインを持っていない場合は名前やニックネームでも問題ありません。

また、アプリを Google Play ストアに公開した後にパッケージ名を変更することはできないのでご注意ください。

ドメインとは?

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

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

 

③保存先

このプロジェクトの保存場所を指定します。


④言語

Java と Kotlin のどちらの言語を使うかを選択します。ここでは「Java」を選択してください。


⑤ミニマムSDK

SDK とは Software Development Kit(ソフトウェア・デベロップメント・キット)の略で、アプリの開発キットのようなものを意味します。どの SDK を設定するかによって、どこまで古い機種に対応させるかを決めます。

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


今回はシンプルなアプリなので低い API でも問題ありませんが、開発するアプリに合わせてどの程度の古い機種まで対応させるのか考える必要があります。

「Help me choose」を押すと現在のシェアを確認することができます。


全て入力できたら「Finish」を押してください。プロジェクトの作成が始まります。



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


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

プロジェクト作成時に EmptyActivity を選択したので MainActivity.java と activity_main.xml ファイルがセットで作成されます。

この MainActivity.java にクイズの機能を実装、activity_main.xml にクイズや回答ボタンなどを表示していきます。 

簡単に言うと

  • MainActivity.java → アプリのユーザーから見えない部分(機能)
  • activity_main.xml → アプリのユーザーから見える部分(デザイン)

となります。


5. Gradleを確認

最後に app.gradle(Module: app) というファイルを見ておきましょう。

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

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


6. クイズ画面について

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

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


【完成イメージ】

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

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

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

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


7. Code? Split? Design?

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 でレイアウトを作っていきましょう。



8. レイアウトについて

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

<android.support.constraint.ConstraintLayout

(API 28 以上の場合は androidx.constraintlayout.widget.ConstraintLayout)

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

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


今回はこれを使わずに LinearLayout(リニアレイアウト)を使います。

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

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




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

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

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

 

2行目、21行目

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

 

9行目

android:gravity="center_horizontal"

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

 

10行目

android:orientation="vertical"

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

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

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

 

メモ

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

 


10. クイズ番号

今ある 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" の上に隙間を作ります。



11. 問題文

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

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

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



12. 解答ボタン

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


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

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

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


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

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

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


まとめ

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

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


ここまでのコード

コメント

1 コメント