2021年5月28日金曜日

Jetpack Compose : disabled のとき Image や Text の色を薄くしたい

Checkbox とか Switch とか enabled 設定が用意されている Composable では enabled に false を設定すると色が薄くなるよう実装されています。
  1. @Composable  
  2. fun Checkbox(  
  3.     ...  
  4.     enabled: Boolean = true,  
  5.     ...  
  6. ) {  
  7.     ...  
  8. }  
Text とか Image には enabled 設定は用意されていないので自分でがんばる必要があります。 方法としては
  • Modifier.alpha() を使う
  • LocalContentAlpha を指定する
  • Text の color に指定する色の alpha を変える
  • Image の alpha パラメータを指定する
などがあります。

Modifier.alpha() を使う

  1. val alpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled  
  2.   
  3. Column(  
  4.     modifier = Modifier.padding(16.dp).alpha(alpha)  
  5. ) {  
  6.     Image(Icons.Default.Android, contentDescription = null)  
  7.     Icon(Icons.Default.Home, contentDescription = null)  
  8.     Text("Android")  
  9. }  

LocalContentAlpha を指定する

LocalContentAlpha はデフォルトのときの文字色と Icon の tint color に使われていますが、Image では使われていません。
  1. val alpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled  
  2.   
  3. CompositionLocalProvider(LocalContentAlpha provides alpha) {  
  4.     Column(  
  5.         modifier = Modifier.padding(16.dp)  
  6.     ) {  
  7.         Image(Icons.Default.Android, contentDescription = null)  
  8.         Icon(Icons.Default.Home, contentDescription = null)  
  9.         Text("Android")  
  10.     }  
  11. }  

Text, Icon の color, tint に指定する色の alpha を変える & Image の alpha パラメータを指定する

  1. val alpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled  
  2.   
  3. Column(  
  4.     modifier = Modifier.padding(16.dp)  
  5. ) {  
  6.     Image(  
  7.         Icons.Default.Android,   
  8.         contentDescription = null,  
  9.         alpha = alpha  
  10.     )  
  11.     Icon(  
  12.         Icons.Default.Home,   
  13.         contentDescription = null,  
  14.         tint = MaterialTheme.colors.primary.copy(alpha = alpha)  
  15.     )  
  16.     Text(  
  17.         "Android",  
  18.         color = MaterialTheme.colors.primary.copy(alpha = alpha)  
  19.     )  
  20. }  



0 件のコメント:

コメントを投稿