在 Image View 上设置波纹效果

Question

得到以下图像视图：

<ImageView
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax" 
    android:clickable="true"
    android:focusable="true"
    android:background="?android:attr/selectableItemBackground"/>

如果我不为图像视图设置位图，Ripple 效果很好。但是一旦我设置了这样的位图，涟漪效果就消失了：

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
iv.setImageBitmap(myBitmap);

这是我的ripple.xml：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
                  android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

我猜位图隐藏了涟漪效果，我怎样才能让它可见？已经试过了：

1. 将 android:background 更改为 android:foreground，这不起作用。
2. 在此之上配置另一个透明 ImageView，但由于它是透明的，因此未显示波纹。

有什么想法吗？我也看到 Lollipop Contacts 也这样做了。

Answer 1

我有一个图片库（使用 RecyclerView 和 GridLayoutManager 构建）。图像是使用毕加索设置的。为了给图像添加波纹我用FrameLayout 包裹了ImageView。项目布局为：

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:foreground="@drawable/ripple"
    android:clickable="true"
    android:focusable="true"
    >
    <ImageView
        android:id="@+id/grid_item_imageView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:scaleType="centerInside"
        />
</FrameLayout>

注意 android:foreground。它与android:background 不同。我试过没有android:clickable="true"和android:focusable="true"，它也工作，但它没有伤害。

然后在res/drawable中添加一个ripple.xmldrawable：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#7FF5AC8E" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

请注意，当项目被选中时，这会在图像顶部显示半透明颜色（适用于版本低于 Android 5.0 的设备）。如果你不想要它，你可以删除它。

然后将带有波纹的ripple.xmldrawable 添加到res/drawable-v21：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/coral">
</ripple>

您可以使用默认的涟漪效果来代替自定义的ripple.xml，但在图像顶部确实很难看到，因为它是灰色的：

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

Answer 2

您可以实现它，将可绘制对象包装在 RippleDrawable 中。

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
Drawable image = .... // your image.

RippleDrawable rippledImage = new   
         RippleDrawable(ColorStateList.valueOf(rippleColor), image, null);
iv.setImageDrawable(rippledImage)

;

Answer 3

对于像我这样的懒人：

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

并以您的风格自定义波纹颜色。

在 values/styles.xml 中

<style name="colorControlHighlight_blue">
   <item name="colorControlHighlight">@color/main_blue_alpha26</item>
</style>

然后，在 onCreateView() 膨胀之前的片段中：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
   View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
   return view;
}

Answer 4

用圆形效果试试这个：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorTema3"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPurpleBarra" />
    </shape>
</item>
<item
    android:id="@android:id/background"
    android:drawable="@android:color/transparent" />

Answer 5

我参加聚会有点晚了，但我确实发现在每个版本的 android for TextView 中工作

只需将其添加到您的文本视图中

android:theme="@style/ClickableView"

并在您的样式文件中添加：

<style name="ClickableView">
    <item name="colorControlHighlight">@android:color/white</item>
    <item name="android:background">?selectableItemBackground</item>
</style>