Android Kotlin基礎講座 01.2: 基本的なアプリの構造

タスク：アクティビティとレイアウトファイルについて

以前の記事ではjavaとresディレクトリーを含めたプロジェクトの主要な部分について学習しました。このタスクではMainActivityというKotlinファイルとactivity_main.xmlというレイアウトファイルというアプリを構成する最も重要といってもよい二つのファイルに焦点を当てていきます。

ステップ１：MainActivityについて知る

MainActivityは数あるアクティビティのうちの一つです。アクティビティはAndroidアプリのUI(ボタンやインプットボックスなど)を表示したり、ユーザーからのインプットを受け取ったりするアプリの核をなすファイルです。アプリが起動したとき、アプリはAndroidManifest.xmlファイルに記されたアクティビティを呼び出します。

多くのプログラミング言語ではプログラムの起動時に最初に実行されるmainメソッドというメソッドを持ちます。しかしAndroidアプリではmainメソッドは存在しません。その代わりに、AndroidManifest.xmlによってユーザーがアプリを起動すると同時にMainActivityファイルが起動するように設定されています。アクティビティを起動するために、Android OSはmanifestファイルの中のアプリの環境をセットアップしたり、MainActivityを構成したりするために必要な情報を読み込みます。その後、MainActivityによって更なるアプリのセットアップが行われていきます。

それぞれのアクティビティは関連したレイアウトファイルを持っています。アクティビティとレイアウトはレイアウトインフレーションと呼ばれるプロセスによって接続されます。アクティビティが起動したときに、XMLレイアウトファイルに定義されたビューがメモリー上でKotlinビューオブジェクトと呼ばれるデータに変わります。
このレイアウトインフレーションによって、アクティビティはそれらのオブジェクトを画面上に描写したり、動的に変更したりできるようになります。

Android Studio上で、File>New>New Projectを選択して新しいプロジェクトを作成してください。Empty activityを選択してNextをクリックしてください。
名前はDiceRollerとし、それ以外の値はそのままで構いません。ただし”Use AndroidX Artifacts”にはチェックが入っていることを確認してください。Finishをクリックしてください。

Project>Androidの中のjava>com.example.android.dicerollerを展開してください。MainActivityをダブルクリックしてください。コードエディターがMainActivityのコードを表示します。

packageとimportの下の記述がMainActivityのクラス宣言になります。MainActivityクラスはAppCompatActivityというクラスを継承しています。

