Text
コンポーザブルには、コンテンツのスタイル設定を行うためのオプションのパラメータが複数用意されています。以下に、テキストに関する最も一般的なユースケースに対応するパラメータを示します。
Text
のすべてのパラメータについては、Compose テキストをご覧ください。
ソースコードをご覧ください。
これらのパラメータを設定すると、テキスト値全体にスタイルが適用されます。同じ行または行の中に複数のスタイルを適用する必要がある場合、 詳しくは、インラインの スタイル。
一般的なテキストのスタイル設定
以下のセクションでは、テキストのスタイルを設定する一般的な方法について説明します。
テキストの色を変更する
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
文字サイズを変更する
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
テキストを斜体にする
テキストを斜体にするには fontStyle
パラメータを使用します(または別の FontStyle
を設定します)。
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
テキストを太字にする
テキストを太字にするには、fontWeight
パラメータを使用します(または別の FontWeight
を設定します)。
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
シャドウを追加
style
パラメータを使用すると、TextStyle
タイプのオブジェクトを設定できます。
複数のパラメータ(シャドウなど)を構成できます。
Shadow
は、シャドウの色、オフセット、Text
に対するシャドウの相対位置、ぼかしの程度を表すぼかし半径を受け取ります。
@Composable fun TextShadow() { val offset = Offset(5.0f, 10.0f) Text( text = "Hello world!", style = TextStyle( fontSize = 24.sp, shadow = Shadow( color = Color.Blue, offset = offset, blurRadius = 3f ) ) ) }
テキストに複数のスタイルを追加する
同じ Text
内で異なるスタイルを設定するには
コンポーザブルの場合は、AnnotatedString
を使用します。
任意のアノテーションのスタイルでアノテーションを付けられる文字列。
AnnotatedString
は、以下を含むデータクラスです。
Text
値SpanStyleRange
のList
(テキスト値内の位置範囲を使用したインライン スタイル設定と同等です)ParagraphStyleRange
のList
(テキストの配置、テキスト方向、行の高さ、テキストのインデント スタイルを指定します)
TextStyle
は、
Text
コンポーザブルですが、SpanStyle
は
および ParagraphStyle
AnnotatedString
で使用します。複数のスタイルについて詳しくは、
段落で複数のスタイルを追加するをご覧ください。
AnnotatedString
にはタイプセーフ
ビルダー
buildAnnotatedString
を簡単に作成できるようになりました。
@Composable fun MultipleStylesInText() { Text( buildAnnotatedString { withStyle(style = SpanStyle(color = Color.Blue)) { append("H") } append("ello ") withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) { append("W") } append("orld") } ) }
Brush
で高度なスタイル設定を有効にする
より高度なテキスト スタイル設定を有効にするには、次のように Brush
API を使用します。
TextStyle
、SpanStyle
。通常は
TextStyle
または SpanStyle
を使用する代わりに、Brush
も使用できるようになりました。
テキストのスタイル設定にブラシを使用する
TextStyle
内で組み込みブラシを使用してテキストを設定します。たとえば、
テキストに linearGradient
ブラシを次のように設定できます。
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
このカラーパターンやスタイルに限定されません。しばらく
簡単な例を提示していますが、組み込みの
ブラシや SolidColor
を使ってテキストを補正できます。
統合
Brush
は TextStyle
と SpanStyle
の両方と一緒に使用できるため、
TextField
および buildAnnotatedString
はシームレスに統合されます。
TextField
内でブラシ API を使用する方法について詳しくは、以下をご覧ください。
Brush API による入力のスタイルの設定
SpanStyle
を使用した追加のスタイル設定
テキストの範囲にブラシを適用する
テキストの一部にのみブラシを適用するには、
buildAnnotatedString
と SpanStyle
API、およびブラシ
勾配を選択できます
Text( text = buildAnnotatedString { append("Do not allow people to dim your shine\n") withStyle( SpanStyle( brush = Brush.linearGradient( colors = rainbowColors ) ) ) { append("because they are blinded.") } append("\nTell them to put some sunglasses on.") } )
テキストスパンの不透明度
特定のテキストスパンの不透明度を調整するには、SpanStyle
の
省略可能な alpha
パラメータ。同じブラシを
両方の部分に適用し、対応するスパンの alpha パラメータを変更する必要があります。
コードサンプルでは、テキストの最初のスパンが半透明度で表示されます
(alpha =.5f
)、2 番目の要素は完全な不透明度(alpha = 1f
)で表示されます。
val brush = Brush.linearGradient(colors = rainbowColors) buildAnnotatedString { withStyle( SpanStyle( brush = brush, alpha = .5f ) ) { append("Text in ") } withStyle( SpanStyle( brush = brush, alpha = 1f ) ) { append("Compose ❤️") } }
参考情報
その他のカスタマイズの例については、Compose テキストのブラッシュアップをご覧ください
塗り絵に関するブログ投稿。Google Cloud のセキュリティと
Brush
と Animations API の統合について詳しくは、アニメーションによるブラシのテキストの色付けをご覧ください。
(Compose 内)をご覧ください。
テキストにマーキー効果を適用する
basicMarquee
修飾子は、任意のコンポーザブルに適用して、
アニメーション効果を生成します。マーキー効果は、コンテンツが
広すぎるため利用可能な制約に収まりませんbasicMarquee
にはデフォルトで
特定の設定(速度や初期遅延など)が設定されたときに、
パラメータを変更して効果をカスタマイズします。
次のスニペットは、Text
コンポーザブルに基本的なマーキー効果を実装しています。
@OptIn(ExperimentalFoundationApi::class) @Composable fun BasicMarqueeSample() { // Marquee only animates when the content doesn't fit in the max width. Column(Modifier.width(400.dp)) { Text( "Learn about why it's great to use Jetpack Compose", modifier = Modifier.basicMarquee(), fontSize = 50.sp ) } }
図 6. テキストに適用される basicMarquee
修飾子。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- 段落スタイル
- Compose のマテリアル デザイン 2
- グラフィック修飾子