实现Material Design风格的Button

2019-11-09 16:53:56

字体：大中小

来源：转载

供稿：网友

简介

The AppCompat Support Library 定义了几个很有用的style,这些Style是基于Widget.AppCompat.Button style实现的。当使用 AppCompat theme主题的时候，Widget.AppCompat.Button style 是默认使用到所有的button上面的。这些样式保证了Button看起来都是一样的，并且都是遵守了material design风格。

在这种情况下，最接近的颜色是粉色。

1.最常见的Button效果

这里写图片描述

Simple Button: @style/Widget.AppCompat.Button

第二个样式

这里写图片描述

Colored Button: @style/Widget.AppCompat.Button.Colored The Widget.AppCompat.Button.Colored 继承了 Widget.AppCompat.Button style并且根据你选择的主题应用最接近的颜色。

2.定制Button的背景颜色

如果你想定制背景颜色，你可以定制一个主题，使用android:theme这个属性，继承自ThemeOverlay主题。

<Button style="@style/Widget.AppCompat.Button.Colored" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:theme="@style/MyButtonTheme"/> defining the following theme:  <style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light"> <item name="colorAccent">@color/my_color</item> </style>

3.Borderless Button

这里写图片描述

代码示例

Borderless Button: @style/Widget.AppCompat.Button.Borderless<Button style="@style/Widget.AppCompat.Button.Borderless" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp" android:text="@string/borderless_button"/>

Borderless Colored Button

这里写图片描述

@style/Widget.AppCompat.Button.Borderless.Colored<Button style="@style/Widget.AppCompat.Button.Borderless.Colored" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp" android:text="@string/borderless_colored_button"/>