向自定义CompoundButton添加涟漪效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了向自定义CompoundButton添加涟漪效果相关的知识,希望对你有一定的参考价值。

我有以下自定义CompoundButton

public class CustomCompoundButton extends CompoundButton {

    public CustomCompoundButton(Context context) {
        this(context, null);
    }

    public CustomCompoundButton(Context context, AttributeSet attrSet) {
        super(context, attrSet);
        setup();
    }

    private void setup() {
        setBackgroundResource(R.drawable.button_selector);
        setGravity(Gravity.CENTER);
        setClickable(true);
    }
}

在将Button添加到布局后,我从代码中设置了button.getLayoutParams().width = myWidth; button.getLayoutParams().height = myHeight; 的宽度和高度:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/button_checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/button_unchecked"
        android:state_checked="false" />
</selector>

button_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="?colorAccent" />
</shape>

button_checked.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="2dp"
        android:color="?colorAccent" />
</shape>

button_unchecked.xml:

Button

这可以按预期工作,selector在未选中时为空圆圈,在选中时为圆圈。

问题是我无法在此行为之上添加涟漪效应。

我试图将ripple包装在<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#ffffff"> <selector> <item android:drawable="@drawable/button_checked" android:state_checked="true" /> <item android:drawable="@drawable/button_unchecked" android:state_checked="false" /> </selector> </ripple> 标签中,如下所示:

shape

这种方法存在多个问题:

  • 纹理完全覆盖了背景形状,它们不再可见(无论是否检查过) 背景形状应该保持不变,我只想在点击按钮时添加涟漪效果(选中或取消选中)
  • 涟漪效应的半径太大,它们相互重叠 纹波半径应与我的按钮半径相同。

我不知道如何做这项工作,真的很感激任何建议。

答案

将每个ripple包裹在自己的selector而不是将整个ripple包裹在this comment中将产生预期的效果。

有关示例,请参阅button_unchecked.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="#ffffff" tools:targetApi="lollipop"> <item android:id="@android:id/mask"> <shape android:shape="oval"> <stroke android:width="2dp" android:color="?colorAccent" /> </shape> </item> <item android:id="@android:id/background" android:drawable="?colorAccent" /> </ripple> 看起来像:

qazxswpoi

以上是关于向自定义CompoundButton添加涟漪效果的主要内容,如果未能解决你的问题,请参考以下文章

Android 为控件添加点击涟漪效果

向自定义 React 组件添加额外的类名

如何在带有圆角的布局上添加涟漪效果? [复制]

如何在 Swift 和 SpriteKit 中添加涟漪效果

带有自定义可绘制xml的涟漪效应?

向自定义 UIButton 添加约束不起作用