Compose メモ : 2つの色を重ねた色を作る

view plainprint?

1. fun Color.compositeOver(background: Color): Color  

fun Color.compositeOver(background: Color): Color を使う。

例えば #232323 のグレーに透明度15%の白を重ねたときの色（不透明のグレー）を作りたい場合は、このようになる。

view plainprint?

1. val gray = Color(0xFF232323)  
2. val white150 = Color.White.copy(alpha = 0.15f)  
3.   
4. val compositeColor = white150.compositeOver(gray)  

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 に指定するとよい。

view plainprint?

1. Card(  
2.     backgroundColor = MaterialTheme.colors.surface.compositeOver(MaterialTheme.colors.background),  
3. ) {  
4. }  

Card( backgroundColor = MaterialTheme.colors.surface.compositeOver(MaterialTheme.colors.background), ) { }
以下のコードでは、MaterialTheme の surface に透明度15%の白を指定しているので、左では影が変になっている。右は compositeOver を使って作った不透明の色（ベースの色が不透明のグレーだから不透明になる）を backgroundColor に指定しているので、意図通りの表示になっている。

view plainprint?

1. MaterialTheme(  
2.     colors = lightColors(  
3.         background = Color(0xFF232323),  
4.         surface = Color.White.copy(alpha = 0.15f)  
5.     )  
6. ) {  
7.     Surface(color = MaterialTheme.colors.background) {  
8.         Row(  
9.             modifier = Modifier  
10.                 .padding(top = 8.dp)  
11.                 .fillMaxSize()  
12.         ) {  
13.             Card(  
14.                 modifier = Modifier  
15.                     .padding(start = 8.dp, bottom = 8.dp)  
16.                     .size(136.dp)  
17.             ) {  
18.                // 左のカード  
19.             }  
20.   
21.             Card(  
22.                 backgroundColor = MaterialTheme.colors.surface.compositeOver(MaterialTheme.colors.background),  
23.                 modifier = Modifier  
24.                     .padding(start = 8.dp, bottom = 8.dp)  
25.                     .size(136.dp)  
26.             ) {  
27.                // 右のカード  
28.             }  
29.         }  
30.     }  
31. }  

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) ) { // 右のカード } } } }