實現(xiàn)Material Design風(fēng)格的Button

2019-11-09 15:43:08

字體：大中小

供稿：網(wǎng)友

簡介

The AppCompat Support Library 定義了幾個很有用的style,這些Style是基于Widget.AppCompat.Button style實現(xiàn)的。當(dāng)使用 AppCompat theme主題的時候，Widget.AppCompat.Button style 是默認使用到所有的button上面的。這些樣式保證了Button看起來都是一樣的，并且都是遵守了material design風(fēng)格。

在這種情況下，最接近的顏色是粉色。

1.最常見的Button效果

這里寫圖片描述

Simple Button: @style/Widget.AppCompat.Button

第二個樣式

這里寫圖片描述

Colored Button: @style/Widget.AppCompat.Button.Colored The Widget.AppCompat.Button.Colored 繼承了 Widget.AppCompat.Button style并且根據(jù)你選擇的主題應(yīng)用最接近的顏色。

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