扁平化按钮——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>

在dimens.xml尺寸资源文件创建圆角值和高度两个尺寸，用途见下图：

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

 

二：定义drawable资源

使用<shape>标签定义按钮背景，在drawable文件夹下创建rect_pressed.xml文件：

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

使用 <layer-list>标签定义rect_normal.xml文件：

<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，创建rect_selector.xml文件，使用在控件的background属性中即可：

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