・Android Studio で画面作成する方法を知りたい
という方に向けた記事になります。
サンプルとして、簡単なスタート画面を作成する場合を考えます。視覚的にレイアウトを編集する方法と、xmlファイルにコードを記述していく方法を見ていきます。
Android Studio 画面作成前の準備
Android Studio 画面作成前の準備として、プロジェクトを作成し、エミュレータでデモ画面が表示できることを確認しましょう。(できている方は飛ばして頂いてOKです。)
プロジェクトの作成
まずは、プロジェクトを作成します。以下の記事を参照ください。
デモ画面(エミュレータ)で初期画面を表示
プロジェクトの作成ができたら、初期画面を表示してみます。プロジェクト作成後は「Hello World!」と画面に表示されるようになっています。
緑色の▶︎ボタンを押して、エミュレータを起動し、「Hello World!」と表示されたらOKです。以下の記事で詳しく解説しています。
Android Studio 画面作成を行う
プロジェクトの作成およびエミュレータでデモ画面表示できたら、実際にAndroid Studio 画面作成を行います。
手順は以下の通り。
1. レイアウトファイルを開く 2. テキストを変更する 3. ボタンを追加する
一つずつ見ていきます。
レイアウトファイルを開く
プロジェクトを作成したら、初期状態で「レイアウトファイル(activity_main.xml)」と「レイアウトの裏の処理を記述するファイル(MainActivity.java)」が作成されています。
今回は画面の作成を行うため、レイアウトファイル(activity_main.xml)を開きます。
また、画像の右上の方で「Code」「Split」「Design」が選択できます。視覚的にレイアウトを編集しつつ、ソースコードも見たいため、Splitを選択します。
テキストを変更する
初期状態では、テキストが「Hello World!」と設定されています。xmlファイルの赤枠の箇所を変更するか、デザインの赤枠の箇所を直接変更することができます。
ただし、テキストを直接レイアウトファイルに設定することは非推奨で、「strings.xml」にテキストを設定し、設定したものをレイアウトファイルから参照することが推奨されています。
非推奨のやり方でもアプリは動くので、慣れてきてから変更してもOKです。
activity_main.xml
" テキストを直接指定(非推奨)
android:text="スタートボタンを押してゲームを始めよう!"
" テキストをstrings.xmlから参照(推奨)
android:text="@string/start_text"
strings.xml
<resources>
<string name="app_name">hyomolution_sample</string>
<string name="start_text">スタートボタンを押してゲームを始めよう!</string>
</resources>
ボタンを追加する
画像の赤枠の箇所からボタンをドラッグ&ドロップして追加もしくはxmlファイルにソースコードを追加します。
activity_main.xml
<Button
android:id="@+id/start_button"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginTop="100dp"
android:ellipsize="middle"
android:text="@string/start_button"
android:textSize="20sp" />
まとめ
Android Studio で画面作成する方法について解説しました。最終的なソースコードは以下の通りです。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="150dp"
android:text="@string/start_text"
android:textSize="16sp" />
<Button
android:id="@+id/start_button"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginTop="100dp"
android:ellipsize="middle"
android:text="@string/start_button"
android:textSize="20sp" />
</LinearLayout>