Android中按钮上的进度指示器

Question

我在Android项目中使用材料设计按钮。我想在按下时创建一个进度指示器按钮。材料设计似乎还没有支持它。

有人建议我如何在材料设计按钮中实现同样的效果吗。

感谢

Answer 1

我不认为有任何材料组件可以根据您的需要提供，但为其定制布局非常容易，您可以使用约束布局并相应地放置视图。例如，您可以为进度条提供约束，使其位于按钮的中间。试试下面的方法，看看它是否符合你的目的。

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.button.MaterialButton
android:id="@+id/button_accept"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/dimen_24"
android:layout_marginEnd="@dimen/dimen_24"
android:backgroundTint="@color/colorGreen2"
android:elevation="8dp"
android:padding="@dimen/dimen_4"
android:src="@drawable/ic_check_white"
android:text="Accept"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="@+id/progress_bar_accept"
android:layout_width="@dimen/dimen_32"
android:layout_height="@dimen/dimen_32"
android:elevation="8dp"
android:indeterminate="true"
android:indeterminateTint="@color/colorWhite"
android:indeterminateTintMode="src_in"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@+id/button_accept"
app:layout_constraintEnd_toEndOf="@+id/button_accept"
app:layout_constraintStart_toStartOf="@+id/button_accept"
app:layout_constraintTop_toTopOf="@+id/button_accept"/>
</androidx.constraintlayout.widget.ConstraintLayout>

现在通过维护一些逻辑来处理进度条的可见性，比如使用标志来保持它的状态

如果您需要了解约束布局，可以在此处查看：https://developer.android.com/reference/android/support/constraint/ConstraintLayout

希望这能有所帮助。

Answer 2

使用icon属性和androidx.swiperefreshlayout.widget.CircularProgressDrawable.可以实现此行为

xml

android:text='@{viewModel.isUpdating ? "" : @string/button_title}'
app:iconGravity="textStart"
app:iconPadding="0dp"
app:showProgress="@{viewModel.isUpdating}"

和BindingAdapter

@BindingAdapter("showProgress")
fun MaterialButton.setShowProgress(showProgress: Boolean?) {
icon = if (showProgress == true) {
CircularProgressDrawable(context!!).apply {
setStyle(CircularProgressDrawable.DEFAULT)
setColorSchemeColors(ContextCompat.getColor(context!!, R.color.colorTextPrimary))
start()
}
} else null
if (icon != null) { // callback to redraw button icon
icon.callback = object : Drawable.Callback {
override fun unscheduleDrawable(who: Drawable, what: Runnable) {
}
override fun invalidateDrawable(who: Drawable) {
[e-mail]()
}
override fun scheduleDrawable(who: Drawable, what: Runnable, `when`: Long) {
}
}
}
}

Answer 3

如果它能帮助某人，Java版本+数据绑定

private static Drawable getProgressBarDrawable(final Context context) {
TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.progressBarStyleSmall, value, false);
int progressBarStyle = value.data;
int[] attributes = new int[]{android.R.attr.indeterminateDrawable};
TypedArray typedArray = context.obtainStyledAttributes(progressBarStyle, attributes);
Drawable drawable = typedArray.getDrawable(0);
typedArray.recycle();
return drawable;
}

@BindingAdapter(value = {"android:progressVisible"})
public static void setButtonLoading(MaterialButton button, boolean loading) {
button.setMaxLines(1);
button.setEllipsize(TextUtils.TruncateAt.END);
button.setIconGravity(MaterialButton.ICON_GRAVITY_START);
if (loading) {
Drawable drawable = button.getIcon();
if (!(drawable instanceof Animatable)) {
drawable = getProgressBarDrawable(button.getContext());
button.setIcon(drawable);
}
((Animatable) drawable).start();
} else {
button.setIcon(null);
}
}

<com.google.android.material.button.MaterialButton
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progressVisible="@{isLoading}"
android:text="My loading button" />

Answer 4

感谢@Aleksey的想法。

我添加了更多的代码，使用户体验更加完美。

XML:

app:icon="@drawable/ic_in"
android:text="@string/sign_in"
app:iconGravity="textStart"
app:iconSource="@{@drawable/ic_in}"
app:showProgress="@{isLoading}"
app:textSource="@{@string/sign_in}"

绑定适配器：

@BindingAdapter(value = ["showProgress", "iconSource", "textSource"], requireAll = false)
fun MaterialButton.setShowProgress(
showProgress: Boolean?,
iconSource: Drawable?,
textSource: String?
) {
icon = if (showProgress == true) {
CircularProgressDrawable(context!!).apply {
setStyle(CircularProgressDrawable.LARGE)
setColorSchemeColors(ContextCompat.getColor(context!!, R.color.purple_200))
start()
}
} else iconSource
text = if (showProgress == true) "" else textSource
if (icon != null) { // callback to redraw button icon
icon.callback = object : Drawable.Callback {
override fun unscheduleDrawable(who: Drawable, what: Runnable) {
}
override fun invalidateDrawable(who: Drawable) {
[e-mail]()
}
override fun scheduleDrawable(who: Drawable, what: Runnable, `when`: Long) {
}
}
}
}