自定义带图标的Preferecnce-----类ListPreference实现

   有时候系统提供给我们的preference并不能满足我们的要求，所以有的时候需要我们自定义Preferece，下面的例子就是我个人自定义的一个简单的带图标的Preference。 

             首先是xml布局文件，就是你想实现的布局。

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+android:id/widget_frame"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="wrap_content"  
6.     android:minHeight="?android:attr/listPreferredItemHeight"  
7.     android:gravity="center_vertical"  
8.     android:paddingRight="?android:attr/scrollbarSize">     
9.     <RelativeLayout  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_marginLeft="18dip"  
13.         android:layout_marginRight="6dip"  
14.         android:layout_marginTop="6dip"  
15.         android:layout_marginBottom="6dip"  
16.         android:layout_weight="1">  
17.         <TextView  
18.          android:id="@+android:id/title"  
19.             android:layout_width="wrap_content"  
20.             android:layout_height="wrap_content"  
21.             android:singleLine="true"  
22.             android:textAppearance="?android:attr/textAppearanceLarge"  
23.             android:ellipsize="marquee"  
24.             android:fadingEdge="horizontal" />  
25.         <TextView  
26.          android:id="@+android:id/summary"  
27.             android:layout_width="wrap_content"  
28.             android:layout_height="wrap_content"  
29.             android:layout_below="@android:id/title"  
30.             android:layout_alignLeft="@android:id/title"  
31.             android:textAppearance="?android:attr/textAppearanceSmall"  
32.             android:maxLines="2" />  
33.     </RelativeLayout>  
34.     <ImageView  
35.         android:id="@+id/icon"  
36.         android:layout_width="wrap_content"  
37.         android:layout_height="wrap_content"  
38.         android:layout_marginLeft="6dip"  
39.         android:layout_marginRight="6dip"  
40.         android:layout_gravity="center" />  
41. </LinearLayout>   

下面是自定义的preference的java文件：

[java]  view plain copy

1. import com.android.mms.R;  
2.   
3. import android.content.Context;  
4. import android.graphics.drawable.Drawable;  
5. import android.preference.Preference;  
6. import android.util.AttributeSet;  
7. import android.view.View;  
8. import android.widget.ImageView;  
9.   
10. public class IconListPreference extends Preference{  
11. private Drawable mIcon;  
12.       
13.     public IconListPreference(final Context context, final AttributeSet attrs, final int defStyle) {  
14.         super(context, attrs);  
15.           
16.         this.setLayoutResource(R.layout.icon_list_preference);  
17.   
18.         //这里设置的是icon初始化的图标  
19.         this.mIcon = context.getResources().getDrawable(R.drawable.ycz20_black);  
20.     }  
21.   
22.     public IconListPreference(final Context context, final AttributeSet attrs) {  
23.         this(context, attrs, 0);  
24.     }  
25.   
26.     @Override  
27.     protected void onBindView(final View view) {  
28.         super.onBindView(view);  
29.         final ImageView imageView = (ImageView)view.findViewById(R.id.icon);  
30.         if ((imageView != null) && (this.mIcon != null)) {  
31.             imageView.setImageDrawable(this.mIcon);  
32.         }  
33.     }  
34.   
35.     /** 
36. * Sets the icon for this Preference with a Drawable. 
37. * 
38. * @param icon The icon for this Preference 
39. */  
40.     public void setIcon(final Drawable icon) {  
41.         if (((icon == null) && (this.mIcon != null)) || ((icon != null) && (!icon.equals(this.mIcon)))) {  
42.             this.mIcon = icon;  
43.             this.notifyChanged();  
44.         }  
45.     }  
46.     public void setIcon(int iconRes) {  
47.         if(R.drawable.ycz20_black!=iconRes){  
48.             this.mIcon = getContext().getResources().getDrawable(iconRes);  
49.             this.notifyChanged();  
50.         }  
51.     }  
52.     /** 
53. * Returns the icon of this Preference. 
54. * 
55. * @return The icon. 
56. * @see #setIcon(Drawable) 
57. */  
58.     public Drawable getIcon() {  
59.         return this.mIcon;  
60.     }  
61. }  

比如你想更改ImageView里面的图标，就是以使用setIcon（）方法。

因为自己完成的功能比较简单，所以重写的方法就比较少，大家 可以根据自己的需要来添加更多的方法。

上面只是实现一个perference，但是点击以后没有响应事件，我们可以定义一个一个Dialog，Dialog选项里面需要有图片，文字说明，后面还需要一个单选按钮，所以自己写了一个demo，效果图如下：

        功能的完成是使用Dialog的addView（）方法，把一个ListView添加进去。ListView控件里面使用了ImageView和CheckedTextView控件，CheckedTextView是一个提供文字和选择框的控件。如果对于CheckedTextView不熟悉，请自己查下文档，在这里就不在多说。

主要功能代码如下：

[java]  view plain copy

