10个提升UI体验的安卓材料设计按钮设计方法

2 年 ago

科, 雅

2 minutes

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

安卓材料设计按钮

安卓系统中的按钮用于与应用程序进行交互。引入材料设计后，带来了许多不同类型的按钮样式，这些样式也适用于棒棒糖（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="普通按钮"/>

</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="背景颜色按钮"/>

当安卓SDK版本大于21时，你也可以使用 android:backgroundTint 属性来设置按钮的着色颜色。

安卓按钮样式

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

凸起按钮 – 这些是默认的按钮样式。
扁平按钮 – 这些是无边框的按钮。它们通常用于对话框中。

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

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="彩色按钮"
        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属性。

安卓扁平按钮

扁平按钮可以是无边框或无边框彩色。无色意味着文本颜色应该是有颜色的，而不是背景色。在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="无边框按钮" />

    <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="自定义无边框按钮" />

#UI设计 #安卓 #按钮设计 #材料设计 #移动应用开发