今天，我们将深入研究Material Design中的Android Buttons，并开发一个应用程序来展示Button的不同样式。

Android Material Design按钮

Android中的按钮用于与应用程序交流我们的操作。
Material Design的引入带来了许多不同类型的Button样式，它们也与之前的Lollipop设备兼容。

布局中的基本Button定义如下：

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:gravity="center"
  tools:context="com.theitroad.androidbuttonstyling.MainActivity">

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="NORMAL BUTTON"

</LinearLayout>

上面的Button具有默认样式：Widget.AppCompat.Button

要在按钮上设置其他样式，我们使用ʻandroid：background`属性。

<Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      android:textColor="@android:color/white"
      android:layout_margin="12dp"
      android:text="BACKGROUND COLOR BUTTON"

以上两个按钮的输出如下所示：

可见，设置背景将消除单击效果。
尽管效果是风格本身的一部分。

因此，我们可以像在Android Button Selector Tutorial中那样创建可绘制的选择器，或者另一种更好的方法是设置样式。
我们将在下面的部分中介绍。

android：backgroundTint属性也可以用于设置Button的颜色。
虽然只有在Android SDK> 21时才能使用。

Android按钮样式

在材料设计中，按钮大致分为以下两个类别。

• 加高按钮-这些是默认按钮。

• 平面按钮–这些是无边界的。
  它们通常用于对话框中

以下是可用的主要Button样式。

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

style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"

最后两种样式属于"平面按钮"类别。

Android彩色按钮

我们可以通过以下方式在按钮上设置默认的彩色按钮样式：

<Button
      style="@style/Widget.AppCompat.Button.Colored"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="12dp"
      android:text="COLORED BUTTON"
      android:padding="8dp" 

这将给出以下输出：

为什么是粉红色？彩色按钮采用来自styles.xml文件中的colorAccent属性的颜色。

将colorAccent的颜色更改为您选择的一种，以获得所需的背景色。

现在，为按钮设置样式有两个重要的属性：

colorButtonNormal`：按钮的正常颜色。

colorControlHighlight：按下按钮时的波纹颜色。

在styles.xml的AppTheme标记内进行设置将产生以下输出。

<resources>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
      <!-- Customize your theme here. -->
      <item name="colorPrimary">@color/colorPrimary</item>
      <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
      <item name="colorButtonNormal">@color/myBlue</item>
      <item name="colorControlHighlight">@color/myWhite</item>

  </style>

</resources>

我们在" colors.xml"调色板中添加了一些颜色，如下所示。

我们删除了" colorAccent"，但ColoredButton仍显示不同的颜色。

为什么？

应用程序主题中的" colorButtonNormal"和" colorControlHighlight"仅适用于具有默认样式的按钮。
它适用于应用程序中具有默认样式的所有按钮。

因此，我们为ColoredButton创建一个自定义主题。
在styles.xml文件中添加以下内容：

<style name="PrimaryColoredButton" parent="Base.Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@color/myPeach</item>
      <item name="colorControlHighlight">@color/myRed</item>
</style>

注意：我们需要将按钮的样式设置为"色"作为父项。

以下代码用于设置了主题的xml中的Button。

<style name="PrimaryColoredButton" parent="Base.Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@color/myPeach</item>
      <item name="colorControlHighlight">@color/myRed</item>
</style>

输出如下所示：

要更改应用程序的默认按钮样式，我们可以在styles.xml中使用AppTheme样式中的android：buttonStyle属性。

这会将默认的彩色按钮设置为全部。
凌驾一切。

Android平面按钮

平面按钮可以是无边界或者无边界的。

无边距。
无色表示文本颜色应为彩色。
不是背景。

在styles.xml文件中添加以下样式

<style name="FlatButton" parent="Theme.AppCompat.Light">
      <item name="android:textColor">@color/myPeach</item>
      <item name="colorControlHighlight">@color/myRed</item>
</style>

现在，在xml布局中添加以下按钮。

<Button
      style="@style/Widget.AppCompat.Button.Borderless"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="12dp"
      android:padding="8dp"
      android:text="BORDERLESS BUTTON" 

  <Button
      android:theme="@style/FlatButton"
      style="@style/Widget.AppCompat.Button.Borderless.Colored"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="12dp"
      android:padding="8dp"
      android:text="BORDERLESS BUTTON STYLED" 

上述应用程序的输出如下。

尽管主题中存在textColor属性，但样式为无边距的Button并未从主题中设置文本颜色。
请注意，样式为Borderless.Colored的Button具有从主题设置的文本颜色。