MENU

【Jetpack Compose】Text Composableの使い方 | テキストを表示する

記事内に商品プロモーションが含まれる場合があります

Text Composable(テキスト コンポーザブル)は、画面にテキストを表示するためのUI部品です。

このページでは、このText Composableの基本的な使い方について紹介します。

目次

Text Composableを使うための準備

Text composableを使用するために、androidx.compose.material.Textをインポートします。

import androidx.compose.material.Text

Text Composableの使い方

Text(
    text = "表示するテキスト",
)

Text()に表示したい文字列を「text = “Hello World”」のようにを記述することで、画面にテキストを表示することができます。

文字列はダブルクオーテーション(”)で囲みます。

フォントサイズを変更する

Text(
    text = "表示するテキスト",
    fontSize = 70.sp // フォントサイズ
)

フォントサイズを変更するには引数 fontSize にサイズを指定します。

SP(Scaled Pixels)はフォントサイズの単位です。テキストのサイズを設定するときは基本的にspを使います。

spはユーザーのデバイスのテキストサイズの設定に基づいて変化します。つまり、ユーザーがデバイスの設定でテキストサイズを変更すると、spで指定されたテキストのサイズもそれに応じて変化します。

テキストの色を変更する

引数color に色を設定します。

import androidx.compose.ui.graphics.Color

Text(
    text = "田中 太郎",
    color = Color.Gray // 色を設定
)

テキストの太さを変える

引数fontWeight を設定します。

Text(
    text = "田中 太郎",
    fontSize = 16.sp,
    color = Color.Gray,
    fontWeight = FontWeight.Bold, // 太字にする
)

テキストの位置を調整する

テキストの位置(左寄せ、右寄せ、中央寄せ)を指定したい場合は、引数textAlignを設定します。

Text(
    text = "田中 太郎",
    fontSize = 16.sp,
    color = Color.Gray,
    fontWeight = FontWeight.Bold, 
    textAlign = TextAlign.Center, // テキストを中央寄せにする
)

テキストの行数を制限する

引数maxLinesに最大表示行数を設定します。

Text(
    text = "あいうえおかきくけこ",
    fontSize = 16.sp,
    color = Color.Gray,
    fontWeight = FontWeight.Bold,
    maxLines = 1, // 最大行数を設定
)

「きくけこ」が画面サイズをオーバーして表示されなくなりました。

テキストがオーバーフローした場合に省略記号を表示するようにしたい場合は、引数overflowに次のように指定します。

Text(
    text = "あいうえおかきくけこ",
    fontSize = 16.sp,
    color = Color.Gray,
    fontWeight = FontWeight.Bold,
    maxLines = 1, // 最大行数を設定
    overflow = TextOverflow.Ellipsis, // オーバーフロー時の挙動を設定
)
Share
  • URLをコピーしました!

Comment

コメントする

目次