ImageView selectableItemBackgroundBorderless 不会在视图边界之外呈现答案

【问题标题】：ImageView selectableItemBackgroundBorderless does not render outside of view boundsImageView selectableItemBackgroundBorderless 不会在视图边界之外呈现
【发布时间】：2018-05-10 17:31:42
【问题描述】：

我正在使用selectableItemBackgroundBorderless 为ImageView 添加波纹。我的预期行为是产生圆形波纹，扩大视图大小。不幸的是，波纹被视图边界裁剪了。如何解决这个问题？

默认状态：

按下状态：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nav_instruction_container"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/nav_gradient_bg"
    android:padding="20dp">
    <ImageView
        android:id="@+id/nav_sign"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_centerVertical="true"
        android:scaleType="centerInside"
        android:adjustViewBounds="true"
        />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/nav_sign"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginEnd="24dp"
        android:textColor="@color/white"
        android:textSize="24sp"
        android:textStyle="bold"
        android:maxLines="2"
        tools:text="A644 Shudehill asdfkjasdf asdfasdf asdfsss"
        android:ellipsize="marquee"
        />

    <TextView
        android:id="@+id/subTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_toRightOf="@+id/nav_sign"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginEnd="24dp"
        android:textColor="@color/white"
        android:textSize="17sp"
        tools:text="via Church St"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        app:srcCompat="@drawable/ic_nav_queue_sheet_icon_light"
        android:id="@+id/nav_queue"
        android:scaleType="centerInside"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:adjustViewBounds="true"/>
</RelativeLayout>

【问题讨论】：

如果没有将 clickable 属性设置为 xml 中的 ImageView，您是如何获得“按下状态”的？
AFAIK 如果附加点击监听器，则不需要 clickable 属性
你能解决这个问题吗

标签： android material-design android-view android-button rippledrawable

【解决方案1】：

如果您有一个可点击的ImageView，那么它很可能应该是一个ImageButton。

已经定义了ImageButton:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    app:srcCompat="@drawable/ic_navigation_black_24dp" />

然后你会得到以下输出：

如果你想要更大的涟漪效果，你必须改变视图的大小：而不是wrap_content，比如说，100dp：

【讨论】：

你可以为你的视图添加背景颜色（这样我可以看到它的边界）并将波纹用作前景吗？
为此我打开了“显示布局边界”开发者选项。您在 gif 中看到的正方形是视图的边界。

【解决方案2】：

在drawable中定义ripple_effect_circle.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="#BDBDBD"
    >

    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <size
                android:width="60dp"
                android:height="60dp"/>
            <solid android:color="#BDBDBD" />
        </shape>
    </item>

</ripple>

在布局中定义ImageView

    <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_margin="60dp"
            android:src="@drawable/ripple_effect_circle"
            android:background="@drawable/your_round_image"
            />

【讨论】：

【解决方案3】：

只需从使用ImageView 的前景更改为背景：android:background="?selectableItemBackgroundBorderless"。然后您应该会在视图边界之外看到波纹渲染。

【讨论】：

【解决方案4】：

您可以使用库 https://github.com/hdodenhof/CircleImageView 来解决此问题。

使用上面的库创建圆形 Imageview，它会产生你所期望的涟漪效果。

【讨论】：

【解决方案5】：

一件事是您将ImageView 的高度限制为46dp 将padding 添加到ImageView 而不是父布局

【讨论】：

【解决方案6】：

做layerlist drawable xml 使第一个项目形状为圆形然后添加项目 selectableItemBackgroundBorderless 它会正常工作

【讨论】：