android - 动 Canvas 局的背景颜色变化

Question

我有一个 RelativeLayout，我从 drawable 设置了背景。我能够将 RelativeLayout 的背景更改为另一个RadioButton 被选中。但是当它发生变化时我该如何给它一个动画呢？

代码:activity_main.xml:

<RelativeLayout
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:gravity="center"
    android:background="@drawable/original"
    android:id="@+id/rel1">
    <RadioButton
        android:id="@+id/radio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>

original.xml(可绘制):

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#ffffff">
    </solid>
    <corners
        android:radius="50dp">
    </corners>
</shape>

按下.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#2196F3">
    </solid>
    <corners
        android:radius="50dp">
    </corners>
</shape>

Java 类:

radio.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                    if(b){
                    relativeLayout.setBackgroundResource(R.drawable.pressed);
                }
            }
        });

Answer 1

问题归结为以某种方式剪角和动 Canvas 局背景。因此，理论上，我们可以为布局设置前景可绘制对象，并使用 ArgbEvaluator 为背景可绘制对象设置动画。

开始练习。

看看this answer ，作者分享了一个可绘制的蒙版，可以方便地解决您的问题:

将该可绘制对象应用为布局的前景:

<RelativeLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:foreground="@drawable/frame"
    android:background="@color/colorAccent" />

在代码中，每当需要执行动画时:

    final int from = ContextCompat.getColor(this, R.color.colorAccent);
    final int to   = ContextCompat.getColor(this, R.color.colorPrimary);

    ValueAnimator anim = new ValueAnimator();
    anim.setIntValues(from, to);
    anim.setEvaluator(new ArgbEvaluator());
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            view.setBackgroundColor((Integer)valueAnimator.getAnimatedValue());
        }
    });

    anim.setDuration(1000);
    anim.start();

Here's what you'll get on output:

If you want to change frame drawable's color, you can wrap it into an xml and apply android:tint.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <bitmap android:src="@drawable/frame" android:tint="#ccaaff"/>
    </item>
</layer-list>

现在将此可绘制对象设置为布局的前景。