java - 通过从左到右填充来更改按钮背景

Question

我想在按下按钮时通过从左到右填充颜色来更改按钮的背景，就像水平进度条一样。

这是检测按住的代码:

lateinit var buttonView: View
val cdt = object : CountDownTimer(1000, 100) {
            override fun onTick(millisUntilFinished: Long) {

            }

            override fun onFinish() {
                //do something after being press by 1 sec.
            }
        }

        val onTouchListener = View.OnTouchListener { v, event ->
            buttonView = v
            when (event.action) {
                MotionEvent.ACTION_DOWN -> {
                    (v.background as AnimationDrawable).start()
                    cdt.start()
                }
                MotionEvent.ACTION_UP -> {
                    (v.background as AnimationDrawable).stop()
                    cdt.cancel()
                }

            }
            false
        }

这是我用于按钮的背景:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    ...items with drawables which colors are in different position. Frame by frame....
</animation-list>

这行得通，但并不顺利。有没有办法有效地做到这一点？像这样？ https://codepen.io/kay8/pen/azKbjN
(用Java回答没问题)

Answer 1

更新:以下将不起作用，因为它是为 Material 按钮编码的，因此请确保您的按钮是框架按钮(android.widget .Button)或 AppCompat 按钮(androidx.appcompat.widget.AppCompatButton)。

---

---

对于drawable，我会选择ClipDrawable。作为 LayerDrawable 中的顶层.这将在视觉上像进度条一样工作。

在下面的可绘制对象中，剪辑可绘制对象覆盖了一个只是红色矩形的底层。

button_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_red_light" />
        </shape>
    </item>
    <item android:id="@+id/clip_drawable">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="start">
            <shape
                android:shape="rectangle">
                <solid android:color="@android:color/black" />
            </shape>
        </clip>
    </item>
</layer-list>

当可绘制剪辑的级别从 0(未显示)增加到 10,000(100% 覆盖红色矩形)时，可绘制剪辑的黑色将遮住红色矩形。

TimeAnimator可用于为剪辑可绘制对象的级别设置动画。

This class provides a simple callback mechanism to listeners that is synchronized with all other animators in the system.

这是一个快速演示。如果您想设置动画的持续时间，您可以更改 onTimeUpdate() 以对总时间和耗时敏感。

MainActivity.java

public class MainActivity extends AppCompatActivity implements TimeAnimator.TimeListener {
    private TimeAnimator mAnimator;
    private int mCurrentLevel = 0;
    private ClipDrawable mClipDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get a handle on the ClipDrawable that we will animate.
        LayerDrawable layerDrawable = (LayerDrawable) findViewById(R.id.button).getBackground();
        mClipDrawable = (ClipDrawable) layerDrawable.findDrawableByLayerId(R.id.clip_drawable);

        // Set up TimeAnimator to fire off on button click.
        mAnimator = new TimeAnimator();
        mAnimator.setTimeListener(this);
    }

    @Override
    public void onTimeUpdate(TimeAnimator animation, long totalTime, long deltaTime) {
        mClipDrawable.setLevel(mCurrentLevel);
        if (mCurrentLevel >= MAX_LEVEL) {
            mAnimator.cancel();
        } else {
            mCurrentLevel = Math.min(MAX_LEVEL, mCurrentLevel + LEVEL_INCREMENT);
        }
    }

    public void animateButton(View view) {
        if (!mAnimator.isRunning()) {
            mCurrentLevel = 0;
            mAnimator.start();
        }
    }

    private static final int LEVEL_INCREMENT = 400;
    private static final int MAX_LEVEL = 10000;
}

activity_main.xml

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:background="@drawable/button_background"
        android:text="Button"
        android:onClick="animateButton"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>