腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >Android按钮在棒棒糖上，在前棒棒糖上突出显示

问Android按钮在棒棒糖上，在前棒棒糖上突出显示
EN

Stack Overflow用户

提问于 2015-09-15 05:22:13

回答 2查看 6.9K关注 0票数 7

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

使用Google Play Store on棒棒糖和预棒棒糖。

你会在棒棒糖上看到可选择的视图会产生连锁反应。

在前罗利波，你会得到这个突出效果。

这是怎么做的？

目前，在我的应用程序中，我有一个可绘制的-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“

以获得前棒棒糖的突出效果，但这压倒了我的背景。我怎么能把这个放在我目前的背景之上呢？

另外，我是否必须为我的应用程序中的每一种按钮创建一个纹章式的绘图(在drable-v21中)？我该如何为回收者查看物品呢？

是什么使这个问题成为唯一的

我不想要棒棒糖前的波纹，我想问的是，开发人员是如何有效地让他们的按钮在棒棒糖上做波纹的，而高光效应是如何在pre上实现的。

android

rippledrawable

音视频低代码开发方案最快1天上线

推出 TUICallKit 和 TUIRoomKit 低代码集成方案，最快1天接入在线教育、语聊房、在线客服等应用

回答 2

Stack Overflow用户

发布于 2015-09-15 06:07:41

备选案文1

在你的主题中定义colorControlHighlight，只要你使用默认的appcompat-v7按钮，突出显示的颜色就会显示出来。

选项2

这是一个例子，说明我如何在不使用外部库的情况下支持带有交叉淡入动画和阴影的材质按钮样式。希望它能在你的路上帮助你。

如果该按钮为白色文本，背景为暗背景(@color/control_normal)，亮亮：

值/mees.xml

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

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

值/INTERGERs.xml

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

值-v21/styes.xml

按钮样式的棒棒糖，了解主题覆盖和使用波纹默认。让它用适当的油漆把波纹涂上颜色：

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

值/styes.xml

在棒棒糖之前就很棘手了。

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

可拖/纽扣_法线_背景.

Thi是整个按钮的复合绘图。

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

可拖/纽扣_阴影

这是不按下的影子。

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

可拖/纽扣阴影_shadow able.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>

可拖/按钮形状_正常化

这是主按钮的形状。

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

可拖/按钮_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>

可拖/纽扣_shape_FLUELIT.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 -半透明黑色，用于浅色背景
你定义的任何其他颜色。

票数 6

Stack Overflow用户

发布于 2016-04-05 04:48:10

您可以这样设置视图的背景：

android:background="@drawable/touch_selector"

为预棒棒糖创建一个没有纹章的版本：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>

现在，对棒棒糖和以上也要做同样的事情，但会产生连锁反应：

克里特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>