1. public class ListViewActivityextends Activity {  
2.   
3.     /** Called when the activity is first created. */  
4.   
5.     @Override  
6.   
7.     public void onCreate(Bundle savedInstanceState){  
8.   
9.         super.onCreate(savedInstanceState);  
10.   
11.         setContentView(R.layout.main);  
12.   
13.         Button button=(Button)findViewById(R.id.button);  
14.   
15.        //获取ListView  
16.   
17.         final LayoutInflater factory = LayoutInflater.from(ListViewActivity.this);   
18.   
19.                  final View view = factory.inflate(   
20.   
21.                          R.layout.listview,null);  
22.   
23.         final ListView list = (ListView) view.findViewById(R.id.ListView01);   
24.   
25.         //把数据项添加到listItem里面  
26.   
27.         ArrayList<HashMap<String,Object>> listItem =newArrayList<HashMap<String, Object>>();   
28.   
29.         for(int i=0;i<5;i++)   
30.   
31.         {  
32.   
33.         if(i==0){  
34.   
35.              HashMap<String,Object> map =new HashMap<String,Object>();   
36.   
37.                 map.put("ItemImage", R.drawable.checked);  
38.   
39.                 map.put("ItemTitle", "1");     
40.   
41.                 listItem.add(map);  
42.   
43.         }else if(i==1){  
44.   
45.              HashMap<String,Object> map =new HashMap<String,Object>();   
46.   
47.                 map.put("ItemImage", R.drawable.c);   
48.   
49.                 map.put("ItemTitle", "2");   
50.   
51.                 listItem.add(map);  
52.   
53.         }else if(i==2){  
54.   
55.              HashMap<String,Object> map =new HashMap<String,Object>();   
56.   
57.                 map.put("ItemImage", R.drawable.d);   
58.   
59.                 map.put("ItemTitle", "3");    
60.   
61.                 listItem.add(map);  
62.   
63.         }else if(i==3){  
64.   
65.              HashMap<String,Object> map =new HashMap<String,Object>();   
66.   
67.                 map.put("ItemImage", R.drawable.d);   
68.   
69.                 map.put("ItemTitle", "4");     
70.   
71.                 listItem.add(map);  
72.   
73.         }else{  
74.   
75.              HashMap<String,Object> map =new HashMap<String,Object>();   
76.   
77.                 map.put("ItemImage", R.drawable.e);   
78.   
79.                 map.put("ItemTitle", "5");    
80.   
81.                 listItem.add(map);  
82.   
83.         }  
84.   
85.         }  
86.   
87.        //获得SimpleAdapter，并且把它添加到listView中  
88.   
89.         SimpleAdapter listItemAdapter =new SimpleAdapter(this,listItem,   
90.   
91.                R.layout.item,           
92.   
93.                new String[] {"ItemImage","ItemTitle"},     
94.   
95.                new int[] {R.id.imageView,R.id.checkedTextView}   
96.   
97.            );   
98.   
99.                 
100.   
101.            list.setAdapter(listItemAdapter);   
102.   
103.            list.setOnItemClickListener(new OnItemClickListener(){   
104.   
105.        
106.   
107.                 public void onItemClick(AdapterView<?>arg0, View arg1,int arg2,   
108.   
109.                         long arg3) {  
110.   
111.               //把所有的单选全部设为非选中  
112.   
113.                  for(int i=0;i<arg0.getCount();i++)  
114.   
115.                  {  
116.                     View v = list.getChildAt(i);  
117.   
118.                     CheckedTextViewcheckText=(CheckedTextView)v.findViewById(R.id.checkedTextView);  
119.   
120.                     checkText.setChecked(false);  
121.   
122.                  }  
123.               //获得点击项的CheckedTextView，并设为选中  
124.                  CheckedTextViewcheck=(CheckedTextView)arg1.findViewById(R.id.checkedTextView);             
125.                   check.setChecked(true);  
126.                }   
127.            });  
128.   
129.            final AlertDialog.Builder builder=new AlertDialog.Builder(ListViewActivity.this);  
130.            button.setOnClickListener(new View.OnClickListener() {  
131.               public void onClick(View v) {                 
132.                   builder.setTitle("Dialog");  
133.                   builder.setView(list);  
134.                builder.setNegativeButton("cencel",null);  
135.                builder.create().show();                       
136.               }  
137.            });  
138.     }  
139. }  

其中item.xml代码如下

[html]  view plain copy

1. <?xml version="1.0"encoding="utf-8"?>  
2.   
3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
4.   
5.     android:orientation="horizontal"  
6.   
7.     android:layout_width="fill_parent"  
8.   
9.     android:layout_height="fill_parent"  
10.   
11.     >  
12.   
13.     <ImageView  
14.   
15.        android:id="@+id/imageView"   
16.   
17.         android:layout_width="wrap_content"  
18.   
19.         android:layout_height="wrap_content"  
20.   
21.         />  
22.   
23.     <CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"  
24.   
25.     android:id="@+id/checkedTextView"  
26.   
27.     android:layout_width="match_parent"  
28.   
29.         android:layout_height="?android:attr/listPreferredItemHeight"  
30.   
31.     android:textAppearance="?android:attr/textAppearanceLarge"  
32.   
33.     android:gravity="center_vertical"  
34.   
35.     android:checkMark="?android:attr/listChoiceIndicatorSingle"  
36.   
37.     android:paddingLeft="6dip"  
38.   
39.     android:paddingRight="6dip"  
40.   
41. />  
42.   
43. </LinearLayout>  

