文字列を画面に表示させてみよう。Composeによる画面作成の基本

Jetpack Compose入門 第1回

Composeで画面に文字列を表示

　概論はここまでにして、早速、コードを交えながらComposeの使い方を紹介していきましょう。

本稿のゴール

　本稿では、最終的に図3の画面を作成します。画面の真ん中にカードのように挨拶の文字列が表示されています。単に文字列の表示ですので、データに応じて画面表示が変わるという宣言的UIの本質までは至りませんが、それでもComposeによるAndroidアプリの基礎的な内容は紹介できます。

図3：本稿のゴールに当たる画面

テンプレートコードの読み解き

　Android StudioでEmpty Activityテンプレートでプロジェクトを作成すると、MainActivityというクラスが作成されています。このクラスが、アプリが起動した時に表示される画面を表します。そのコードを抜粋掲載したものが、リスト1です。

［リスト1］MainActivity.kt

class MainActivity : ComponentActivity() {  // (1)
  override fun onCreate(savedInstanceState: Bundle?) {  // (2)
    super.onCreate(savedInstanceState)  // (3)
    enableEdgeToEdge()  // (4)
    setContent {  // (5)
      FirstComposeTheme {  // (6)
        : // (7)
      }
    }
  }
}

　リスト1は、画面を表示させるために最低限必要なコードと理解してください。

　まず、画面を表示するためのクラスは、アクティビティクラスといい、（1）のようにComponentActivityを継承して作成します。MainActivityは、このテンプレートでアプリの起動時に利用されるアクティビティとして設定されています。MainActivityという名前自体に特別な意味があるわけではありません。

　そのアクティビティクラスでは、まず（2）のように、onCreate()メソッドをオーバーライドします。このメソッドは、アプリが起動した際にまず呼び出されるメソッドであるため（3）のように、親クラスのonCreate()を実行した上で、初期処理を記述します。

　それらの初期処理のうち、定型コードとして記述しておかなければならないのが（4）と（5）です。（4）のenableEdgeToEdge()の実行は、ステータスバーなどのシステムバーを透明にして画面を広く利用するための設定コードであり、これを、このメソッド名の通り、エッジツーエッジといいます。

　そして、一番大切なのが（5）のsetContent()メソッドの実行です。このメソッドの引数ラムダ式の中で、画面表示に必要なコードを記述することで、画面が表示されるようになります。それが（7）のコードです。

　ただし、画面にアプリのテーマを適用させるためには（6）のように（7）のコードをテーマを表すクラス（のインスタンスの生成コード）でラップする必要があります。このクラスは、通常、プロジェクト名+Themeという名称で自動生成されています。リスト1のサンプルは、FirstComposeというプロジェクト名で作成しているので、FirstComposeThemeというクラス名になっています。

［NOTE］（7）にもともと記述されていたコード

　プロジェクト作成直後に、リスト1の（7）に記述されていたコードは、Composeのスキャフォールドという仕組みを利用するためのコードです。こちらは、本稿の範囲を超えますので、割愛することをご了承ください。

文字列の表示はText()関数

　テンプレートコードの解説はこのあたりにしておいて、実際にコーディングしてみましょう。（7）の部分にあらかじめ記述されていたコードを、丸々リスト2のように書き換えてアプリを実行してみましょう。すると、図4のように表示されます。

［リスト2］MainActivity.kt

FirstComposeTheme {
  Text("こんにちは、しんちゃんさん!")
}

図4：「こんにちは、しんちゃんさん!」が表示された画面

　画面に文字列を表示させるには、Text()関数を実行し、その引数として表示する文字列を渡します。この引数の正式名称は、textですので、Kotlinの引数名を指定できる文法に従い、次のように記述するのが一般的です。

Text(text = "こんにちは、しんちゃんさん!")

　なお、このように画面のパーツを作成するための関数のこと、コンポーザブル（Composable）といいます。のちの節で、コンポーザブルを自作する方法を紹介します。