カテゴリー:
Compose を用いた Android アプリ開発の基礎 ／ ユニット 1: 初めての Android アプリ
閲覧数:11 配信日:2024-10-16 10:11
このタスクでは、Hello $name! のメッセージを削除して、友人への誕生日祝いのメッセージを追加します。
新しいコンポーズ可能な関数を追加する
MainActivity.kt ファイル
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HappyBirthdayTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
}
}
4.BirthdayCardPreview() 関数の前に、GreetingText() という新しい関数を追加します。
この関数の前に @Composable アノテーションを追加するようにしてください。
これは、Text コンポーザブルを記述する Compose 関数になります。
@Composable
fun GreetingText() {
}
5.コンポーザブルが Modifier パラメータを受け取り、その modifier を最初の子に渡すようにすることをおすすめします。
ここでは、Modifier パラメータを GreetingText() 関数に追加します。
@Composable
fun GreetingText(modifier: Modifier = Modifier) {
}
6.String 型の message パラメータをコンポーズ可能な関数 GreetingText() に追加します。
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
}
7.GreetingText() 関数に Text コンポーザブルを追加し、テキスト メッセージを名前付き引数として渡します。
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
Text(
text = message
)
}
この GreetingText() 関数は UI にテキストを表示します。
そのために、コンポーズ可能な関数 Text() を呼び出します。
関数をプレビューする
このタスクでは、[Design] ペインで GreetingText() 関数をプレビューします。
1.BirthdayCardPreview() 関数内で GreetingText() 関数を呼び出します。
2.String 引数（友人への誕生日祝いのメッセージ）を GreetingText() 関数に渡します。必要に応じて、"Happy Birthday Sam!" などの名前でカスタマイズできます。
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
GreetingText(message = "Happy Birthday Sam!")
}
}
エラーをクリックしてimport
package com.example.happybirthday
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.happybirthday.ui.theme.HappyBirthdayTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
HappyBirthdayTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
}
}
}
}
}
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
Text(
text = message
)
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
HappyBirthdayTheme {
GreetingText(message = "Happy Birthday Sam!")
}
}
3.[Design] ペインが自動的に更新されます。変更内容をプレビューします。