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

第一种方法（强烈推荐）

方法：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