imageview 上的波纹效果

Posted 2023-04-14

【中文标题】imageview 上的波纹效果

【英文标题】：Ripple effect over imageview

【发布时间】：2017-05-12 20:16:21

【问题描述】：

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

我有带有 imageview 和 textview 的线性布局。对于线性布局，我将可绘制的波纹设置为背景。但是，当我单击或长按图像视图下的线性布局波纹动画时。如何在 imageview 上显示动画？

ma​​in.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_
    android:layout_>

    <LinearLayout
        android:id="@+id/linear"
        android:layout_
        android:layout_
        android:background="@drawable/ripple"
        android:clickable="true"
        android:orientation="vertical">

        <ImageView
            android:layout_
            android:layout_
            android:src="@mipmap/index" />

        <TextView
            android:layout_
            android:layout_
            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>

drawable/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>

截图现在的样子：

【问题讨论】：

查看此链接：***.com/questions/31393684/…

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

太棒了！两种解决方案都适合我。

@Ajay，你能发布你的答案吗？我会把它标记为解决方案。

我已经添加了答案。

【参考方案1】：

像这样添加波纹

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

基于这个答案https://***.com/a/35753159/2736039

【讨论】：

最小 SDK 为 23

@netpork 不适用于 FrameLayouts。对于 FrameLayout，foreground 属性至少从 API 16 中可用，没有问题（在模拟器上测试）。

【参考方案2】：

为ImageView添加android:background="@null"

【参考方案3】：

如果您的应用需要在 API FrameLayout 以外的视图上使用 foreground 属性，这意味着在视图树层次结构中添加另一个 [无用] 级别。

另一种解决方案是用<ripple> 包装您的图像，将其设置为您的ImageView 的background，然后使用tint 和tintMode 来“隐藏” src 图像，因此带有波纹的背景图像可见。

<!-- In your layout file -->

<ImageView
    android:adjustViewBounds="true"
    android:background="@drawable/image_with_ripple"
    android:layout_
    android:layout_
    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+，而且如果您的图像有圆角 - 或者是另一种类型的非矩形形状，如星形或心形图标 - 波纹会保持在其边界内，而不是填充视图的矩形边界，这在某些情况下可以提供更好的外观。

请参阅this Medium article 获取动画 GIF，了解此技术与使用 <FrameLayout> 或 foreground 属性的比较。

【讨论】：

这令人印象深刻。知道如何使用通过毕加索加载的图像来实现这一点吗？

@MattMc 我认为你必须继承<ImageView> 所以当它的src 改变时，它也会自动更新它的背景<ripple> 项目的drawable（见View#getBackground()）。它可能是最容易使用和维护的解决方案。不过我还没有测试过。

【参考方案4】：

解决 API

 <ImageView
            android:id="@+id/favorite_season"
            style="?android:attr/borderlessButtonStyle"
            android:background="?android:attr/selectableItemBackground"
            android:layout_
            android:layout_
            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" />

【参考方案5】：

简单地将这两行用作该 ImageView 中的属性。

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