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

Jetpack Compose入門 第1回

表示の装飾を行う

　無事、表示されるようになったとはいえ、画面の時刻表示などの部分、つまり、透明になったステータスバーと重なってしまっています。これがエッジツーエッジの効果ではあるのですが、重なるのは問題です。そこで、文字列表示の上部にパディングを設定し、重ならないようにします。

表示の装飾を行うmodifier引数

　まず、コードを変更して、表示がステータスバーと重ならないようにしてみましょう。これは、リスト3のコードとなります。このコードに変更すると、表示は図5のようになって、無事ステータスバーと重ならなくなります。

［リスト3］MainActivity.kt

FirstComposeTheme {
  Text(
    text = "こんにちは、しんちゃんさん!",
    modifier = Modifier.safeDrawingPadding()  // (1)
  )
}

図5：表示がステータスバーと重ならなくなった画面

　リストの3ポイントは、追記した（1）です。Text()関数には、modifier引数が定義されており、この引数にModifierオブジェクトを渡すことで、表示の装飾を行ってくれます。このModifierオブジェクトは、Modifier.で呼び出される拡張関数を実行することで生成でき、その関数の内容の装飾が施されます。

　そのうち、（1）で実行しているsafeDrawingPadding()によって生成されるModifierオブジェクトは、まさにエッジツーエッジ対応のものであり、表示する端末のステータスバー、ナビゲーションバー、ソフトウェアキーボードのサイズを自動計算し、それに合わせて余白を自動調整してくれるものです。

モディファイヤーチェーン

　Modifierオブジェクトの生成コードは、.（ドット）で繋ぐことができます。いわゆるメソッドチェーンですが、モディファイヤー関数のチェーンですので、モディファイヤーチェーンといえます。例えば、リスト4の（1）のようなコードです。このコードに変更すると、表示は図6のようになって、文字列表示がセンタリングされます。

［リスト4］MainActivity.kt

FirstComposeTheme {
  Text(
    text = "こんにちは、しんちゃんさん!",
    modifier = Modifier.safeDrawingPadding().fillMaxSize().wrapContentSize(Alignment.Center)  // (1)
  )
}

図6：表示がセンタリングされた画面

　リスト4の（1）で追加したfillMaxSize()は、その名称通り、上下左右に表示領域を最大限拡張するものです。その後、wrapContentSize()を実行することで、表示領域の中でText自身のサイズを保ちながら配置するようになります。その配置位置を引数として渡します。

　リスト4では、Alignment.Centerを渡しているので、表示領域の中で上下左右にセンタリングされるようになり、結果、図6の表示となります。

モディファイヤーチェーンは順序が大切

　ここで注意しなければならないのは、モディファイヤーチェーンは、順序が大切であるという点です。チェーンした順に適用されるため、順序を間違うと想定通りの表示になりません。

　例えば、リスト4の（1）を、次のようにコーディングしたとすると、図5と表示が変わりません。順序によって結果が変化することを念頭においておいてください。

Modifier.safeDrawingPadding().wrapContentSize(Alignment.Center).fillMaxSize()

その他のモディファイヤー関数

　モディファイヤー関数は、前項で紹介したものだけではなく、かなりの数があります。当然ですが全ては紹介できませんので、ここでは、図3の画面の完成に必要なものを紹介していきます。

　それが、リスト5のコードです。それぞれのモディファイヤー関数、およびその引数の意味は、コード中コメントを参照してください。このコードに変更すると、表示は図7のようになって、カードらしい表示になります。

［リスト5］MainActivity.kt

FirstComposeTheme {
  Text(
    text = "こんにちは、しんちゃんさん!",
     modifier = Modifier
      .safeDrawingPadding()
      .fillMaxSize()
      .wrapContentSize(Alignment.Center)
      .background(  // 背景の設定関数。
        color = Color(0xFFEADDFF),  // 背景色を指定する引数。
        // 背景の角丸を指定する引数。12.dpという引数はコーナー半径の指定。
        shape = RoundedCornerShape(12.dp)
      )
      .border(  // 境界線の設定関数。
        width = 1.dp,  // 境界線の幅。
        color = Color(0xFF6750A4),  // 境界線の色指定引数。
        shape = RoundedCornerShape(12.dp)// 境界線の角丸を指定する引数。
      )
      .padding(24.dp)  // パディングの設定。
  )
}

図7：カードらしい表示になった画面

　2点補足しておきます。まず、リスト5中のパディングや角丸半径など、数値指定をする場合、Androidではdpという単位を利用します。これは密度非依存ピクセル（Density-Independent Pixels）という単位であり、その名の通り、画面密度の違いを自動計算し、見た目が同じサイズとなるようにしてくれる単位となっています。

　この単位をComposeで利用する場合は、リスト5内のコードのように、数値リテラル.dpというコードとなります。

　また、色指定は、Colorクラスのインスタンスを渡します。インスタンス生成時には、ARGBの16進数表現で色を表現した値を渡します。

文字そのものの装飾は引数で行う

　図3と図7を見比べると、文字サイズなど、文字そのものの装飾が違います。こちらは、modifier引数で指定するのではなく、Text()関数の別の引数で指定します。そういったコードを追加すると、リスト6のようになります。こちらも、それぞれの引数の働きは、コード中のコメントを参照してください。このコードに変更すると、表示は図3と同じになります。

［リスト6］MainActivity.kt

FirstComposeTheme {
  Text(
    text = "こんにちは、しんちゃんさん!",
    color = Color(0xFF1D1B20),  // 文字色の設定。
    fontSize = 20.sp,  // 文字サイズの設定。文字サイズの単位はsp!
    fontWeight = FontWeight.Bold,  // 字体の設定。
    modifier = Modifier
      :
  )
}