2021年5月9日日曜日

Jetpack Compose で Material Design の ToggleButton を作ってみた

Material Design の ToogleButton (https://material.io/components/buttons#toggle-button) を Jetpack Compose で作ってみた。

https://github.com/yanzm/ComposeToggleButton

こんな感じのやつ。


選択の処理は Modifier.toggleable() を使えば OK。
  1. @Composable  
  2. fun IconToggleButton(  
  3.     imageVector: ImageVector,  
  4.     contentDescription: String?,  
  5.     checked: Boolean,  
  6.     onCheckedChange: (Boolean) -> Unit,  
  7.     enabled: Boolean = true  
  8. ) {  
  9.     CompositionLocalProvider(  
  10.         LocalContentColor provides contentColor(enabled = enabled, checked = checked),  
  11.     ) {  
  12.         Box(  
  13.             contentAlignment = Alignment.Center,  
  14.             modifier = Modifier  
  15.                 .toggleable(  
  16.                     value = checked,  
  17.                     onValueChange = onCheckedChange,  
  18.                     role = Role.RadioButton,  
  19.                 )  
  20.                 .size(48.dp)  
  21.         ) {  
  22.             Icon(  
  23.                 imageVector = imageVector,  
  24.                 contentDescription = contentDescription,  
  25.                 modifier = Modifier.size(24.dp)  
  26.             )  
  27.         }  
  28.     }  
  29. }  


枠線などの描画は Modifier.drawWithContent() でやったが、これが面倒だった〜(特にRTL対応)。
  1. private fun Modifier.drawToggleButtonFrame(  
  2.     ...  
  3. ): Modifier = this.drawWithContent {  
  4.   
  5.     ...  
  6.   
  7.     // draw checked border  
  8.     drawPath(  
  9.         path = ...,  
  10.         color = checkedBorderColor,  
  11.         style = Stroke(strokeWidth),  
  12.     )  
  13.   
  14.     drawContent()  
  15. }  


0 件のコメント:

コメントを投稿