java - 动画按钮背景以反映剩余时间？

问题描述

我正在开发一个用户可以扫描 RFID 标签的 android 项目。该标签在一定秒数后过期，以便在另一个标签进来之前清理系统，基本上是为了避免错误地处理同一个标签两次。为了可视化这个超时，我希望显示标签 ID 的按钮的背景是动画的。基本上，我希望在刚刚扫描标签时将整个按钮填充颜色，并随着时间的推移慢慢缩小到中间。

到目前为止我发现了什么： 我在他们谈论属性 api 的地方找到了这个答案。我可以看到这与渐变一起使用，但不幸的是，关于渐变的文档很少，而且看起来并不那么容易做到这一点。

我还认为，也许您可以通过在按钮下方以某种方式分层另一个相同大小的视图并对其进行缩放来实现这一点。但老实说，我认为这很难始终如一地做到，尤其是在计时器处理和配置更改时调整视图大小。再说一次，我对 android 并没有那么有经验，几乎所有东西都使用线性和网格布局，因为它们最容易理解。

我真正需要的只是某种方式基本上将背景“缩放”一个值（总时间与剩余时间之间的比率）朝向中间，就像我在这里演示的那样。或者一种基本上具有硬色渐变的方法，其中渐变的白色部分随着时间的推移向中间移动。

我认为可能可行的最后一个解决方案是拥有一个可绘制的动画矢量并操纵与之关联的 objectanimator 以强制它以正确的速度播放。但是，这个解决方案可能很混乱，以为我还没有尝试过（还）

有没有人有一个干净的解决方案来解决这个问题？

注意：我在这个项目中使用 java。我没有包含代码片段，因为我认为不需要它们。如果您需要一些片段，请简单询问，我会提供。我的 minSdkVersion 是 25，因为该作业的目标设备具有 android 7.1 并且无法更新到较新版本。

标签： javaandroiduser-interfaceanimationandroid-7.1-nougat

解决方案

这是一个带有两个进度条和一个文本视图的示例布局：

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:progressBackgroundTint="@color/transparent"
        android:rotation="180"
        android:scaleY="4"
        app:layout_constraintBottom_toBottomOf="@id/textView2"
        app:layout_constraintEnd_toStartOf="@+id/progressBar2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/textView2"
        tools:progress="100" />

    <ProgressBar
        android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:progressBackgroundTint="@color/transparent"
        android:scaleY="4"
        app:layout_constraintBottom_toBottomOf="@id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/progressBar"
        app:layout_constraintTop_toTopOf="@id/textView2"
        tools:progress="100" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="24dp"
        android:text="TextView"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

这些是将进度设置为 100、50 和 1 得到的结果：

100：

50：

1：

如果您添加自定义可绘制对象作为背景，您可以使进度条相应地填充空间并使其颜色变为红色。

请注意，照片中的灰线来自我在 Android Studio 中的设计选项卡，除了调试时不可见。

更新：这是使进度条在 5 秒内从 100% 重置为 0% 的动画代码。

ProgressBar pb = findViewById(R.id.progressBar); ProgressBar pb2 = findViewById(R.id.progressBar2);

    ObjectAnimator animation = ObjectAnimator.ofInt(pb, "progress", 0, 100);
    animation.setDuration(5000);
    animation.setInterpolator(new DecelerateInterpolator());
    animation.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) { }

        @Override
        public void onAnimationEnd(Animator animator) {
            //do something when the countdown is complete
        }

        @Override
        public void onAnimationCancel(Animator animator) { }

        @Override
        public void onAnimationRepeat(Animator animator) { }
    });
    animation.start();

    AnimatorSet set = new AnimatorSet();
    set.playTogether(ObjectAnimator.ofInt(pb, "progress", 100, 0),
            ObjectAnimator.ofInt(pb2, "progress", 100, 0));
    set.setDuration(5000);
    set.start();

java - 动画按钮背景以反映剩余时间？

问题描述

解决方案

推荐阅读