【Android】Jetpack Compose 入門講座 第４回「Modifierパラメータ」
はじめに
今回は Hello Android! の背景色を変えて余白も追加してみましょう。
Modifierの使い方
背景色を変える
まずは背景色を変えてみましょう。
すでに用意されている modifier パラメータを使用します。
５行目のようにコードを変更します。
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Text(
4 text = "Hello $name!",
5 modifier = modifier.background(Color.Yellow)
6 )
7}
右側のプレビューが変わりましたか？
Modifier は修飾子といって、サイズ・配置・動作・ラベル・入力など幅広い設定に使われます。
レイアウトを作りながら覚えていく方が分かりやすいのでここでは簡単な説明にしますが「 @Composable が付いている関数は modifier パラメータを受け入れること」というルールがあります。
ですので Greeting 関数も modifier パラメータを受け取っています。
この modifier を使ってテキストの設定を書いていきます。
これから新しい Composable 関数も追加していきますが、modifier パラメータはコードを書くときに自動的に追加されます。現時点では「modifier パラメータには設定を書く」と考えておきましょう。
余白をつける
次にテキストの周りに余白をつけてみます。
５行目の最後にコードを追加します。
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Text(
4 text = "Hello $name!",
5 modifier = modifier.background(Color.Yellow).padding(48.dp)
6 )
7}
テキストの周りに余白がつきました。
ここでは padding（パディング）を使ってテキストの周りに 48.dp の余白を追加しました。
文字サイズの単位は .sp でしたが、余白には .dp を使います。
Modifierは順番に注意
「背景色 → 余白」の順番でコードを書きましたが「余白 → 背景色」の順番にするとどうなるでしょうか？
1@Composable
2fun Greeting(name: String, modifier: Modifier = Modifier) {
3 Text(
4 text = "Hello $name!",
5 modifier = modifier.padding(48.dp).background(Color.Yellow)
6 )
7}
背景色が全体に付かずに、文字の部分だけになってしまいました。
このように見た目が変わってしまうことがあるので、書く順番にも注意する必要があります。
順番を気にしなくて良い背景色の付け方も今後紹介します。
次に行うこと
次回は複数のテキストを並べてみましょう。
ここまでのコード
1package com.example.myapplication
2
3import android.os.Bundle
4import androidx.activity.ComponentActivity
5import androidx.activity.compose.setContent
6import androidx.activity.enableEdgeToEdge
7import androidx.compose.foundation.background
8import androidx.compose.foundation.layout.fillMaxSize
9import androidx.compose.foundation.layout.padding
10import androidx.compose.material3.Scaffold
11import androidx.compose.material3.Text
12import androidx.compose.runtime.Composable
13import androidx.compose.ui.Modifier
14import androidx.compose.ui.graphics.Color
15import androidx.compose.ui.tooling.preview.Preview
16import androidx.compose.ui.unit.dp
17import com.example.myapplication.ui.theme.MyApplicationTheme
18
19class MainActivity : ComponentActivity() {
20 override fun onCreate(savedInstanceState: Bundle?) {
21 super.onCreate(savedInstanceState)
22 enableEdgeToEdge()
23 setContent {
24 MyApplicationTheme {
25 Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
26 Greeting(
27 name = "Android",
28 modifier = Modifier.padding(innerPadding)
29 )
30
31 }
32 }
33 }
34 }
35}
36
37@Composable
38fun Greeting(name: String, modifier: Modifier = Modifier) {
39 Text(
40 text = "Hello $name!",
41 modifier = modifier.background(Color.Yellow).padding(48.dp)
42 )
43}
44
45@Preview(showBackground = true)
46@Composable
47fun GreetingPreview() {
48 MyApplicationTheme {
49 Greeting("Android")
50 }
51}
講座の最新情報はこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
