Overview
公式より引用
修飾子を使用すると、コンポーザブルを装飾または拡張できます。修飾子では、次のようなことができます。
コンポーザブルのサイズ、レイアウト、動作、外観を変更する
ユーザー補助ラベルなどの情報を追加する
ユーザー入力を処理する
要素をクリック可能、スクロール可能、ドラッグ可能、ズーム可能にするなど、高レベルの操作を追加する
修飾子は標準の Kotlin オブジェクトです。Modifier クラス関数のいずれかを呼び出して修飾子を作成します。
summary
Modifierというのは、@Composable関数を修飾するオブジェクトのことです。
背景色の変更や幅、高さを変更することができます。
背景色を変更する方法
Modifier.background()を使用します。
package com.example.basiccodelab
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.basiccodelab.ui.theme.BasicCodelabTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BasicCodelabTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting(name = "Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Text("Modifier",
modifier = Modifier.background(
Color(color = 0xFF00FF00)
))
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
BasicCodelabTheme {
Greeting(name = "Android")
}
}
全体に余白をつける場合は、paddingを使います
@Composable
fun Greeting(name: String) {
Text("Modifier",
modifier = Modifier.padding(
all = 16.dp
).background(
Color(color = 0xFF00FF00)
))
上下と左右に余白をつける場合
左右に余白をつけるときは、horizontal、上下に余白をつけるときは、verticalを使います。
@Composable
fun Greeting(name: String) {
Text("Modifier",
modifier = Modifier.padding(
horizontal = 16.dp,// 左右
vertical = 45.dp// 上下
).background(
Color(color = 0xFF00FF00)
))
}
thoughts
今回はModifierについて学び、背景色と余白の付け方について学びました。
Android学習で最近お世話になっているモケラボさんの動画のリンクを載せておきます。
Discussion