初心者向けトレーニングコースに沿ってAndroidStudioに触ってみました。
Kotlinの文法、Modifierの書き方等、あいまいな部分があったのでまとめようと思います。
間違いがあればご指摘ください。
importについては補助機能を使えば憶える必要がなさそうなので、省略します。
@Composable
fun GreetingText(message: String, from: String,modifier: Modifier = Modifier){ //①
Column( //②
verticalArrangement = Arrangement.Center,
modifier = modifier
) {
Text( //③
text = message,
fontSize = 100.sp,
lineHeight = 116.sp,
textAlign = TextAlign.Center
)
Text( //④
text = from,
fontSize = 36.sp,
modifier = Modifier
.padding(16.dp)
.align(alignment = Alignment.CenterHorizontally)
)
}
}
①関数の宣言
String型の引数2つとModifier型引数1つを受け取る。値を返さない。
Modifier型引数は初期化を行っている。(この辺の認識があいまい。初期化で合ってるのか？)
すべてのComposableな関数は、Modifierを受け取る必要がある。
@Composableを付けて宣言された関数
SetContent()関数や他のComposableな関数から呼び出すことができる。入力を受け取り、画面に表示されるものを生成する。パスカルケースで命名する。
②アプリのレイアウトを行う
{}で囲まれた子要素を配置する。
最後に渡すパラメータはcontentであり、省略されている。
content = を省略し、{}で受け取ることができる。後置ラムダ構文
Column()
縦並びで子要素を配置して表示する。
verticalArrangement
垂直位置を決める引数。Arrangement.〇〇を受け取る。
horizontalAlignment
水平位置を決める引数。Alignment.〇〇を受け取る。サンプルコードでは未使用。
Row()
横並びで子要素を配置して表示する。サンプルコードでは未使用。
horizontalArrangement 水平位置を決める引数。Arrangement.〇〇を受け取る。
verticalAlignment 垂直位置を決める引数。Alignment.〇〇を受け取る。
Box()
子要素を重ねて表示する。後述サンプルコード内で使用。
③、④String型引数を表示する
text
String型の引数を受け取る。
fontSize
文字の高さ。
lignHeight
表示される範囲の高さ。
sp
拡張可能ピクセル ディスプレイのサイズによって大きさが変わる。
dp
密度非依存ピクセル。
textAlign
テキストの表示位置を指定。TextAlign.〇〇を渡す。
Modifier.padding()
余白を設定する。引数を渡して上下左右方向それぞれに設定することもできる。
4.dpの倍数での設定を推奨。
Modifier.align()
表示する位置を指定する。親要素の指定に反して配置可能。Alignment.〇〇を渡す。
@Composable
fun GreetingImage(message: String,from: String,modifier: Modifier = Modifier){ //⑤
val image = painterResource(R.drawable.androidparty)
Box(modifier) {
Image( //⑥
painter = image,
contentDescription = null,
contentScale = ContentScale.Crop,
alpha = 0.5F
)
GreetingText( //⑦
message = message,
from = from,
modifier = Modifier
.fillMaxSize()
.padding(8.dp)
)
}
}
⑤関数の宣言
Box()を用いて画像とGreetingTextのテキストを配置する。
受け取る引数はGreetingTextと同じ。
変数imageを宣言し、表示する画像の参照を与える。
painterResouce(R.drawable.〇〇)
リソースとして登録した画像の参照。〇〇は登録名。
⑥配置する画像を宣言
Image
引数painterに画像の参照を渡す。
contentDescription = null
Imageコンポーザブルを宣言すると発生するエラーを解除するための引数。
contentScale
画像の大きさを設定する。
ContentScale.Crop 表示範囲に合わせて画像を切り抜いて表示する。
alpha
画像の透過度をfroat値で設定する。
プレビューだと画像が薄く表示されましたが、pixel6a実機で実行すると引数を渡さないよりも濃く表示され、まだ理解できていません。
⑦関数の呼び出し
①で定義した関数を呼び出す。
Modifier.fillMaxSize()
親によって許可されているWidth、Heightの最大の大きさに拡大する。
乱文失礼しました。
読みやすいまとめを書く難しさを実感します。
ここまで読んでいただきありがとうございました。