(1)在开发中,我们经常会遇到一些纯色或带边框的简单样式的按钮或div,很多时候,都是用九宫格的背景图片来贴上去。但仔细想来,使用图片也带来了一些性能上的问题,包括过多的图片文件会导致渲染页面的时候需要加载渲染很多图片,以及图片也会带来安装包的增加,最后就是用图片很麻烦的说,就如能够用xml文件配出来,就不用再等UED了。

    (2)按钮文字颜色在不同的状态下也不一样,最开始比较傻,直接通过代码来动态改变,想想就恶心。其实这也是可以通过XML配置出来的。

    

    好,下面就进入正题吧。

注:以下并不局限于按钮,照样可以用于各种view的background。


一)、配置按钮背景

    Android能够支持shape、selector等。shape顾名思义就是定义一个形状,包括边框、填充色、圆角等。如下实例:

<shape  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  
    <gradient android:startColor="#FFFF0000"  
        android:endColor="#80FF00FF"  
        android:angle="270" />  
    <padding android:left="50dp"  
        android:top="20dp" android:right="7dp"  
        android:bottom="7dp" />  
    <corners android:radius="8dp" />  
    <solid android:color="#b4000000" /> 
  <stroke android:width="2.0dip"  
        android:color="#b4ffffff"  
        android:dashWidth="3.0dip"  
        android:dashGap="0.0dip" />
</shape>
<shape  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  
    <gradient android:startColor="#FFFF0000"  
        android:endColor="#80FF00FF"  
        android:angle="270" />  
    <padding android:left="50dp"  
        android:top="20dp" android:right="7dp"  
        android:bottom="7dp" />  
    <corners android:radius="8dp" />  
    <solid android:color="#b4000000" /> 
  <stroke android:width="2.0dip"  
        android:color="#b4ffffff"  
        android:dashWidth="3.0dip"  
        android:dashGap="0.0dip" />
</shape>

简单说明下:

gradient   -- 对应颜色渐变。 startcolor、endcolor就不多说了。 android:angle 是指从哪个角度开始变。

solid      --  填充色。

stroke   --  边框,其中width就是边框线的宽度。

corners  --  是否添加圆角,radius就是圆角的半径。

padding   -- 定义内容离边界的距离。 与android:padding_left、android:padding_right这些是一个道理。


细心的读者就会想到,这个shap好像只描述了一种状态啊,怎么表示按钮的其他状态呢?那就得用到selector了。

selector顾名思义表示选择器的意思,就是能够根据不同的状态选择响应的参数。好了,直接亮代码吧,多说无益:

<?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">
            <solid android:color="#53cbff" />
            <corners android:radius="3dp" />
        </shape>      
    </item>
        
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#53cbff" />
            <corners android:radius="3dp" />
        </shape>
    </item>
        
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#44b2ff" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</selector>
<?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">
            <solid android:color="#53cbff" />
            <corners android:radius="3dp" />
        </shape>      
    </item>
        
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#53cbff" />
            <corners android:radius="3dp" />
        </shape>
    </item>
        
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#44b2ff" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</selector>


效果就不再展示了,就是一个蓝色的按钮。



二)、配置按钮的颜色方案

    我们经常会遇到常态是按钮背景是深的,按下去后是浅色背景,这时候就需要按钮文字颜色也能够随之改变,否则效果就大打折扣了。

    肯定,你也会想到其实只要和selector配合使用就好了,如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:color="#ffffff"/>
    <item android:state_selected="true" android:color="#ffffff"/>
    <item android:state_pressed="true" android:color="#ffffff"/>
    <item android:color="#aaaaaa"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:color="#ffffff"/>
    <item android:state_selected="true" android:color="#ffffff"/>
    <item android:state_pressed="true" android:color="#ffffff"/>
    <item android:color="#aaaaaa"/>
</selector>


使用的时候在android:textColor="@drawable/****"就好了。

好了,具体怎么灵活使用以及他们的含义就自己用实践去摸索吧。