用一张图片实现按钮按下和普通效果的样式

第一种方法（强烈推荐）

方法：selector作遮罩，原图作background。

咱们作按钮的时候常常须要用两个图片来实现按钮点击和普通状态的样式，这就须要提供两种图片，并且每一个分辨率下还有多套图片，大大增长了apk的大小。

咱们但愿让这两张图片合二为一，并且还能实现两种或者多种状态，怎么作呢？咱们首先创建一个圆形的selector，正常状况下是彻底透明的，按下后透明度变小。

normal_bg_selector.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="oval">
            <solid android:color="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

而后只须要问美工拿一张图片就行了，好比这张：

关键的一步来了，如今咱们须要把selector文件看成遮罩，而后用上面的蓝色icon做为bg，放到一个ImageButton中：

<ImageButton
        android:layout_width="100dp"
        android:layout_height="100dp"
       
        android:src="@drawable/normal_bg_selector"
        android:background="@drawable/blue_btn_icon"
     
        />

最后只须要调整下padding就行了，若是你须要矩形的图片，就按照上面的方法创建一个矩形的遮罩便可。若是大家公司用的圆角矩形，直接问设计师要个圆角的标准就行，再创建一个selector文件吧。下面是最简单的原型和矩形的遮罩文件：

normal_oval_mask_selector.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="oval">
            <solid android:color="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

normal_rectangle_mask_selector.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">
            <solid android:color="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

 

第二种方法（不推荐）

固然咱们还有另外一种方法来实现这个效果，用的是layer-list。先放一个selector作的遮罩，而后在遮罩下面叠加一个button的icon。这样就作好button按下后的样式。

blue_btn_selector_layerlist.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list   xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:drawable="@drawable/blue_btn_icon" />    
    <item android:drawable="@drawable/blue_btn_mask_shape" />    
</layer-list> 

如今咱们有了按钮普通的样式和按钮按下的样式，以后就能够创建一个selector：

blue_button_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_pressed="true"
        android:drawable="@drawable/blue_btn_selector_layerlist" />

    <item
        android:drawable="@drawable/blue_btn_icon" />
</selector>

最后就只须要在button的background设置这个blue_button_bg_selector.xml就好了。第二种方法明显就比较繁琐，须要多创建一个文件，没有模块化。

 

参考自：

http://blog.sina.com.cn/s/blog_783ede030101ixr9.html