Listview.xml文件如下

[html]  view plain copy

1. <?xml version="1.0"encoding="utf-8"?>     
2.   
3. <ListView xmlns:android="http://schemas.android.com/apk/res/android"  
4.   
5.          android:layout_width="wrap_content"    
6.   
7.           android:layout_height="wrap_content"    
8.   
9.           android:id="@+id/ListView01"   
10.   
11.           />   

应该特别注意listview.xml不要把他写在一个父控件下如：LinearLayout等，如果这样会出现错误，。还有就是如果你listview添加过多选项，当单击的时候会出现空指针异常。

另外，Demo源代码可以在此下载。

http://download.csdn.net/source/3494251

2012年7月19号补充：

           当listView中含有超过一屏幕的时候，采用以上方法会有空指针异常，是因为未显示的View为空，但是上面代码中要遍历所有代码，所以为空。如何优化，可以参考

ListView Item 选择问题解决之道

这篇文章。

 
 

  
  这篇文章原文是在https://gist.github.com/515681。主要是代码，没有其他文字说明，转到这里来，希望对看到的人有用。
下面是用到的xml布局文件。

  
  

 
 
 
 

  
  

   
   

    
    [html] 
    
    view plain
    
    copy
    
    

   
   
  
  
  
  
<?xml version="1.0" encoding="UTF-8"?>  
  
<LinearLayout  
xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+android:id/widget_frame"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:minHeight="?android:attr/listPreferredItemHeight"  
    android:gravity="center_vertical"  
    android:paddingRight="?android:attr/scrollbarSize">  
    <ImageView  
        android:id="@+id/icon"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_marginLeft="6dip"  
        android:layout_marginRight="6dip"  
        android:layout_gravity="center" />  
    <RelativeLayout  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_marginLeft="2dip"  
        android:layout_marginRight="6dip"  
        android:layout_marginTop="6dip"  
        android:layout_marginBottom="6dip"  
        android:layout_weight="1">  
        <TextView  
         android:id="@+android:id/title"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:singleLine="true"  
            android:textAppearance="?android:attr/textAppearanceLarge"  
            android:ellipsize="marquee"  
            android:fadingEdge="horizontal" />  
        <TextView  
         android:id="@+android:id/summary"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_below="@android:id/title"  
            android:layout_alignLeft="@android:id/title"  
            android:textAppearance="?android:attr/textAppearanceSmall"  
            android:maxLines="2" />  
    </RelativeLayout>  
    <CheckBox  
     android:id="@+android:id/checkbox"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_marginRight="4dip"  
     android:layout_gravity="center_vertical"  
     android:focusable="false"  
     android:clickable="false" />  
</LinearLayout>   
 
 

 
 

  
  

下面是用到的java类文件。

  
  

   
   
    
    


    
    
    
    

     
     
    
    
    
    

     
     

      
      

       
       [java] 
       
       view plain
       
       copy
       
       

      
      
     
     
     
     
import android.content.Context;  
import android.graphics.drawable.Drawable;  
import android.preference.CheckBoxPreference;  
import android.util.AttributeSet;  
import android.view.View;  
import android.widget.ImageView;  
import com.jakewharton.wakkawallpaper.R;  
  
public class IconCheckBoxPreference extends CheckBoxPreference {  
    private Drawable mIcon;  
      
    public IconCheckBoxPreference(final Context context, final AttributeSet attrs, final int defStyle) {  
        super(context, attrs, defStyle);  
          
        this.setLayoutResource(R.layout.icon_checkbox_preference);  
          
        this.mIcon = context.obtainStyledAttributes(attrs, R.styleable.IconPreference, defStyle, 0).getDrawable(R.styleable.IconPreference_icon);  
    }  
  
    public IconCheckBoxPreference(final Context context, final AttributeSet attrs) {  
        this(context, attrs, 0);  
    }  
  
    @Override  
    protected void onBindView(final View view) {  
        super.onBindView(view);  
          
        final ImageView imageView = (ImageView)view.findViewById(R.id.icon);  
        if ((imageView != null) && (this.mIcon != null)) {  
            imageView.setImageDrawable(this.mIcon);  
        }  
    }  
  
    /** 
* Sets the icon for this Preference with a Drawable. 
* 
* @param icon The icon for this Preference 
*/  
    public void setIcon(final Drawable icon) {  
        if (((icon == null) && (this.mIcon != null)) || ((icon != null) && (!icon.equals(this.mIcon)))) {  
            this.mIcon = icon;  
            this.notifyChanged();  
        }  
    }  
  
    /** 
* Returns the icon of this Preference. 
* 
* @return The icon. 
* @see #setIcon(Drawable) 
*/  
    public Drawable getIcon() {  
        return this.mIcon;  
    }  
}  
    
    

    
    

     
     
    
    
  
  
如果有需要做类似功能的朋友们可以参照此例进行修改。