TextとColumnの基本
コンテンツを表示して縦に並べます。
「TextとColumnの基本」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
Text Composable
Compose で表示できる最も基本的なものはテキストです。Text composable は文字列を画面に描画します。
表示したい文字列を最初の引数として渡します。これだけで画面に文字を表示できます。
@Composable
fun Hello() {
Text("Hello, Android!")
}テキストのスタイル設定
Text は、見た目を変更するパラメーターを受け取ります。fontSize、color、fontWeight を設定できます。
サイズには sp 単位を使用します。これはユーザーのフォント設定に合わせて拡大縮小されます。そのため、誰にとっても読みやすいアプリになります。
Text(
"Big Title",
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)レイアウトが必要な理由
Text を続けて2回呼び出すと、2つのテキストが同じ位置に重なって表示されます。composable は自動的には配置されません。
要素を順番に配置するには、子要素を整理するレイアウト composable が必要です。縦方向に積み重ねる場合に最もよく使うのが Column です。
Column Composable
Column は子要素を上下に並べ、縦方向に配置します。子 composable は末尾のラムダブロック内に記述します。
波かっこの中に記述した各 composable が、記述した順番で縦方向のスタックの1行になります。
@Composable
fun TwoLines() {
Column {
Text("First line")
Text("Second line")
}
}Column では順番が重要
Column 内の子要素は、記述した順番どおりに上から下へ表示されます。コード内の行を上へ移動すると、画面上でも上へ移動します。
このためレイアウトは予測しやすく、コードを上から下へ読めば、画面の上から下の見た目が分かります。
Column {
Text("Title")
Text("Subtitle")
Text("Body text")
}縦方向の配置
Column では、verticalArrangement を使って子要素間の間隔を制御できます。たとえば、Arrangement.spacedBy は均等な間隔を追加します。
これは各子要素に手作業で間隔を追加するよりもすっきりしており、レイアウトの一貫性も保てます。
Column(
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Text("One")
Text("Two")
}水平方向の配置
デフォルトでは、Column は子要素を開始位置（左）に揃えます。horizontalAlignment を使うと、中央揃えや末尾揃えにできます。
Alignment.CenterHorizontally に設定すると、すべての子要素が Column の幅の中央に配置されます。
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Centered")
Text("Also centered")
}Rowに会いましょう
Columnは縦方向に積み重ねます。一方、兄弟であるRowは子要素を横方向に並べます。考え方は同じですが、方向が異なります。
RowとColumnを組み合わせて、グリッドやカードを作成します。今は、Columnは下方向、Rowは横方向と覚えておきましょう。
Row {
Text("Left")
Text("Right")
}レイアウトのネスト
レイアウトの中に別のレイアウトを入れることができます。Columnの中にRowを配置すると、より複雑なデザインを作成できます。
ここでは、Columnでタイトルを表示し、その下に2つのテキストを含むRowを配置します。複雑な画面は、シンプルな部品をネストして作成します。
Column {
Text("Score")
Row {
Text("Home")
Text("Away")
}
}項目間に空間を追加する
2つのコンポーザブルの間に一定の間隔を追加するには、Spacerを挿入します。これは空のコンポーザブルで、空間を確保するだけのものです。
modifierを使って高さを指定すると、次の項目を下へ押し下げます。modifierについては、次のレッスンで詳しく説明します。
Column {
Text("Top")
Spacer(modifier = Modifier.height(16.dp))
Text("Bottom")
}組み合わせる
TextとColumnを使えば、すでにシンプルなラベル付き画面を作成できます。見出しと、いくつかの詳細行を積み重ねてみましょう。
この小さなパターンは、Composeで作成するほぼすべての画面の基礎になります。
@Composable
fun InfoBlock() {
Column {
Text("Name: Ada")
Text("Role: Engineer")
}
}理解度チェック
レイアウトの方向について、理解度を確認しましょう。
まとめ
Textで文字列を表示し、fontSizeとfontWeightでスタイルを設定する方法を学びました。Columnはコードの順序に従って子要素を縦方向に積み重ね、Rowは子要素を横方向に並べます。
verticalArrangementやSpacerで間隔を調整し、horizontalAlignmentで子要素を揃えることができます。RowとColumnをネストすると、より豊かなレイアウトを構築できます。次は、アプリを実行せずにこれらの画面をプレビューします。
よくある質問
「TextとColumnの基本」レッスンは無料ですか？
はい。「TextとColumnの基本」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「TextとColumnの基本」で何を学びますか？
コンテンツを表示して縦に並べます。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「TextとColumnの基本」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Composableとは
- TextとColumnの基本
- UIをプレビューする
- プロフィールカードを構築する