安卓按钮在棒棒糖版本上会产生涟漪效果，在较早的版本上则会高亮显示。

Question

嗨，我有点困惑，想知道是否有人可以指引我正确的方向。

前往Lollipop和Pre-Lollipop上的Google Play商店使用

你会发现在lollipop上，可选择的视图具有波纹效果。

而在pre-lollipop上，则会有高亮效果。

这是怎么做到的呢？

目前，在我的应用程序中，我有一个 drawable-v21 目录，其中包含此选择器

它基本上在我的背景上面做了涟漪效果。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask" android:drawable="@android:color/white"/>
    <item android:drawable="@color/colorAccentWith92PercentOpacity"/>
</ripple>

然而，其他答案建议使用

android:background="?attr/selectableItemBackground"

在lollipop之前实现高亮效果，但这会覆盖我的背景。我该如何在当前背景上设置它？

此外，我是否需要为应用程序中的每种按钮创建涟漪可绘制（在drawble-v21中）？我如何为recycler视图项执行此操作？ 这个问题的独特之处 我不想在lollipop之前使用涟漪，我想知道开发人员如何有效地使他们的按钮在lollipop上产生涟漪，在早期版本上产生高光效果。

- Ersen Osman

---

可能是如何为Lollipop之前的版本创建涟漪效果的重复问题。 - Mariano Zorrilla

不，这不是重复的问题，因为它是一个不同的问题。请回复。 - Ersen Osman

Answer 1

您可以按照以下方法设置视图的背景：

android:background="@drawable/touch_selector"

创建一个没有水波纹效果的版本，适用于Android 5.0以下的设备： drawable/touch_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
    <item android:state_pressed="true"
        android:drawable="@color/grey"
        />

    <!-- For ListView in SINGLE_CHOICE_MODE, it flags the active row -->
    <item android:state_activated="true"
          android:drawable="@color/light_green" />

    <!-- Default, "just hangin' out" state. -->
    <item android:drawable="@android:color/transparent" />
</selector>

现在对于棒棒糖（Android 5.0）及以上版本，同样进行涟漪效果设置：
创建drawable-v21/touch_selector.xml文件

它的外观将会是这样：

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

    <!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
    <item android:state_pressed="true">
        <ripple android:color="@color/grey" />
    </item>

    <!-- For ListView, when the view is "activated".  In SINGLE_CHOICE_MODE, it flags the active row -->
    <item android:state_activated="true"
          android:drawable="@color/light_green" />

    <!-- Default, "just hangin' out" state. -->
    <item android:drawable="@android:color/transparent" />
</selector>

就是这样了。
现在你在棒棒糖及以上设备上有了涟漪效果，在棒棒糖以下设备上有了高亮效果。

编辑：
如果在ListView中使用，请将上面创建的内容用作ListView项的背景。

- Leonid Ustenko

Answer 2

选项1

在您的主题中定义colorControlHighlight，只要您使用默认的appcompat-v7按钮，高亮颜色就应该可以直接使用。

选项2

这是一个示例，我使用了一些交叉淡入淡出动画和阴影来回退Material按钮样式，而不使用外部库。希望它能帮助您。

假设按钮将是白色文本在深色背景上(@color/control_normal)，并带有浅色高亮：

values/themes.xml

在这里，我将覆盖整个主题的默认按钮样式：

<style name="AppTheme" parent="Base.AppTheme">
    <item name="buttonStyle">@style/Widget.AppTheme.Button</item>
</style>

values/integers.xml

<!-- Some numbers pulled from material design. -->
<integer name="button_pressed_animation_duration">100</integer>
<integer name="button_pressed_animation_delay">100</integer>

values-v21/styles.xml

这是适用于Lollipop的按钮样式，它可以理解主题覆盖并默认使用涟漪效果。我们只需要使用适当的颜色来着色涟漪即可：

<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
    <!-- On Lollipop you can define theme via style. -->
    <item name="android:theme">@style/ThemeOverlay.AppTheme.Button</item>
</style>

