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

Jetpack Compose入門 第1回

コンポーザブル関数の作り方

　前節で、表示は図3のようになり、一通り完成したように思います。本稿の最後にリスト6のカード形式での表示を、独自のコンポーザブルとして再利用できるようなコードにしていきます。

コンポーザブルは関数

　実は、プロジェクトを作成した段階で、MainActivity.ktファイルには、MainActivityの続きに、Greetingという関数が作成されています。これを利用して、MainActivity.ktファイルをリスト7のように書き換えます。その上で、実行すると、図3と同じ画面が表示されます。

［リスト7］MainActivity.kt

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    :
    setContent {
      FirstComposeTheme {
        Greeting(  // (1)
          name = "しんちゃん",  // (2)
          modifier = Modifier.safeDrawingPadding()  // (3)
        )
      }
    }
  }
}

@Composable  // (4)
fun Greeting(name: String, modifier: Modifier = Modifier) {  // (5)
  Text(
    text = "こんにちは、${name}さん!",  // (6)
    color = Color(0xFF1D1B20),
    fontSize = 20.sp,
    fontWeight = FontWeight.Bold,
    modifier = modifier  // (7)
      .fillMaxSize()
        :
  )
}

　コンポーザブルというのは、リスト7の（5）のように、単なる関数です。関数名はなんでもかまいませんが（5）ではあらかじめ記述されていた、Greetingのままにしています。

　ただし、コンポーザブルの関数には（4）のように@Composableアノテーションをつける必要があり、これで、コンポーザブルとして認識されます。

　独自に作成したコンポーザブルを利用する場合は、（1）のようにFirstComposeThemeの引数ラムダ内でコンポーザブルを実行するだけです。

コンポーザブルの引数

　コンポーザブル関数の引数は、その表示に必要なものを渡せばよいです。ただし、Modifierオブジェクトは引数のひとつとして定義しておくほうがよいでしょう。というのは、コンポーザブル関数の呼び出し元で用意されたModifierオブジェクトを再利用できるからです。

　また、（3）のようにあらかじめエッジツーエッジ対応を済ませたModifierオブジェクトを渡すことができ、それに加えて、他の装飾を施すことができるからです。そのため（7）では、引数のmodifierを利用し、リスト5のコードと見比べると、続きのfillMaxSize()からの実行コードとなっています。

　その他の引数は必要なものを定義できます。リスト7の（5）では、第1引数nameを定義し、名前をもらうようにし、これまででは「しんちゃん」で固定表示だった名前部分を可変にしています。リスト7では、呼び出し元の（2）で「しんちゃん」を渡しているので、結果的には同じ表示となっています。

プレビュー表示

　最後に、MainActivity.ktファイル末にあらかじめ記述されているリスト8のコードに関して補足しておきます。

［リスト8］MainActivity.kt

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
  FirstComposeTheme {
    Greeting("Android")
  }
}

　このコードは、@Previewアノテーションの名称通り、プレビュー表示用のコンポーザブルです。showBackground引数をtrueにすることで、背景もプレビュー表示されます。このプレビューコンポーザブルの中で、リスト8の通り、FirstComposeThemeの引数ラムダ内でGreeting関数を実行することで、プレビュー表示されます。

　プレビュー表示は、エディター画面右上のボタンから、スプリット、あるいは、デザインを選択することで、確認できます。図8はスプリットを選択した画面です。

図8：エディター画面でのプレビュー表示

まとめ

　Android Jetpack Composeについて紹介していく本連載の第1回は、いかがでしたでしょうか。

　今回は、Composeの基礎的な内容として、画面に文字列を表示させるコードを紹介しました。とはいえ、Composeの特徴である宣言的UIはほとんど説明できていません。データに応じた表示の変更コードが入っていないからです。次回は、そのような内容を紹介していきます。