带checkbox的ListView实现（三）——CheckableImageView的实现方法

前言：看来总结的速度还是太慢了，要写博客的内容列表已经排到了六篇，但并不想为了写博客而写博客，还是想给大家推出高品质的博客，能尽量写的详细一点，工作上也是忙，只有每天晚上抽时间写出来。这篇文章是大家在实际开发中都会遇到的问题——如何实现checkableImageview，虽然大家用其它替代方法也能实现类似效果，但我觉得只有真正实现checkable接口的自定义控件才够正宗。下面在第二篇的基本上，改进工程；

相关文章：

1、《带checkbox的ListView实现（一）——数据与渲染完全分离的传统实现方式》
2、《带checkbox的ListView实现（二）——自定义Checkable控件的实现方法》
3、《带checkbox的ListView实现（三）——CheckableImageView的实现方法》

本文效果：

本篇文章建立在第二篇《带checkbox的ListView实现（二）——自定义Checkable控件的实现方法》的基础之上，建议先把这第二篇先看一遍，因为里面涉及到整体架构和CheckableFrameLayout的实现，如果不看的话，估计这一篇是看不大懂的。

好啦，言规正转，当大家看完第二篇，应该会想，这一篇还不简单，直接仿照CheckableFrameLayout重新实现一个自定义控件呗。好，那我们就先仿照CheckableFrameLayout实现一个看看。

一、activity_main.xml ——MainActivity布局文件

MainActivity布局依旧不变：

[html] view plaincopy

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="com.harvic.checkableimageview.MainActivity" >  
6.   
7.     <ListView  
8.         android:id="@+id/list"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:layout_marginBottom="100dp"  
12.         android:choiceMode="multipleChoice"  
13.         android:dividerHeight="1px"  
14.         android:scrollbars="none" />  
15.       
16.     <Button android:id="@+id/all_sel"  
17.         android:layout_width="fill_parent"  
18.         android:layout_height="wrap_content"  
19.         android:layout_marginBottom="50dip"  
20.         android:layout_gravity="bottom"  
21.         android:text="全选"  
22.         />  
23.     <Button android:id="@+id/all_unsel"  
24.         android:layout_width="fill_parent"  
25.         android:layout_height="wrap_content"  
26.         android:layout_gravity="bottom"  
27.         android:text="全部取消"/>  
28. </FrameLayout>  

二、check_list_item.xml —— 单个Item布局

先看看布局代码：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <com.harvic.checkableimageview.CheckableFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="68dp" >  
5.   
6.     <com.harvic.checkableimageview.CheckableImageView  
7.         android:layout_gravity="right|center_vertical"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:layout_alignParentRight="true"  
11.         android:layout_centerVertical="true"  
12.         android:layout_marginRight="10dp"  
13.         android:clickable="false"  
14.         android:src="@drawable/toggle" />  
15.   
16.     <LinearLayout  
17.         android:layout_width="match_parent"  
18.         android:layout_height="match_parent"  
19.         android:layout_marginBottom="17dp"  
20.         android:layout_marginTop="17dp"  
21.         android:orientation="vertical" >  
22.   
23.         <TextView  
24.             android:id="@+id/title"  
25.             android:layout_width="wrap_content"  
26.             android:layout_height="wrap_content"  
27.             android:textSize="16sp" />  
28.   
29.         <TextView  
30.             android:id="@+id/subtitle"  
31.             android:layout_width="wrap_content"  
32.             android:layout_height="wrap_content"  
33.             android:textSize="12sp" />  
34.     </LinearLayout>  
35.   
36. </com.harvic.checkableimageview.CheckableFrameLayout>  

这里除了使用CheckableFrameLayout，另外把第二篇中的Checkbox换成了自定义的CheckableImageView，其实整篇文章跟第二篇相比，什么都没有变，只是这里把checkbox换成了自定义的CheckableImageView。
我单独把CheckableImageView的代码拿出来：