<style name="ThemeOverlay.AppTheme.Button" parent="ThemeOverlay.AppCompat.Dark">
    <!-- The magic is done here. -->
    <item name="colorButtonNormal">@color/control_normal</item>
</style>

values/styles.xml

在Lollipop之前，这变得棘手了。

<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
    <item name="android:background">@drawable/button_normal_background</item>
</style>

drawable/button_normal_background.xml

这是整个按钮的复合可绘制对象。

<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="@dimen/abc_button_inset_horizontal_material"
    android:insetTop="@dimen/abc_button_inset_vertical_material"
    android:insetRight="@dimen/abc_button_inset_horizontal_material"
    android:insetBottom="@dimen/abc_button_inset_vertical_material">
    <layer-list>
        <!-- Shadow. -->
        <item
            android:drawable="@drawable/button_shadow"
            android:top="-0dp"
            android:bottom="-1dp"
            android:left="-0dp"
            android:right="-0dp"/>
        <item
            android:drawable="@drawable/button_shadow_pressable"
            android:top="-0dp"
            android:bottom="-3dp"
            android:left="-1dp"
            android:right="-1dp"/>
        <!-- Background. -->
        <item android:drawable="@drawable/button_shape_normal"/>
        <!-- Highlight. -->
        <item>
            <selector
                android:enterFadeDuration="@integer/button_pressed_animation_duration"
                android:exitFadeDuration="@integer/button_pressed_animation_duration">

                <item
                    android:drawable="@drawable/button_shape_highlight"
                    android:state_focused="true"
                    android:state_enabled="true"/>
                <item
                    android:drawable="@drawable/button_shape_highlight"
                    android:state_pressed="true"
                    android:state_enabled="true"/>
                <item
                    android:drawable="@drawable/button_shape_highlight"
                    android:state_selected="true"
                    android:state_enabled="true"/>
                <item android:drawable="@android:color/transparent"/>
            </selector>
        </item>
        <!-- Inner padding. -->
        <item android:drawable="@drawable/button_padding"/>
    </layer-list>
</inset>

drawable/button_shadow.xml

这是未被按下时的阴影效果。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="3dp"
        android:bottomRightRadius="3dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp"/>
  <solid android:color="#2000"/>
</shape>

drawable/button_shadow_pressable.xml

这是在按钮被按下时的扩展阴影。当你近距离观察时，效果可能会显得粗糙，但从远处看已经足够好了。

<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="UnusedAttribute"
    android:enterFadeDuration="@integer/button_pressed_animation_duration"
    android:exitFadeDuration="@integer/button_pressed_animation_duration">
    <item
        android:state_pressed="true"
        android:state_enabled="true">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="3dp"
                android:topRightRadius="3dp"/>
            <solid android:color="#20000000"/>
        </shape>
    </item>
    <item android:drawable="@android:color/transparent"/>
</selector>

drawable/button_shape_normal.xml

这是主按钮的形状。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="@dimen/abc_control_corner_material"/>
    <solid android:color="@color/control_normal"/>
</shape>

drawable/button_padding.xml

这只是为了与Material按钮完全一致而添加的额外填充。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <padding
        android:left="@dimen/abc_button_padding_horizontal_material"
        android:top="@dimen/abc_button_padding_vertical_material"
        android:right="@dimen/abc_button_padding_horizontal_material"
        android:bottom="@dimen/abc_button_padding_vertical_material"/>
</shape>

drawable/button_shape_highlight.xml

这是高亮按钮形状，绘制在正常按钮形状之上。

它与普通按钮形状相比，具有更醒目的外观，用于突出显示用户界面中的重要操作。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="@dimen/abc_control_corner_material"/>
    <solid android:color="@color/control_highlight"/>
</shape>

@color/control_highlight可以指向：

• @color/ripple_material_dark - 半透明白色，用于深色背景上
• @color/ripple_material_light - 半透明黑色，用于浅色背景上
• 您定义的任何其他颜色。

- Eugen Pechanec

---

这看起来很有希望，我想试一下，但是 button_shape_highlight 没有找到？ - Reuben Scratton

@ReubenScratton 谢谢，已修复。 - Eugen Pechanec