棒棒糖上的Android按钮波纹和棒棒糖前的亮点

Question

嗨,所以我很困惑,想知道是否有人能指出我正确的方向.

在Lollipop和pre-lollipop上使用Google Play商店

您将在棒棒糖上看到可选择的视图具有涟漪效应.

在pre-lollipo上,你会获得这种高光效果.

这是怎么做到的？

在我的应用程序中,我有一个包含此选择器的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>

但是,其他答案说要使用

机器人: "ATTR/selectableItemBackground" 背景=

要获得前棒棒糖的高光效果,但这会覆盖我的背景.我怎么能在我目前的背景之上设置它？

我还需要为我的应用程序中的每种按钮创建一个波纹drawable(在drawble-v21中)吗？我如何为回收商查看项目执行此操作？

是什么让这个问题与众不同

我不想要预先棒棒糖的涟漪我问的是开发者如何有效地使他们的按钮在棒棒糖上产生波纹并且对前的高光效果

Answer 1

选项1

colorControlHighlight在您的主题中定义,只要您使用默认的appcompat-v7按钮,突出显示颜色应该是开箱即用的.

选项2

这是一个示例,说明如何使用一些交叉渐变动画和阴影向后移植"材质"按钮样式,而不使用外部库.可以帮助你.

如果按钮将是深色背景上的白色文本(@color/control_normal),并且高亮显示:

值/的themes.xml

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

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

值/ integers.xml

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

值-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>

价值观/ styles.xml

在棒棒糖之前它变得棘手.

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

绘制/ 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>

绘制/ 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>

绘制/ 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>

绘制/ 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>

绘制/ button_padding.xml

只需额外填充即可与"材质"按钮完全一致.

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

绘制/ 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 - 半透明黑色,用于浅色背景
• 您定义的任何其他颜色.

Answer 2

您可以通过以下方式设置视图的背景:

android:background="@drawable/touch_selector"

为pre lollipop创建一个没有涟漪的版本: 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>

现在做了棒棒糖和上面相同,但连锁反应:
克里特绘制-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项目的背景