ImageView上的涟漪效果

Question

为了描述我的问题，我创建了一个小示例。

我有一个包含图像视图和文本视图的线性布局。对于线性布局，我设置了涟漪可绘制作为背景。但是当我单击或长按线性布局时，涟漪动画会显示在图像视图下方。如何在图像视图上方显示动画？

main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/ripple"
        android:clickable="true"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:src="@mipmap/index" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is ripple test"
            android:textColor="#FF00FF00" />
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

drawable-v21/ripple.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FFFF0000">   
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF000000"/>
        </shape>
    </item>    
</ripple>

可绘制/水波纹.xml：

<?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="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FFFF0000" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FFFF0000" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FF000000" />
        </shape>
    </item>    
</selector>

现在的外观截图：

- Anton111111

---

请查看此链接：https://dev59.com/Ul0Z5IYBdhLWcg3wfgYR - Rajakumar

尝试为ImageView添加android:background="@null"。 - Ajay Sivan

太棒了！这两个解决方案都适用于我。 - Anton111111

@Ajay，你能发表你的答案，我会将其标记为解决方案。 - Anton111111

我已经添加了答案。 - Ajay Sivan

Answer 1

把波纹效果添加到这里。

android:foreground="?android:attr/selectableItemBackground"

基于这个答案 https://dev59.com/Ul0Z5IYBdhLWcg3wfgYR#35753159

- Ultimo_m

---

这个的最低SDK版本是23。 - netpork

@netpork 不适用于FrameLayout。对于FrameLayout，前景属性至少从API 16开始就可以使用了（在模拟器上测试过）。 - YawaraNes

Answer 2

在 ImageView 中添加 android:background="@null"。

- Ajay Sivan

Answer 3

如果您的应用程序需要在API < 23上运行，则无法在除了FrameLayout之外的视图上使用foreground属性，这意味着在视图树层次结构中添加另一个[无用]级别。

另一种解决方案是使用<ripple>将图像包装起来，将其设置为您的ImageView的background，并使用tint和tintMode来“隐藏”src图像，以便可见具有水波纹效果的背景图像。

<!-- In your layout file -->

<ImageView
    android:adjustViewBounds="true"
    android:background="@drawable/image_with_ripple"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/image"
    android:tint="@android:color/transparent"
    android:tintMode="src_in" />

<!-- drawable/image_with_ripple.xml -->

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?colorControlHighlight">

    <item android:drawable="@drawable/image" />

</ripple>

这不仅适用于API 21+，而且如果您的图像具有圆角或其他非矩形形状（例如星形或心形图标），涟漪将保持在其界限内，而不是填充视图的矩形边界，这在某些情况下会使外观更佳。

参见此中等文章以查看动画GIF，了解此技术与使用<FrameLayout>或foreground属性相比的效果。

- Mickäel A.

---

这相当令人印象深刻。你有没有想过如何使用通过Picasso加载的图像来实现这一点？ - Matt Mc

@MattMc 我认为你需要子类化 <ImageView>，这样当它的 src 改变时，它也会自动更新其背景 <ripple> 项的可绘制对象（参见 View#getBackground()）。这可能是最简单且易于维护的解决方案。不过我还没有测试过。 - Mickäel A.

Answer 4

解决 API < 21 的问题

 <ImageView
            android:id="@+id/favorite_season"
            style="?android:attr/borderlessButtonStyle"
            android:background="?android:attr/selectableItemBackground"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_margin="22dp"
            android:clickable="true"
            android:focusable="true"
            android:src="@drawable/ic_star"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

- Icaro

Answer 5

在该ImageView中，只需将这两行代码用作属性即可。

android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"

- Stackoverflower