Flat Button简单制作

Flat Button简单制作  

创建 colors.xml 文件定义两个颜色

   
   
<resources>
    <color name="blue_pressed">@android:color/holo_blue_dark</color>
    <color name="blue_normal">@android:color/holo_blue_light</color>
</resources>

我们这里使用android的 HOLO 色调:

   
   
<!-- A dark Holo shade of blue -->
<color name="holo_blue_dark">#ff0099cc</color>
<!-- A light Holo shade of blue -->
<color name="holo_blue_light">#ff33b5e5</color>

创建 dimen.xml 文件，定义圆角值和阴影高度，见下图

   
   
<resources>
    <dimen name="corner_radius">4dp</dimen>
    <dimen name="layer_padding">3dp<<dimen>
</resources>

 

 

我们用shape来定义按钮背景 创建rect_pressed.xml 的 drawable 文件

   
   
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <corners android:radius="@dimen/corner_radius" />
  <solid android:color="@color/blue_pressed" />
</shape>

 

创建rect_normal.xml file 的drawable 文件。

   
   
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/rect_pressed" />
 
  <item android:bottom="@dimen/layer_padding">
      <shape android:shape="rectangle">
          <corners android:radius="@dimen/corner_radius" />
          <solid android:color="@color/blue_normal" />
      </shape>
  </item>
</layer-list>

 

为按钮定义 selector . 创建flat_selector.xml 文件。

   
   
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" android:drawable="@drawable/rect_pressed"/>
  <item android:drawable="@drawable/rect_normal"/>
</selector>

定义 button 设置 background 为 flat_selector.

   
   
<Button
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/flat_selector"
      android:textColor="@android:color/white"
      android:text="Say Hello" />