テキストをスタイリングする
フォント、サイズ、太さ、色を設定します。
「テキストをスタイリングする」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
テキストにスタイルを設定する理由
Jetpack Composeでは、Textコンポーザブルによって画面に文字を表示します。デフォルトではシンプルな見た目ですが、サイズ、色、太さを変更できます。
スタイルを設定すると、ユーザーがアプリを読みやすくなります。タイトルは本文よりも大きく、太く表示するのがよいでしょう。
Textには追加のパラメータを渡してスタイルを設定します。
Text("Hello Compose")テキストを大きくする
fontSizeパラメータで、テキストの大きさを指定します。サイズにはsp単位を使います。spはユーザーのフォント設定に応じて拡大縮小されます。
spを使うには、24.spのように数値の後ろに.spを付けます。
Text(
text = "Big Title",
fontSize = 24.sp
)太さとWeight
fontWeightを使うと、テキストを太くしたり細くしたりできます。最もよく使う値はFontWeight.Boldです。
その他に、FontWeight.Light、FontWeight.Normal、FontWeight.SemiBoldがあります。
Text(
text = "Important",
fontWeight = FontWeight.Bold
)斜体のテキスト
fontStyleパラメータで、テキストを斜体にできます。斜体にするにはFontStyle.Italicを設定します。
斜体は、引用や強調に便利です。
Text(
text = "A quote",
fontStyle = FontStyle.Italic
)テキストに色を付ける
colorパラメータで、テキストの色を変更します。Color.RedやColor.BlueなどのColor値を渡せます。
テキストを読みやすく保てるよう、コントラストの高い色を選びましょう。
Text(
text = "Warning",
color = Color.Red
)テキストを揃える
textAlignを使うと、テキストをその領域内の好きな位置に配置できます。よく使う値は、TextAlign.Center、TextAlign.Start、TextAlign.Endです。
Textが幅全体を使っている場合は、中央揃えが最も効果的です。
Text(
text = "Centered",
textAlign = TextAlign.Center
)文字間隔
letterSpacingパラメータで、文字と文字の間に間隔を追加します。単位にはspを使います。
少し間隔を広げると、見出しに開放感が生まれ、現代的な印象になります。
Text(
text = "SPACED",
letterSpacing = 2.sp
)スタイルを組み合わせる
複数のパラメータを同時に組み合わせることができます。太く、大きく、青いタイトルも、複数の値を指定した1回のText呼び出しで作成できます。
Composeは各パラメータを読み取り、すべてを組み合わせて適用します。
Text(
text = "Welcome",
fontSize = 28.sp,
fontWeight = FontWeight.Bold,
color = Color.Blue
)TextStyleを使う
複数のパラメータを個別に指定する代わりに、TextStyleオブジェクトにまとめて、styleパラメータに渡すことができます。
同じ見た目を複数の場所で再利用するときに便利です。
Text(
text = "Styled",
style = TextStyle(
fontSize = 20.sp,
color = Color.Magenta
)
)長いテキストを扱う
長いテキストは領域からはみ出すことがあります。maxLinesで行数を制限し、テキストが切り取られたときはoverflowで省略記号を表示します。
TextOverflow.Ellipsisを使うと、非表示のテキストの末尾に...が追加されます。
Text(
text = "A very long sentence...",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)下線と装飾
textDecorationパラメータで、UnderlineやLineThroughを追加できます。
下線はリンクを示すことが多く、取り消し線は削除された価格や古い価格を示すのに使えます。
Text(
text = "Link",
textDecoration = TextDecoration.Underline
)理解度チェック
Textのスタイル設定について学んだことを確認しましょう。
まとめ
fontSize（sp単位）、太字にするfontWeight、斜体にするfontStyle、色を指定するcolorを使って、Textのスタイルを設定する方法を学びました。
テキストの配置、文字間隔、装飾を設定したり、すべてをTextStyleにまとめたりすることもできます。
次は、タップに反応するボタンを作成します。
よくある質問
「テキストをスタイリングする」レッスンは無料ですか？
はい。「テキストをスタイリングする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「テキストをスタイリングする」で何を学びますか？
フォント、サイズ、太さ、色を設定します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「テキストをスタイリングする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テキストをスタイリングする
- ボタンとクリック
- Paddingで余白を付ける
- 色とMaterialTheme