[html] view plaincopy

1. <com.harvic.checkableimageview.CheckableImageView  
2.     android:layout_gravity="right|center_vertical"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.     android:layout_alignParentRight="true"  
6.     android:layout_centerVertical="true"  
7.     android:layout_marginRight="10dp"  
8.     android:clickable="false"  
9.     android:src="@drawable/toggle" />  

因为我们要让它显示图片的不同状态，所以CheckableImageVIew应该派生于ImageVIew，也就是说它是一个ImageView的派生类，所以它具有src属性，它指向听toggle.xml是一个selector，在不同状态下选择不同的图片显示：

[html] view plaincopy

1. <selector android:constantSize="true" android:variablePadding="false" xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item android:drawable="@drawable/toggle_on"  android:state_checked="true"/>  
3.     <item android:drawable="@drawable/toggle_off" android:state_checked="false"/>  
4.     <item android:drawable="@drawable/toggle_off"/>  
5. </selector>  

好啦，下面就是CheckableImageView的实现了

我们仿照CheckableFrameLayout实现Checkable接口，又因为CheckableImageView要显示图片，所以又要派生自ImageView，所以代码如下：

[javascript] view plaincopy

1. public class CheckableImageView extends ImageView implements Checkable{  
2.   
3.     /** @param context 
4.      * @param attrs */  
5.     public CheckableImageView(Context context, AttributeSet attrs) {  
6.         super(context, attrs);  
7.         // TODO Auto-generated constructor stub  
8.     }  
9.       
10.     private boolean mChecked = false;  
11.     @Override  
12.     public void setChecked(boolean checked) {  
13.         // TODO Auto-generated method stub  
14.         if (mChecked != checked) {  
15.             mChecked = checked;  
16.             refreshDrawableState();  
17.         }  
18.     }  
19.   
20.     @Override  
21.     public boolean isChecked() {  
22.         // TODO Auto-generated method stub  
23.         return mChecked;  
24.     }  
25.   
26.     @Override  
27.     public void toggle() {  
28.         // TODO Auto-generated method stub  
29.         setChecked(!mChecked);  
30.     }  
31.   
32. }  

其它部分（MainActivity、ListItemAdapter）都不变，这里就不再列代码了，没什么意义，看看效果：

没效果！！！！！为什么会这样！！！！！！！！
放用户点击某个Item的时候，我们明明设置了SetChecked()了啊，在SetChecked（）内部：

[java] view plaincopy

1. public void setChecked(boolean checked) {  
2.     // TODO Auto-generated method stub  
3.     if (mChecked != checked) {  
4.         mChecked = checked;  
5.         refreshDrawableState();  
6.     }  
7. }  

会将状态设为checked并且调用refreshDrawableState（）来刷新Drawable状态的啊，在刷新状态时，会调用我们的Selector：

[html] view plaincopy

1. <item android:drawable="@drawable/toggle_on"  android:state_checked="true"/>  

注意！！！！！这里有个问题！！！！！我们的ImageView控件并不像Checkbox一样有state_cheked（选中）状态，所以我们给他设置android:state_checked="true"标签让它自已匹配选中状态是没用的！！！！！因为它根本没有选中状态。那问题来了，我们怎么样能让ImageView具有选中状态呢。当他有了选中状态以后，那么state_checked标签就有用了。所以下面我们就想方设法让它具有选中状态。
首先，我们可以重写onCreateDrawableState函数，来指定控件所具有的状态。即当控件在获取自己所应具有的状态时，会调用onCreateDrawableState(int extraSpace)方法，其定义如下：

[java] view plaincopy

1. public int[] onCreateDrawableState(int extraSpace){  
2. }  

int extraSpace：代表额外的空间，即如果为0，即代表用户不再另外指定属性，直接返回本身所具有的控件状态集。如果不为0，多余的位置就可以用来放置自定义的状态,使该Drawable具有我们添加的属性。

