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!