实现Material Design风格的Button

实现Material Design风格的Button

简介

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

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

1.最常见的Button效果##

《实现Material Design风格的Button》 这里写图片描述

Simple Button: @style/Widget.AppCompat.Button


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

第二个样式##

《实现Material Design风格的Button》 这里写图片描述

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


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

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:

 <!-- res/values/themes.xml -->
  <style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light"> 
      <item name="colorAccent">@color/my_color</item> 
 </style>

3.Borderless Button

《实现Material Design风格的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##

《实现Material Design风格的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"/>


    原文作者:牧童遥指2000
    原文地址: https://www.jianshu.com/p/607d541879e0
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