カテゴリー:
ユニット 1: 初めての Android アプリ ／ Compose を用いた Android アプリ開発の基礎
閲覧数:43 配信日: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 に設定します。
@Composablefun GreetingText(message: String, from: String, modifier: Modifier = Modifier) { Column( verticalArrangement = Arrangement.Center, modifier = modifier ) { // ... }} |
2.列の周囲にパディング 8.dp を追加します。パディング値は 4.dp 単位で使用することをおすすめします。
@Composablefun 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()
@Composablefun GreetingText(message: String, from: String, modifier: Modifier = Modifier) { Column( verticalArrangement = Arrangement.Center, modifier = modifier ) { // ... }} |
エミュレータでアプリをビルドして実行し、最終結果を確認します。