Анимация фона кнопки для отображения оставшегося времени?

Question

Я работаю над проектом android, где пользователь может сканировать метку RFID. Срок действия тега истекает через определенное количество секунд, чтобы очистить систему до появления другого тега, в основном, чтобы избежать ошибочной обработки одного и того же тега дважды. Чтобы визуализировать этот тайм-аут, я хочу, чтобы фон кнопки, где отображается идентификатор тега, был анимированным. По сути, я хочу, чтобы вся кнопка была заполнена цветом, когда тег только что отсканирован, и медленно уменьшалась до середины по мере того, как время обрабатывалось.

Что я нашел до сих пор: Я нашел этот ответ , где они говорят о свойствах API. Я мог видеть, как это работает с градиентом, но, к сожалению, документация по градиентам скудна, и, похоже, это будет не так просто сделать.

Я также подумал, что, возможно, вы могли бы добиться этого, наложив другой слой того же размера ниже кнопки и масштабировав его. Но, честно говоря, я думаю, что это было бы довольно сложно сделать последовательно, особенно с изменением размера представления при обработке таймера и изменении конфигурации. Опять же, я не очень разбираюсь в android и использую линейные и сеточные макеты почти для всего, так как их легче всего понять.

Все, что мне действительно нужно, это какой-то способ по существу "масштабировать" фон на величину (отношение общего времени и оставшегося времени) к середине, как я продемонстрировал здесь. Или способ по существу иметь жесткий градиент цвета, при котором белые части градиента перемещаются к середине по мере того, как обрабатывается время.

Последнее решение, которое, как я думал, могло бы сработать, - это нарисовать анимированный вектор и манипулировать объектаниматором. связано с этим, чтобы заставить его играть на правильной скорости. Однако, это решение, вероятно, довольно грязное, хотя я и не пробовал его (пока)

У кого-нибудь есть чистое решение этой проблемы?

Примечание: я использую java для этого проекта. Я не включил фрагменты кода, потому что не думал, что они нужны. Если вам нужны фрагменты, просто спросите, и я предоставлю. Мой minSdkVersion равен 25, поскольку целевое устройство для задания имеет android 7.1 и не может быть обновлено до более новой версии.

Answer 1

Вот пример макета с двумя индикаторами выполнения и текстовым обзором над ними:

    <?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 и не видны, кроме как при отладке.

ОБНОВЛЕНИЕ: Вот код анимации, который делает прогресс сброс баров со 100% до 0% за 5 секунд.

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();