按钮内的圆形进度指示器，Android 材料设计

Question

我刚刚读到，材料设计中的按钮（MaterialButton）（进度指示器材料设计）能够容纳圆形进度指示器，如附图所示

基本上，当您按下按钮时，会删除文本并显示进度指示器，但不知道如何实现它，有人已经处理过它了吗？

任何提示都会非常感激。谢谢

Answer 1

通过MaterialComponents库，您可以使用该类IndeterminateDrawable创建 aCircularProgressIndicator并将其应用于 aButton或 a 中的图标Button：

   val spec =
        CircularProgressIndicatorSpec(this,  /*attrs=*/null, 0,
            com.google.android.material.R.style.Widget_Material3_CircularProgressIndicator_ExtraSmall)
    val progressIndicatorDrawable =
        IndeterminateDrawable.createCircularDrawable(this, spec)
    //...
    button.setOnClickListener {
        button.icon = progressIndicatorDrawable
    }

和：

<com.google.android.material.button.MaterialButton
    android:id="@+id/indicator_button"
    style="@style/Widget.Material3.Button.OutlinedButton.Icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:text="Button"/>

通过Compose，您可以使用以下内容：

 var progressIndicatorVisible by remember { mutableStateOf(false) }

 Button(
   onClick = {
     scope.launch {
         progressIndicatorVisible = true

         // Just for example
         delay(5000)
         progressIndicatorVisible = false
     }
   }, 
   modifier = Modifier.animateContentSize()){

     if (progressIndicatorVisible) {
         CircularProgressIndicator(
             color = White,
             strokeWidth = 2.dp,
             modifier = Modifier.size(15.dp)
         )
     }
     Text (
         "Button",
         modifier = Modifier.padding(start = if (progressIndicatorVisible) 8.dp else 0.dp)
     )
 }

Answer 2

实现此目的的方法之一是创建一个布局，其中您将有一个容器并放置按钮和CircularProgressIndicator

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/some_height"
        android:background="#00000000"
        android:layout_marginRight="@dimen/margin_right"
        android:layout_marginLeft="@dimen/margin_left">

        <Button
            android:id="@+id/btn_download"
            android:layout_width="match_parent"
            android:layout_height="@dimen/some_height"
            android:text="Download"
            android:layout_gravity="center"
            android:visibility="visible"
            android:textColor="#FFFFFF"/>

     
    <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </FrameLayout>

然后，您只需切换进度条的可见性并删除文本即可。

另一种方法是使用自定义动画可绘制。然后，您可以将其添加到按钮中作为drawableStart或drawableEnd并进行某种定位，甚至可能作为背景。

第三个选项是，按照：https ://stackoverflow.com/a/65180647/13187710

顺便说一句，在上面的 xml 代码中，您可以替换Button为MaterialButton.