如何为Android视图添加Material Design效果？

Question

我正在使用AppCompat主题为Lollipop之前的版本提供材料主题。当我将图像资源设置为导航图标或Toolbar中的菜单按钮时，单击它们会产生涟漪效果（动态效果）。但是，当我尝试在工具栏内部放置相同的图标时，它们就像普通视图一样，点击时没有任何动态效果。

这些涟漪是如何创建的？Android能够在我提供的所有可绘制对象上创建涟漪吗？我如何使涟漪出现在我在ImageView中使用的图像资源上？

- Ashwin

Answer 1

您可以通过在XML布局中设置图像的背景来创建涟漪效果。
android:background="?android:attr/selectableItemBackground"

注意：本文中的“涟漪效果”指的是Android应用程序中的触摸反馈效果。

- Kartheek

---

这样创建涟漪，但它们会扩散到一个矩形区域。菜单图标和导航图标中的涟漪覆盖了一个圆形区域。我希望涟漪以圆形结束。那看起来更好。我该怎么做呢？ - Ashwin

当我将同一张图片作为菜单图标时，它会提供一个覆盖圆形的涟漪效果。但是当我给可选择项背景属性设置selectableItemBackground时，涟漪会覆盖一个矩形区域。因此，这与图像的形状无关。 - Ashwin

内部，他们可以使用着色器来将图像视图显示为圆形格式。 - Kartheek

您可以添加包含颜色和涟漪可绘制的级别列表可绘制。 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/holo_red_dark" /> <item android:drawable="?android:attr/selectableItemBackground" /> </layer-list> - Kartheek

我认为支持库不支持Ripple Drawable。 - Ashwin

Answer 2

涟漪基本上是RippleDrawable类的一个实例。您可以使用xml和<ripple>标记创建涟漪。最简单的涟漪可绘制对象如下所示：

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

你可以在这里找到更多信息：http://blog.stylingandroid.com/ripples-part-1/

- Zielony

---

我认为支持库不支持Ripple。 - Ashwin

Answer 3

你可以使用涟漪效果来实现。

在 Android API 9+ 中实现 Material Design 的涟漪效果。

该库可在 Maven Central 上获得，你可以通过 Gradle 找到它，请查找。

  dependencies {
       compile 'com.github.traex.rippleeffect:library:1.3'
  }

用法

RippleView

在XML布局文件中声明一个RippleView，内容可以是ImageView或其他。

  <com.andexert.library.RippleView
       android:id="@+id/more"
       android:layout_width="?android:actionBarSize"
       android:layout_height="?android:actionBarSize"
       android:layout_toLeftOf="@+id/more2"
       android:layout_margin="5dp"
       rv_centered="true">

    <ImageView
       android:layout_width="?android:actionBarSize"
       android:layout_height="?android:actionBarSize"
       android:src="@android:drawable/ic_menu_edit"
       android:layout_centerInParent="true"
       android:padding="10dp"
       android:background="@android:color/holo_blue_dark"/>

  </com.andexert.library.RippleView>

如果你想知道 Ripple 效果何时完成，你可以在你的视图上设置一个监听器。

 rippleView.setOnRippleCompleteListener(new  RippleView.OnRippleCompleteListener() {

   @Override
   public void onComplete(RippleView rippleView) {
       Log.d("Sample", "Ripple completed");
   }

 });

有关代码和更多信息，请参见此链接：

https://github.com/traex/RippleEffect

对于一些更多的设计：

https://github.com/wasabeef/awesome-android-ui

- Joseph Mekwan