安卓材料设计按钮风格设计

今天，我们将深入探讨Material Design中的Android按钮，并开发一个展示按钮不同样式的应用程序。

安卓材料设计按钮

Android中的按钮用于与应用程序进行交互。引入材料设计后，带来了许多不同类型的按钮样式，这些样式也适用于Lollipop之前的设备。布局中的基本按钮定义如下：

<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.Olivia.androidbuttonstyling.MainActivity">

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

</LinearLayout>

<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 SDK > 21 时，你也可以使用 android:backgroundTint 属性来设置按钮的着色器颜色。

Android按钮样式

在Material Design中，按钮大致分为以下两个类别。

• Raised Buttons – These are the default ones.
• Flat Buttons – These are borderless. They are typically used in dialogs

下面是可用的主要按钮样式。

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

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

最后两个风格属于平面按钮类别。

安卓彩色按钮

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

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

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

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

注意：我们需要将按钮的样式设置为父元素为彩色。以下代码是为具有已设置主题的xml中的按钮而编写的。

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