具有透明背景的形状上的涟漪

Posted 2023-04-14

【中文标题】具有透明背景的形状上的涟漪

【英文标题】：Ripples on a shape with a transparent background

【发布时间】：2015-06-09 07:40:52

【问题描述】：

我在我的应用中使用以下形状

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval" >
            <solid android:color="@color/primary_light"/>
            <size android: android:/>
        </shape>
    </item>

    <item android:state_focused="true">
        <shape android:shape="oval">
            <stroke android:color="@color/primary_light" android:/>
            <size android: android:/>
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent"/>
            <size android: android:/>
        </shape>
    </item>
</selector>

它在我的可绘制文件夹中。现在我正在将我的应用程序更新为 Lollipop，我希望对我使用的圆形按钮给出一个涟漪反馈。 所以在drawable-v21 文件夹中，我将其更改为波纹选择器：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/primary_light">
    <item>
        <selector>
            <item android:state_focused="true">
                <shape android:shape="oval">
                    <stroke android:color="@color/primary_light" android:/>
                    <size android: android:/>
                </shape>
            </item>

            <item android:id="@android:id/mask">
                <shape android:shape="oval">
                    <solid android:color="@android:color/transparent"/>
                    <size android: android:/>
                </shape>
            </item>
        </selector>
    </item>
</ripple>

但不幸的是，在 Lollipop 中使用上述 drawable 并没有产生涟漪效果。是因为<solid android:color="@android:color/transparent"/>吗？

谁能告诉我哪里出错了？谢谢

【问题讨论】：

在将<solid android:color="@android:color/transparent"/> 用作波纹中的掩码时遇到了同样的问题。如果它是透明的，它似乎没有考虑到内部项目的形状。 \n 您的解决方案使用@android:color/white 而不是transparent，我认为这就是它实际工作的原因。

【参考方案1】：

经过几次反复试验，我似乎误解了selector 和item 的层次结构。

以下工作完美。

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/primary_light">
        <item android:id="@android:id/mask">
               <shape android:shape="oval">
                       <solid android:color="@android:color/white"/>
                       <size android: android:/>
               </shape>
        </item>
</ripple>

【讨论】：

这不是透明背景。。你也设法设置透明背景的波纹吗？

@anoniim 它适用于透明背景***.com/questions/30215663/…

据我了解，波纹效果只能应用于颜色。所以一个完全透明的背景永远不会出现涟漪效应。我们应该在按下时将背景更改为一些褪色（如果不是不透明）。

【参考方案2】：

这适用于透明背景：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight"
    android:exitFadeDuration="@android:integer/config_shortAnimTime">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <corners android:radius="3dp"/>
        <!-- This color is needed to be set - doesn't affect anything -->
        <solid android:color="@android:color/white"/>
    </shape>
</item>
<!-- This is the background for your button -->
<item>
    <!-- Use the shape you want here -->
    <shape android:shape="rectangle">
        <!-- Use the solid tag to define the background color you want -->
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>
</ripple>

从这个答案做了一些修改：Transparent ripple

【讨论】：

这就是我想要的。感谢您的回答

像魅力一样工作

谢谢你，它真的有效！白色作为<item android:id="@android:id/mask"> 的背景确实不会影响任何事情。

如果你想在一个透明的形状上产生一个波纹，这就是实现它的方法。感谢上帝，我找到了这个。我已经浪费了 1 个小时。

【参考方案3】：

指定波纹遮罩后，您可以在透明或半透明背景上产生波纹效果。波纹蒙版是可绘制的，但仅使用 alpha 值设置每个像素的波纹 alpha。这是一个以编程方式创建的示例。

var background = new android.graphics.drawable.GradientDrawable();
background.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
background.setColor(0x77FFFFFF); // semi-transparent background
background.setCornerRadius(10);
background.setStroke(3, 0xFF1144FF); // border color

var mask = new android.graphics.drawable.GradientDrawable();
mask.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
mask.setColor(0xFF000000); // the color is irrelevant here, only the alpha
mask.setCornerRadius(5); // you probably want the same corner as the background

var rippleColorLst = android.content.res.ColorStateList.valueOf(
    android.graphics.Color.argb(255,50,150,255)
);

// aaaand
var ripple = new android.graphics.drawable.RippleDrawable(rippleColorLst,background,mask);
yourButton.setBackground(ripple);

（抱歉，javascript/NativeScript 代码，可能有人能看懂）

【参考方案4】：

以下代码适用于具有透明按钮波纹效果的自定义形状 -

main_activity_buttons_ripple_with_background.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="#888888"
    tools:targetApi="lollipop">

    <!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="25dp" />
            <!-- This color is needed to be set - doesn't affect anything -->
            <solid android:color="#000" />
        </shape>
    </item>

    <!-- This is the background for your button -->
    <item>
        <!-- Use the shape you want here -->
        <shape android:shape="rectangle">
            <!-- Use the solid tag to define the background color you want -->
            <solid android:color="@android:color/transparent" />
            <stroke
                android:
                android:color="#FFF" />
            <corners android:radius="25dp" />
        </shape>
    </item>

</ripple>

styles.xml

<style name="MainActivityButtonsStyle">
    <item name="android:background">@drawable/main_activity_buttons_ripple_with_background</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:layout_margin">15dp</item>
    <item name="android:paddingLeft">20dp</item>
    <item name="android:paddingRight">20dp</item>
    <item name="android:layout_centerHorizontal">true</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">50dp</item>
    <item name="android:textColor">#FFF</item>
    <item name="android:textSize">18sp</item>
</style>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:orientation="vertical">

    <RelativeLayout
        android:layout_
        android:layout_
        android:layout_weight="1">

        <Button
            android:layout_alignParentTop="true"
            style="@style/MainActivityButtonsStyle"
            android:text="@string/button_search_by_id" />
    
    </RelativeLayout>
    
</LinearLayout>