最初のAndroidアプリ プログラミング

次に「こんにちは世界!」と画面に表示するための設定と、プログラミングを行います。

設定ファイルの編集

まずは、画面表示に関連する設定ファイルの定義を行います。

Androidアプリケーションにおける画面の表示には、レイアウトと呼ぶ画面の構成やビューと呼ぶ画面の部品の設定を行いますが、その設定にはXMLが用いられます。

つまり、レイアウトとビューを設定するXMLファイルを作成し、画面表示するための設定を行っていくわけです。

プロジェクトを作成すると、プロジェクトの「res」フォルダの「layout」フォルダの中に「activity_hello_android.xml」というファイルが自動生成されます。

「layout」フォルダは、レイアウトとビューの設定ファイルを保存するフォルダです。

first_program_12

この「activity_hello_android.xml」が最初の画面のレイアウトとビューの設定ファイルになりますので、「こんにちは世界!」を表示するように編集を行います。

Android Studioには、画面作成用に使うグラフィカルな編集ツールがありますが、基本を理解するために、XMLをテキストエディタで記述する方法で説明します。

まず、「activity_hello_android.xml」をクリックして、ファイルを開いてください。

ファイルを開きますと、最初は、編集ツールの画面が表示されますので、エディタの下にある「Text」をクリックします。

first_program_13

テキストエディタの画面が表示されます。

first_program_14

最初に記述されている設定は、以下のとおりです。

リスト 1 activity_hello_android.xml(初期設定)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".HelloAndroidActivity" >

    <TextView android:text="Hello World!" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

なお、表示された際、「android:paddingRight」や「android:paddingTop」などは、上記のように「@dimen~」とは表示されていません。しかし、これはあくまでAndroid Studio上で見やすいように変換して表示しているためで、実際の値は、上記のとおりです。

「android:paddingRigh」の値部分(背景色が薄緑の位置)をクリックすると、表示が切り替わることが確認できます。

設定内容全体を囲むように、<RelativeLayout・・・></RelativeLayout>というタグがデフォルトで記述されています。

「RelativeLayout」タグは、他のビューとの位置関係を指定することで、相対的にビューを配置するためのレイアウトです。

1行目と2行目の「xmlns:android=”http://schemas.android.com/apk/res/android”」と「xmlns:tools=”http://schemas.android.com/tools”」は、XMLの名前空間を定義し、設定ファイルで使用するタグや属性が正しく認識されるようにしています。

各レイアウトやビューのタグには、属性を設定することができます。

続く「android:layout_width」と「android:layout_height」は、画面全体でこのレイアウトの横と縦の幅を定義する属性です。

これらの属性に設定している「match_parent」は、画面いっぱいに表示することになります。

一方、この設定を「wrap_content」とすると、画面全体でこのレイアウトの幅を自動調整して表示します。

「android:paddingLeft」は左側の余白、「android:paddingRight」は右側の余白、「android:paddingTop」は上の余白、「android:paddingBottom」はレイアウトの下の余白を設定できます。

「@dimen/activity_vertical_margin」や「@dimen/activity_horizontal_margin」は、余白の長さを指定しています。

これらは、「res」フォルダの「values」フォルダの「dimens.xml」ファイルに設定されてあります。

「values」フォルダは、長さや幅などの値を設定するファイルや文字列を設定するファイルなどを保存するフォルダです。

first_program_15

「dimens.xml」ファイルをダブルクリックして開いてみましょう。

リスト 2 dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

「dimen」タグの属性「name」に設定されている「activity_horizontal_margin」や「activity_vertical_margin」に対して、16dpという長さを示す値が設定されてあります。

レイアウトとビューの設定ファイルで、「@dimen/activity_vertical_margin」や「@dimen/activity_horizontal_margin」と記述すると、この設定値16dpのことになります。

「tools:context=”.HelloAndroidActivity”」は、この設定ファイルを制御するアクティビティクラスと呼ばれるクラスを設定します。

<RelativeLayout・・・></RelativeLayout>タグの中に設定されている<TextView・・・/>タグは、画面に文字列を表示するためのビューの定義です。
「android:layout_width」と「android:layout_height」は、ビューの横幅と縦幅を設定する属性で、「wrap_content」はビューの表示に必要なサイズに調整して表示するための設定値です。

「android:text」は、表示する文字列を設定するための属性です。表示する文字列は文字列を定義するファイル「strings.xml」に設定します。

「strings.xml」は、「res」フォルダの「values」フォルダに自動生成されています。

first_program_16

「strings.xml」ファイルをクリックして開いてみましょう。

リスト 3 strings.xml(初期設定)

<resources>
    <string name="app_name">HelloAndroid</string>
</resources>

「strings.xml」ファイルに、以下のように行を追加してください。

リスト 4 strings.xml(変更後)

<resources>
    <string name="app_name>HelloAndroid</string>

    <string name="hello_world">こんにちは世界!</>
</resources>

「string」タグの「name」属性に設定した「hello_world」に対して、「こんにちは世界!」という文字列を設定しています。

後は、レイアウトとビューの設定ファイルで、この文字列を表示するために、「android:text」属性の値を変更します。

リスト 5 activity_hello_android.xml(変更後)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".HelloAndroidActivity">

     <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

「@string/hello_world」と記述すると、「strings.xml」ファイルの「string」タグの「name」属性に設定した「hello_world」を指定したことになり、「こんにちは世界!」の文字列が表示されるようになります。

これで、画面表示に関連する定義は完了です。


プログラミング

次に画面を制御するプログラミングを行います。

プロジェクト作成時、「Activity Name:」で指定した名前のJavaプログラムファイル「HelloAndroidActivity」が「java」フォルダの「example.android.helloandroid」パッケージ内に生成されています。

first_program_17

このJavaプログラムファイルに記述されているHelloAndroidActivityクラスが、画面の制御を行うアクティビティクラスになります。
クリックしてファイルを開くと、次のプログラムが記述されています。

リスト 6 HelloAndroidActivity.java

package example.android.helloandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class HelloAndroidActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hello_android);
    }
}

自動生成されたクラスは、画面の処理を制御するAppCompatActivityクラスを継承しています。
onCreateメソッドは、アクティビティクラスがインスタンス化される時に自動的に処理されるメソッドです。
画面を初期表示する時に呼ばれますので、レイアウトやビューの設定ファイルを適用するなど、初期表示時に行う処理をこのメソッドに記述します。

このメソッドの中で、スーパークラスAppCompatActivityのonCreateメソッドを呼び出します。
その後に、setContentViewメソッドでレイアウトとビューの設定ファイルを指定します。
最初のアプリケーションでは、このまま実行しますが、画面の処理を追加する場合には、このプログラムを編集することになります。

画面の設定とプログラミングは、これで完了になります。

次は、 アプリケーション実行 です。