背景色按钮的材质效果 [英] Material effect on button with background color

问题描述

我正在使用 Android v21 支持库.

I am using Android v21 support library.

我创建了一个带有自定义背景颜色的按钮.当我使用背景颜色时，诸如波纹、显示等 Material 设计效果消失了(点击时的高程除外).

I have created a button with custom background color. The Material design effects like ripple, reveal are gone (except the elevation on click) when I use the back ground color.

 <Button
 style="?android:attr/buttonStyleSmall"
 android:background="?attr/colorPrimary"
 android:textColor="@color/white"
 android:textAllCaps="true"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 />

下面是一个普通的按钮，效果很好.

The following is a normal button and the effects are working just fine.

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textAllCaps="true"
 android:text="Button1"
/>

推荐答案

当您使用 android:background 时，您正在用空白颜色替换按钮的大部分样式和外观.

When you use android:background, you are replacing much of the styling and look and feel of a button with a blank color.

更新:截至 23.0.0 版AppCompat 中有一个新的 Widget.AppCompat.Button.Colored 样式，它使用您主题的 colorButtonNormal禁用颜色和启用颜色的 colorAccent.

Update: As of the version 23.0.0 release of AppCompat, there is a new Widget.AppCompat.Button.Colored style which uses your theme's colorButtonNormal for the disabled color and colorAccent for the enabled color.

这允许您通过

<Button
  ...
  style="@style/Widget.AppCompat.Button.Colored" />

如果您需要自定义 colorButtonNormal 或 colorAccent，您可以使用 ThemeOverlay，如 此专业提示 和按钮上的android:theme.

If you need a custom colorButtonNormal or colorAccent, you can use a ThemeOverlay as explained in this pro-tip and android:theme on the button.

上一个答案

您可以在 v21 目录中使用 drawable 作为您的背景，例如:

You can use a drawable in your v21 directory for your background such as:

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

这将确保您的背景颜色是 ?attr/colorPrimary 并使用默认的 ?attr/colorControlHighlight(您也可以在主题中设置)具有默认的波纹动画如果你愿意).

This will ensure your background color is ?attr/colorPrimary and has the default ripple animation using the default ?attr/colorControlHighlight (which you can also set in your theme if you'd like).

注意:您必须为低于 v21 的版本创建自定义选择器:

Note: you'll have to create a custom selector for less than v21:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/primaryPressed" android:state_pressed="true"/>
    <item android:drawable="@color/primaryFocused" android:state_focused="true"/>
    <item android:drawable="@color/primary"/>
</selector>

假设您有一些想要用于默认、按下和聚焦状态的颜色.就我个人而言，我在被选中的过程中截取了一个涟漪的截图，并从中拉出了主要/专注状态.

Assuming you have some colors you'd like for the default, pressed, and focused state. Personally, I took a screenshot of a ripple midway through being selected and pulled the primary/focused state out of that.

这篇关于背景色按钮的材质效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！