返回值：如果extraSpace为0，直接返回控件本身所具有的状态集。如果extraSpace不为0，返回的值除了具有控件本身所具有的状态集，会额外分配指定的空间以便用户自主指定状态。

下面看看我们重写onCreateDrawableState（）的完整代码：

[java] view plaincopy

1. int[] CHECKED_STATE_SET = { android.R.attr.state_checked };  

android.R.attr.state_checked：指示控件已经选中时的状态，如果给控件指定这个属性，就代表控件就已经选中，会调用selector里的android:state_checked="true"来加载它的显示图片。

[java] view plaincopy

1. @Override  
2. public int[] onCreateDrawableState(int extraSpace) {  
3.     final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);  
4.     if (isChecked()) {  
5.         mergeDrawableStates(drawableState, CHECKED_STATE_SET);  
6.     }  
7.     return drawableState;  
8. }  

首先：

[java] view plaincopy

1. final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);  

获取控件本身所具有的状态，并且我们要另开一个位置存放android.R.attr.state_checked状态，所以要加1；

然后，当控件被选中的时候，我们要给它添加上被选中的状态，让它调用selector里的android:state_checked="true"来加载当前选中时的图片。

所以完整的代码应该是这样的：

[java] view plaincopy

1. public class CheckableImageView extends ImageView implements Checkable{  
2.   
3.     /** @param context 
4.      * @param attrs */  
5.     public CheckableImageView(Context context, AttributeSet attrs) {  
6.         super(context, attrs);  
7.         // TODO Auto-generated constructor stub  
8.     }  
9.       
10.     private boolean mChecked = false;  
11.     private static final int[] CHECKED_STATE_SET = { android.R.attr.state_checked };  
12.   
13.   
14.     @Override  
15.     public int[] onCreateDrawableState(int extraSpace) {  
16.         final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);  
17.         if (isChecked()) {  
18.             mergeDrawableStates(drawableState, CHECKED_STATE_SET);  
19.         }  
20.         return drawableState;  
21.     }  
22.       
23.     @Override  
24.     public void setChecked(boolean checked) {  
25.         // TODO Auto-generated method stub  
26.         if (mChecked != checked) {  
27.             mChecked = checked;  
28.             refreshDrawableState();  
29.         }  
30.     }  
31.   
32.     @Override  
33.     public boolean isChecked() {  
34.         // TODO Auto-generated method stub  
35.         return mChecked;  
36.     }  
37.   
38.     @Override  
39.     public void toggle() {  
40.         // TODO Auto-generated method stub  
41.         setChecked(!mChecked);  
42.     }  
43.   
44. }  

附：

android.R.attr.state_checked 的官方说明是这样的：
State identifier indicating that the object is currently checked. See state_checkable for an additional identifier that can indicate if any object may ever display a check,regardless of whether state_checked is currently set. Must be a boolean value, either "true" or "false". This may also be a reference to a resource (in the form "@[package:]type:name") or  theme attribute (in the form "?[package:][type:]name") containing a value of this type. 

CheckableImageView总结：

（1）CheckableImageView执行流程：setChecked -> refreshDrawableState ->onCreateDrawableState ->调用selector设置状态

（2）CheckableImageView派生自Checkable接口,使CheckableImageView具有的可选中的状态,但当用户点击选中时,我们感觉会调用selector的state_checked="true"的状态,但state_checked属性对ImageView是无效的,因为ImageView并不具有可选中的属性,所以我们在调用selector前,应该为ImageView添加上state_checked属性这就是重写onCreateDrawableState()的原因,当用户选中时,给ImageView设置选中状态,强制使它处于选中状态中,这时,它就会调用我们的state_checked属性

OK啦，本文就到了，这里只列出来了改变的部分，大家参考源码看一下吧。

如果本文有帮到你，记得加注哦

源码下载地址：http://download.csdn.net/detail/harvic880925/8263633