Text Composable（テキスト コンポーザブル）は、画面にテキストを表示するためのUI部品です。
このページでは、このText Composableの基本的な使い方について紹介します。
目次
Text Composableを使うための準備
Text composableを使用するために、androidx.compose.material.Textをインポートします。
import androidx.compose.material.TextText 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, // オーバーフロー時の挙動を設定
)
Comment