selector实现按钮点击效果

    按钮点击效果在Android中经常用到，通常使用selector来实现，今天整理一下项目中用到的按钮点击效果，分享按钮以及GridView的点击效果。点击效果见"QQ"、"卫视"，包括图片、文字变化效果。





"QQ"的背景是selector，包含state_pressed="false"、state_pressed="true"两种状态，每种状态都是一个layer-list，如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/layer_list_share_item_qq_normal" android:state_pressed="false"></item>
<item android:drawable="@drawable/layer_list_share_item_qq_pressed" android:state_pressed="true"></item>
</selector>

layer_list_share_item_qq_normal包含两层，下层是一个白色、圆形的shape，上层是qq图片，上层边界距离下层边界有8dp的距离，如下：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/shape_share_item_normal"
android:gravity="center"></item>
<item
android:bottom="8dp"
android:drawable="@drawable/share_qq"
android:gravity="center"
android:left="8dp"
android:right="8dp"
android:top="8dp"></item>
</layer-list>shape_share_item_normal如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- 内部颜色 -->
<solid android:color="#ffffff" />
<size
android:width="42dp"
android:height="42dp" />

</shape>

layer_list_share_item_qq_pressed同样包含两层，下层是qq图片，上层是黑色(有透明度)、圆形shape，下层边界距离上层边界有8dp的距离，如下：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:drawable="@drawable/share_qq"
android:gravity="center"
android:left="8dp"
android:right="8dp"
android:top="8dp"></item>
<item
android:drawable="@drawable/shape_share_item_pressed"
android:gravity="center"></item>
</layer-list>

shape_share_item_pressed如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- 内部颜色 -->
<solid android:color="#55000000" />
<size
android:width="42dp"
android:height="42dp" />

</shape>ImageView使用selector：
<ImageView
android:id="@+id/share_qq_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/selector_share_item_qq" />

文字颜色变化也是使用selector，注意selector文件要放在res/color目录下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#4E4E4E" android:state_pressed="false"></item>
<item android:color="#55000000" android:state_pressed="true"></item>
</selector>

<TextView
android:id="@+id/share_qq_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="@string/share_qq"
android:textColor="@color/share_item_txt"
android:textSize="12sp" />

上面即是分享按钮点击效果的实现过程，GridView Item的点击效果道理相同：未点击时，显示图片；点击时，显示一个layer-list，layer-list下层是图片、上层是一个黑色(有透明度)、方形(有圆角)shape，shape正好把图片盖住，代码如下。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/live_logo_weishi" android:state_pressed="false"></item>
<item android:drawable="@drawable/layer_list_live_weishi_pressed" android:state_pressed="true"></item>
</selector>

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


代码地址：https://github.com/xiyy/TopNews，欢迎大家关注！