カテゴリー:
Compose を用いた Android アプリ開発の基礎 ／ ユニット 1: 初めての Android アプリ
閲覧数:12 配信日:2024-10-21 22:29
UI 階層
UI 階層は包含を基本としています。つまり、1 つのコンポーネントに 1 つ以上のコンポーネントを含めることができ、「親」と「子」という用語が使用されることもあります。この場合、親 UI 要素が子 UI 要素を含み、その子 UI 要素がさらに子 UI 要素を含むことができます。このセクションでは、親 UI 要素として機能できる、Column、Row、Box のコンポーザブルについて学習します。
Compose には、基本的な標準レイアウト要素として、Column、Row、Box の 3 つのコンポーザブルがあります。
Column、Row、Box は、コンポーズ可能なコンテンツを引数として受け取るコンポーズ可能な関数であり、これらのレイアウト要素内にアイテムを配置できます。たとえば、Row コンポーザブル内の子要素は、それぞれ横方向に並べて配置されます。
// Don't copy.
Row {
Text("First Column")
Text("Second Column")
}
後置ラムダ構文
前のコード スニペットでは、コンポーズ可能な関数 Row で、かっこの代わりに中かっこが使用されています。
これを後置ラムダ構文と呼びます。
ここでは、一般的に使用される Compose 構文の使い方を学びます。
Kotlin には、最後のパラメータが関数の場合に、関数をパラメータとして渡すための特別な構文が用意されています。
パラメータとして関数を渡す場合は、後置ラムダ構文を使用できます。
関数をかっこで囲む代わりに、かっこの外側で中かっこに入れることができます。
これは Compose で推奨される一般的な方法であるため、コードの見た目に慣れておく必要があります。
たとえば、コンポーズ可能な関数 Row() の最後のパラメータは content パラメータです。
これは子 UI 要素を記述する関数です。
3 つのテキスト要素を含む行を作成する場合、このコードは機能しますが、後置ラムダに名前付きパラメータを使用するのは非常に面倒です。
Row(
content = {
Text("Some text")
Text("Some more text")
Text("Last text")
}
)
content パラメータは、関数のシグネチャの最後のパラメータであり、値をラムダ式として渡します。
このため、次のように content パラメータとかっこを削除できます。
Row {
Text("Some text")
Text("Some more text")
Text("Last text")
}テキスト要素を行に配置する
このタスクでは、重複を避けるため、アプリのテキスト要素を行に配置します。
1.MainActivity.kt ファイルで、GreetingText() 関数までスクロールします。
2.テキスト要素の周囲に Row コンポーザブルを追加して、2 つのテキスト要素を含む行を表示します。2 つの Text コンポーザブルを選択し、電球をクリックします。[Surround with widget] > [Surround with Row] を選択します。
この関数は次のコード スニペットのようになります。
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
Row {
Text(
text = message,
fontSize = 100.sp,
lineHeight = 116.sp,
)
Text(
text = from,
fontSize = 36.sp
)
}
}
3.Android Studio が Row 関数を自動的にインポートします。
一番上までスクロールしてインポート セクションを確認します。import androidx.compose.foundation.layout.Row が追加されているはずです。
4.[Design] ペインで、更新されたプレビューを確認します。
誕生日メッセージのフォントサイズを一時的に 30.sp に変更します。
重複がなくなり、プレビューが見やすくなります。
しかし、署名のための十分なスペースがないため、これは望ましくありません。
次のタスクでは、テキスト要素を列に配置して、この問題を解決します。
テキスト要素を列で配置する
このタスクでは、GreetingText() 関数を変更して、テキスト要素を列で配置します。
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
Column {
Text(
text = message,
fontSize = 100.sp,
lineHeight = 116.sp,
)
Text(
text = from,
fontSize = 36.sp
)
}
}
Android Studio によって自動的にインポートされたパッケージに注意してください。
import androidx.compose.foundation.layout.Column
コンポーザブルの子要素に修飾子パラメータを渡す必要があることを思い出してください。つまり、Column コンポーザブルに修飾子パラメータを渡す必要があります。
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
Column(modifier = modifier) {
Text(
text = message,
fontSize = 100.sp,
lineHeight = 116.sp,
)
Text(
text = from,
fontSize = 36.sp
)
}
}