class MainActivity : AppCompatActivity() { ...

AppCompatActivityはActivityというクラスのサブクラスです。Activityクラスは以前のAndroidバージョンに対する下位互換性をサポートしています。開発するアプリをできるだけ多くのユーザーのデバイスで利用できるようにするために、常にAppCompatActivityクラスを利用します。

onCreate()メソッドを確認してください。アクティビティがオブジェクトを初期化するためにコンストラクターを使っていません。かわりに、事前に用意された一連のメソッド(ライフサイクルメソッドとよばれるもの)がアクティビティのセットアップのために呼び出されています。それらのライフサイクルメソッドのひとつがonCreate()メソッドになります。onCreate()メソッドは自身が開発するアプリのなかでオーバーライドしていきます。ライフサイクルメソッドについては後の記事でより詳しく学習します。

onCreate()メソッドの中で、どのレイアウトがアクティビティと紐づくものなのかを指定します。そしてレイアウトをインフレートします。
setContentView()メソッドがそれらを両方ともこなしてくれています。

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

setContentView()メソッドはR.layout.activity_mainという値(実際にはIntegerという数値)を使ってレイアウトを言及しています。Rクラスはアプリをビルドした際に作られます。Rクラスにはresディレクトリーのコンテンツを含めたすべてのアセットが含まれています。

このケースでは、R.layout.activity_mainはRクラスを参照し、layoutフォルダーのactivity_main.xmlというレイアウトファイルを指定しています。(ただしxmlなどの拡張子が含まれていないことに注意してください）
上記のような方法でRクラスの中の様々なリソース(画像、string、レイアウトファイルの中の要素など）を参照することになります。

ステップ2：アプリのレイアウトファイルについて知る

アプリ内のすべてのアクティビティはそれに紐づいたレイアウトファイルをres/layoutディレクトリーの中に持っています。レイアウトファイルはxmlという拡張子をもつXMLファイルのことで、アクティビティが実際にどのように表示されるのかを表しています。レイアウトファイルはビューとビューの位置情報を定義することによって、アクティビティの見た目を表しています。

ビューとはViewクラスを継承したテキストや画像、ボタンなどのことです。TextViewやButton、ImageView、CheckBoxなどの多くのビューが存在します。

このタスクではアプリのレイアウトファイルについて確認しながら、変更を加えていきます。

Project>Androidの中のres>layoutを展開してください。activity_main.xmlをダブルクリックしてください。レイアウトデザインエディターが開きます。Android Studioは視覚的にレイアウトを編集しながらプレビュー表示できるエディターを備えています。このデザインエディターについては後の記事でより詳しく学習します。
レイアウトファイルをXMLとして見るために、ウィンドウ下部にあるTextタブをクリックしてください。

レイアウトエディター上の存在するXMLコードを一度すべて削除してください。新規プロジェクトのデフォルトレイアウトはAndroid Studioデザインエディターにで作業していく際には最適です。この講座ではスクラッチ（全く何もない状態からコードを書いていくこと）から新しいレイアウトを作成していくためにXMLを編集しながら作業していきます。
下記のコードをXMLにコピー＆ペーストしてください。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

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

</LinearLayout>

それではコードを確認していきましょう。

レイアウトの最も上の階層、ルート要素は<LinearLayout>です。LinearLayoutビューはViewGroup(ビューグループ）のひとつです。ビューグループは他のビューを保持するためのコンテナのような役割を果たしており、ビューの画面上の位置を指定する役割もあります。

レイアウトに追加した全てのビューとビューグループはビューヒエラルキーの中に整理されています。ルートビューはほかのビューやビューグループを包括することができ、包括されたビューグループはさらにほかのビューやビューグループを包括することができます。アプリの起動時にXMLレイアウトファイルのビューヒエラルキーはインフレートされ、オブジェクトのヒエラルキーになります。今回の場合はルートビューグループはlinear layoutで、その配下にあるビューを子としてもち、直線上(垂直または水平上）に順番に配置する形になっています。

新規プロジェクトを作成した際にデフォルトではConstraintLayoutがルートになっています。ConstraintLayoutはデザインエディターで調整をするのに適したビューです。今回作成するアプリではLinearLayoutビューグループを使っていますが、これはConstraintLayoutよりシンプルなつくりになっています。他のビューグループやLinearLayoutについては次の講座でより詳しく学習します。
LinearLayoutタグの中にandroid:layout_widthという属性があります。このLinearLayoutのwidth(幅)はmatch parentに設定されており、これは親のビューと同じ幅であることを意味しています。ここではLinearLayout自身が最上位(ルート)にあるので、幅は端末の画面の幅をフルで使うようになります。
次にandroid:layout_height属性を確認してください。wrap_contentに設定されています。この属性はLinearLayoutの高さをLinearLayoutが含んでいる子の高さの合計に合わせるようにするということを示しています。ここでは子にTextViewしか含んでいないため、TextViewの高さに合わせるように設定されます。
次に<TextView>要素を見てください。TextViewは名前の通りテキストを表示するビューで、今回作成するDiceRollerアプリでは唯一のビジュアル要素です。android:text属性には実際に表示するstringが設定されています。ここでは”Hello World!”がそれにあたります。
<TextView>要素の中のandroid:layout_widthとandroid:layout_height属性が両方ともwrap_contentになっています。TextViewのコンテンツとは表示するテキスト自身であるため、幅と高さはテキストの表示に求められる最小限に設定されます。