fun Color.compositeOver(background: Color): Color
を使う。
例えば #232323 のグレーに透明度15%の白を重ねたときの色（不透明のグレー）を作りたい場合は、このようになる。
val gray = Color(0xFF232323)
val white150 = Color.White.copy(alpha = 0.15f)
val compositeColor = white150.compositeOver(gray)
Card の背景は不透明じゃないと影が変になる。デフォルトでは Card の backgroundColor は MaterialTheme の surface なので、MaterialTheme の surface に半透明の色を指定しているときは、こんな感じで compositeOver で合成した色を backgroundColor に指定するとよい。
Card(
backgroundColor = MaterialTheme.colors.surface.compositeOver(MaterialTheme.colors.background),
) {
}
以下のコードでは、MaterialTheme の surface に透明度15%の白を指定しているので、左では影が変になっている。右は compositeOver を使って作った不透明の色（ベースの色が不透明のグレーだから不透明になる）を backgroundColor に指定しているので、意図通りの表示になっている。
MaterialTheme(
colors = lightColors(
background = Color(0xFF232323),
surface = Color.White.copy(alpha = 0.15f)
)
) {
Surface(color = MaterialTheme.colors.background) {
Row(
modifier = Modifier
.padding(top = 8.dp)
.fillMaxSize()
) {
Card(
modifier = Modifier
.padding(start = 8.dp, bottom = 8.dp)
.size(136.dp)
) {
// 左のカード
}
Card(
backgroundColor = MaterialTheme.colors.surface.compositeOver(MaterialTheme.colors.background),
modifier = Modifier
.padding(start = 8.dp, bottom = 8.dp)
.size(136.dp)
) {
// 右のカード
}
}
}
}
0 件のコメント:
コメントを投稿