实现Material Design风格的Button

作者: 牧童遥指2000 | 来源:发表于2017-02-08 16:35 被阅读217次

    实现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效果##

    这里写图片描述

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

    第二个样式##

    这里写图片描述

    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

    这里写图片描述

    代码示例##

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

    帮朋友招聘职位如下##

    普照天星【Java开发工程师】20-30k
    http://www.jianshu.com/p/8b52751360df
    产品经理20-30k
    http://www.jianshu.com/p/cb0ac7a00796

    我的微信二维码如下##

    这里写图片描述

    微信订阅号二维码如下:##

    这里写图片描述

    相关文章

      网友评论

      本文标题:实现Material Design风格的Button

      本文链接:https://www.haomeiwen.com/subject/cmxbittx.html