カテゴリー:
Compose を用いた Android アプリ開発の基礎 ／ ユニット 1: 初めての Android アプリ
閲覧数:11 配信日:2024-10-23 12:15
プレビューを確認したら、デバイスまたはエミュレータのアプリにコンポーザブルを追加します。
1.MainActivity.kt ファイルで、onCreate() 関数までスクロールします。
2.Surface ブロックから GreetingText() 関数を呼び出します。
3.GreetingText() 関数（誕生日祝いのメッセージと署名）を渡します。
完成した onCreate() 関数は次のコード スニペットのようになります。
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
) {
GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
}
}
}
}
}挨拶メッセージを中央に配置する
1.挨拶メッセージを画面の中央に揃えるには、verticalArrangement というパラメータを追加し、Arrangement.Center に設定します。
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
Column(
verticalArrangement = Arrangement.Center,
modifier = modifier
) {
// ...
}
}
2.列の周囲にパディング 8.dp を追加します。パディング値は 4.dp 単位で使用することをおすすめします。
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
Column(
verticalArrangement = Arrangement.Center,
modifier = modifier.padding(8.dp)
) {
// ...
}
}
3.アプリの外観をさらに改善するには、textAlign を使用して、挨拶メッセージを中央に配置します。
Text(
text = message,
fontSize = 100.sp,
lineHeight = 116.sp,
textAlign = TextAlign.Center
)
上のスクリーンショットでは、textAlign パラメータを指定しているため、挨拶メッセージのみが中央に配置されます。「From Emma」の署名はデフォルトの左揃えで配置されます。
4.署名にパディングを追加して右揃えにします。
Text(
text = from,
fontSize = 36.sp,
modifier = Modifier
.padding(16.dp)
.align(alignment = Alignment.End)
)
おすすめの方法を実践する
修飾子属性と親コンポーザブルの修飾子を渡すことをおすすめします。GreetingText() の修飾子パラメータを次のように更新します。
onCreate()
Surface(
//...
) {
GreetingText(
message = "Happy Birthday Sam!",
from = "From Emma",
modifier = Modifier.padding(8.dp)
)
}
GreetingText()
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
Column(
verticalArrangement = Arrangement.Center,
modifier = modifier
) {
// ...
}
}
エミュレータでアプリをビルドして実行し、最終結果を確認します。