Android UI——使用Drawable来实现扁平化的按钮

Android4.0以来，其UI设计风格渐趋扁平化，当然各公司也都竞相追逐潮流，改版自己App的设计风格，今天在论坛上看到一个帖子，想咨询如下图所示的按钮的最好的实现方法是什么？



看到下边的跟帖有的建议自定义Button或者使用ToggleButton，应该都是可以实现的，因为我平时主要做Android框架方面的，对于UI不是行家，只是前一段时间研究Drawable，知道这种效果可以使用普通Button加Drawable和Shape来实现，刚好手头没什么任务，就来试一下。

创建Android项目就不细说了，首先定义布局文件，只是为了演示效果，水平放置的两个按钮的尺寸我写死了，大家可以根据自己的布局需求修改，整体的布局文件activity_main如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerHorizontal="true">
<Button
android:id="@+id/education"
android:layout_width="100dp"
android:layout_height="35dp"
android:text="教育"
android:textColor="#FFFFFF"
android:background="@drawable/left_state_drawable" />
<Button
android:id="@+id/digital"
android:layout_width="100dp"
android:layout_height="35dp"
android:text="数码"
android:textColor="#FFFFFF"
android:background="@drawable/right_state_drawable"/>

</LinearLayout>

</RelativeLayout>

大家看到左侧按钮的一个属性：android:background="@drawable/left_state_drawable"，右侧按钮也有一个同样的属性，不过是引用的另一个drawable罢了。

首先说明，android:background所引用的xml文件是放在drawable文件夹中的，目的就是用来实现button的圆角、颜色及点击效果。

先来看left_state_drawable.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:topLeftRadius="8dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="8dp"/>
<solid android:color="#FF00FF"/>
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:topLeftRadius="8dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="8dp"/>
<solid android:color="#5E5E5E"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:topLeftRadius="8dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="8dp"/>
<solid android:color="#5E5E5E"/>
</shape>
</item>
</selector>

<selector></selector>大家很熟悉了，以前我们使用的时候其item里是不同的图片，以响应按钮按下、点击及初始的效果。现在我们看到，item里没有再使用图片，而是使用了Shape，Shape可以定义很多属性，如圆角、颜色、size、padding等等，这里只是简单的使用了圆角和颜色。圆角可以自定义四个角中哪个需要设置为圆角，对于左侧按钮，我们设置左上角和左下角为圆角，对于右侧按钮，则是右上角和右下角为圆角，其实left_state_drawable.xml和right_state_drawable.xml的区别也只是左右按钮的圆角位置不同而已。

最终效果如下图：

 

 

个人很喜欢这种实现方式，以往我们实现这种效果，需要多张背景图片以响应按钮的点击效果，现在我们只需给一个color即可搞定，既符合Android UI的潮流，又减小了APK包的大小及资源开销，而且维护起来非常简单，就是一个xml文件而已。 

是不是一种很简洁快速的实现方式，Simple is Beautiful!