Question

我有一个ImageView作为Relativelayout的背景，顶部有一个刷新按钮。按钮的涟漪效果正由其下方的ImageView覆盖。我尝试过FrameLayouts等，但似乎没有任何帮助。

enter image description here

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_drawer"
    android:layout_width="315dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@color/sidebar_bg_color"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="fill_parent"
        android:layout_height="165dp"
        android:layout_alignParentTop="true"
        android:src="@drawable/device_bg" />

    <LinearLayout
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/sidebar_refresh" />
    </LinearLayout>

</RelativeLayout>

Answer 1

使用selectableItemBackgroundBorderless，您可以这样做：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@android:color/holo_green_light"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:src="@drawable/device_bg" />

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/sidebar_refresh" />

    <LinearLayout
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true">
        <FrameLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="7dp"
            android:background="@android:color/transparent">
            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:src="@drawable/sidebar_refresh"
                android:alpha="0"
                android:background="?attr/selectableItemBackgroundBorderless"/>
        </FrameLayout>
    </LinearLayout>

</RelativeLayout>

关键是涟漪效应必须具有它自己的布局（ LinearLayout + FrameLayout ），然后使用alpha="0"设置透明到具有纹波的图像以便叠加图像是坚实的。

此代码的问题是：

您必须对填充进行硬编码。如果没有填充或填充太小，则纹波效应将限制为矩形，而不是圆形。使用公式48（高度/宽度）/ 7来计算填充。如果除以7不起作用，则减少除数，例如6.
因为它有填充，所以你不能触摸填充来触发涟漪效应。如果这是一个小按钮是不可接受的，因为它不是很明显，但如果它是一个很大的按钮就很重要。

好消息是在[{1}}中使用selectableItemBackgroundBorderless代码模拟ripple的替代方法：

drawable/ripple.xml

从我观察到的情况来看，它会产生相同的连锁效果（除了它没有溢出波纹），如<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorPrimary"> <item android:id="@android:id/mask"> <shape android:shape="oval"> <solid android:color="?android:colorPrimary"/> </shape> </item> </ripple>那样，所以没有理由你坚持使用默认selectableItemBackgroundBorderless

使用此selectableItemBackgroundBorderless，请执行以下操作：

ripple.xml

唯一改变的是<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/holo_green_light" android:orientation="vertical"> <ImageView android:id="@+id/imageView4" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:scaleType="fitXY" android:src="@drawable/device_bg" /> <ImageView android:layout_width="48dp" android:layout_height="48dp" android:layout_alignParentEnd="true" android:layout_alignParentTop="true" android:src="@drawable/sidebar_refresh" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentTop="true"> <FrameLayout android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:background="@android:color/transparent"> <ImageView android:id="@+id/imageView3" android:layout_width="48dp" android:layout_height="48dp" android:clickable="true" android:src="@drawable/ripple" /> </FrameLayout> </LinearLayout> </RelativeLayout>部分。没有更多的硬编码填充和没有alpha图像。唯一的小问题是点击角落仍会触发涟漪效应。我找到了thread，但我还没有尝试过。

上述两种方式即使图像也不透明。

ImageView覆盖了重叠按钮的涟漪效果

1 个答案: