使用波纹效果更改 FAB 颜色

Posted 2023-04-14

【中文标题】使用波纹效果更改 FAB 颜色

【英文标题】：Change FAB color with ripple effect

【发布时间】：2017-06-11 20:01:57

【问题描述】：

在 android 中，我想做这样的事情（但有 2 种交替的黑白颜色：

像这样用涟漪效果改变颜色

我尝试做的是：

1) 通过 XML 设置默认 backgroundTint 和波纹颜色

app:backgroundTint="@android:color/black"
app:rippleColor="@android:color/white"

2) onclick 方法中，将 backgroundTint 更改为白色，将波纹颜色更改为黑色

为初始颜色设置一个字符串，即high_color = "black"。那么，

fab.setOnClickListener(new View.OnClickListener() 
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        public void onClick(View v) 
            if(high_color.equals("black"))
                fab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.white)));
                fab.setImageTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.black)));
                fab.setRippleColor(ContextCompat.getColor(getApplicationContext(), R.color.black));
                high_color = "white";
            else 
                fab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.black)));
                fab.setImageTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.white)));
                fab.setRippleColor(ContextCompat.getColor(getApplicationContext(), R.color.whites));
                high_color = "black";
            
        
    );

现在我得到了这样的东西：

我得到的是这个

有没有办法让这个看起来像第一个？比如放慢波纹动画速度之类的？

【问题讨论】：

看看这个库：github.com/ozodrukh/RippleDrawable

在我看来，它不像是连锁反应。您是否为此尝试过 Circular Reveal？检查这个：guides.codepath.com/android/Circular-Reveal-Animation。还有这个：developer.android.com/training/material/animations.html

啊，如果你想要一个例子......检查我的回购，它完全符合你的要求，但是在 CustomView 上，在这个文件中：github.com/leandroBorgesFerreira/LoadingButtonAndroid/blob/…

尝试将波纹颜色更改为透明... Idk，它可能会工作

【参考方案1】：

好吧，从来没有在 FAB 上尝试过，但为了简单起见，我在 ImageButton 上实现了相同的功能，如下所示，它可以工作。希望能帮助到你。这是针对大于 21 (Lollipop) 的 API。默认情况下，我的 ImageButton 的静止高度为 6dp，触摸时它会升高到 18dp (6dp + 12dp)，如果需要，您可以在 lift_on_touch.xml 中更改它.另外，我使用的是 StateListAnimator，它会根据 ImageButton 的状态变化而变化。

<ImageButton
    android:id="@+id/share_fab"
    android:layout_
    android:layout_
    android:layout_margin="16dp"
    android:background="@drawable/ripples_on_touch"
    android:elevation="6dp"
    android:padding="16dp"
    android:src="@drawable/ic_share_white_24dp"
    android:stateListAnimator="@animator/lift_on_touch"
    tools:targetApi="lollipop" />

v21/ripples_on_touch.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#F83E0ACC"
tools:targetApi="lollipop">
<item>
    <shape android:shape="oval">
        <solid android:color="#FFFF6F00" />
    </shape>
</item>
</ripple>

v21/lift_on_touch.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <set>
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="scaleX"
            android:valueTo="1.250"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="scaleY"
            android:valueTo="1.250"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="translationZ"
            android:valueTo="12dp"
            android:valueType="floatType" />
    </set>
</item>

<item>
    <set>
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="scaleX"
            android:valueTo="1.0"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="scaleY"
            android:valueTo="1.0"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </set>
</item>
</selector>

【参考方案2】：

我认为你应该使用选择器。选择器允许在后台轻松进行更改。

以类似的方式使用选择器：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" state_enabled="true "/>
    <item android:color="@android:color/black" state_enabled="false "/>
</selector>

用它作为FAB的背景，下面有sn-p：

app:background ="@drawable/selector"

这将在点击时将白色作为背景。否则它将是黑色的。 还有更多属性命名空间可以进一步调整选择器。因此，请阅读 Android 开发者网站上的选择器。 如果这真的对您有帮助，请回复我。

【讨论】：

您甚至可以在 Fab app:rippleColor="@android: color/#999999" 中设置波纹颜色@