android开发笔记——含图标的expandable listview（通过重写adapter）

今天想跟大家分享一下昨天自己关于expandable listview重写adapter的一些心得。

实现效果：背景实现圆角；每行即可以显示文字，又可显示图片（如有需要可以更复杂）。先上一张效果图：

首先来看看圆角的实现。其实这个是比较简单的，只需要在drawble文件下面加一个xml文件即可：

 

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:endcolor="#ffffff" android:startcolor="#ffffff"> <corners android:bottomleftradius="6dip" android:bottomrightradius="6dip" android:topleftradius="6dip" android:toprightradius="6dip"> </corners></gradient></shape><!-- four corners -->

对里面的一些属性说明一下下~~~（这个也适合其他的控件哦，只需要在background属性里面添加就好啦）

 

 

  <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 圆角 --> <corners android:radius="9dp" android:topleftradius="2dp" android:toprightradius="2dp" android:bottomleftradius="2dp" android:bottomrightradius="2dp"><!-- 设置圆角半径 --> <!-- 渐变 --> <gradient android:startcolor="@android:color/white" android:centercolor="@android:color/black" android:endcolor="@android:color/black" android:uselevel="true" android:angle="45" android:type="radial" android:centerx="0" android:centery="0" android:gradientradius="90"> <!-- 间隔 --> <padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp"><!-- 各方向的间隔 --> <!-- 大小 --> <size android:width="50dp" android:height="50dp"><!-- 宽度和高度 --> <!-- 填充 --> <solid android:color="@android:color/white"><!-- 填充的颜色 --> <!-- 描边 --> <stroke android:width="2dp" android:color="@android:color/black" android:dashwidth="1dp" android:dashgap="2dp"> </stroke></solid></size></padding></gradient></corners></shape>

然后，就要开始做expandable listview了。。。和其他控件一样，需要在布局文件中添加控件，这里值得注意的是android:id这个属性的赋值

android:id="@+id/android:list" 不然会报错的哦~~~布局文件很简单，我就不贴出来啦。。。

然后就是在activity当中声明啊定义什么的了。。。下面给出源码：

  package jenn.expandable; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import android.os.Bundle; import android.app.Activity; import android.app.ExpandableListActivity; import android.view.Menu; import android.widget.ExpandableListView; /** * this activity is about a expandable list view with icons and corner background * @author jenn * */ public class ExpandableActivity extends ExpandableListActivity { /**expandable list view*/ private ExpandableListView mExpandableListView; /**array list for parent*/ public static ArrayList<Map<string object="">> mArrListParent = new ArrayList<Map<string object="">>(); /**array list for all the children*/ public static ArrayList<ArrayList<Map<string object="">>> mArrListChild = new ArrayList<ArrayList<Map<string object="">>>(); /**array list for first child*/ public static ArrayList<Map<string object="">> mArrListFirChild = new ArrayList<Map<string object="">>(); /**array list for second child*/ public static ArrayList<Map<string object="">> mArrListSecChild = new ArrayList<Map<string object="">>(); /**array list for third child*/ public static ArrayList<Map<string object="">> mArrListThiChild = new ArrayList<Map<string object="">>(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_expandable); mExpandableListView=(ExpandableListView)findViewById(android.R.id.list); inite(); /** my own expandable list view */ MyExpandableListAdapter expan_adapter = new MyExpandableListAdapter( this); mExpandableListView.setAdapter(expan_adapter); // TODO: you can add some listener here if necessary } /** * set the data for the expandable list */ public void inite(){ //---------------for the parent-------------------- Map<string object=""> map_parent1 = new HashMap<string object="">(); map_parent1.put("title", "Group1"); map_parent1.put("title_icon", R.drawable.tb_xia); Map<string object=""> map_parent2 = new HashMap<string object="">(); map_parent2.put("title", "Group2"); map_parent2.put("title_icon", R.drawable.tb_xia); Map<string object=""> map_parent3 = new HashMap<string object="">(); map_parent3.put("title", "Group3"); map_parent3.put("title_icon", R.drawable.tb_xia); mArrListParent.add(map_parent1); mArrListParent.add(map_parent2); mArrListParent.add(map_parent3); //----------------for first child--------------- Map<string object=""> map_fchild1= new HashMap<string object="">(); map_fchild1.put("icon", R.drawable.alerts); map_fchild1.put("text", "alerts"); Map<string object=""> map_fchild2= new HashMap<string object="">(); map_fchild2.put("icon", R.drawable.blogger); map_fchild2.put("text", "blogger"); Map<string object=""> map_fchild3= new HashMap<string object="">(); map_fchild3.put("icon", R.drawable.blogsearch); map_fchild3.put("text", "blogsearch"); mArrListFirChild.add(map_fchild1); mArrListFirChild.add(map_fchild2); mArrListFirChild.add(map_fchild3); //---------------for the second child--------------- Map<string object=""> map_schild1= new HashMap<string object="">(); map_schild1.put("icon", R.drawable.alerts); map_schild1.put("text", "alerts"); Map<string object=""> map_schild2= new HashMap<string object="">(); map_schild2.put("icon", R.drawable.blogger); map_schild2.put("text", "blogger"); Map<string object=""> map_schild3= new HashMap<string object="">(); map_schild3.put("icon", R.drawable.blogsearch); map_schild3.put("text", "blogsearch"); mArrListSecChild.add(map_schild1); mArrListSecChild.add(map_schild2); mArrListSecChild.add(map_schild3); //---------------for the third child--------------------- Map<string object=""> map_tchild1= new HashMap<string object="">(); map_tchild1.put("icon", R.drawable.alerts); map_tchild1.put("text", "alerts"); Map<string object=""> map_tchild2= new HashMap<string object="">(); map_tchild2.put("icon", R.drawable.blogger); map_tchild2.put("text", "blogger"); Map<string object=""> map_tchild3= new HashMap<string object="">(); map_tchild3.put("icon", R.drawable.blogsearch); map_tchild3.put("text", "blogsearch"); mArrListThiChild.add(map_tchild1); mArrListThiChild.add(map_tchild2); mArrListThiChild.add(map_tchild3); mArrListChild.add(mArrListFirChild); mArrListChild.add(mArrListSecChild); mArrListChild.add(mArrListThiChild); } } </string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string></string>

 

当然，最重要的就是重写的adapter啦。。。俺先贴出来再讲解一下下具体的哈。。。

  package jenn.expandable; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import java.util.zip.Inflater; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.BaseExpandableListAdapter; import android.widget.ImageView; import android.widget.TextView; public class MyExpandableListAdapter extends BaseExpandableListAdapter { Context context=null; /** * Constructor * @param context */ public MyExpandableListAdapter(Context context){ this.context=context; } /** * get child through group position and child position */ public Object getChild(int groupPosition, int childPosition) { return ExpandableActivity.mArrListChild.get(groupPosition).get(childPosition); } public long getChildId(int groupPosition, int childPosition) { return 0; } public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { if(convertView == null){ convertView=LayoutInflater.from(context).inflate(R.layout.expand_list_child, null); } ImageView iv_phone=(ImageView)convertView.findViewById(R.id.expandable_child_icon1); TextView txt_number=(TextView)convertView.findViewById(R.id.expandable_child_text); final Map<string object=""> child=ExpandableActivity.mArrListChild.get(groupPosition).get(childPosition); int resId = (Integer)ExpandableActivity.mArrListChild.get(groupPosition).get(childPosition).get("icon"); iv_phone.setImageResource(resId); txt_number.setText(child.get("text").toString()); return convertView; } public int getChildrenCount(int groupPosition) { return ExpandableActivity.mArrListChild.get(groupPosition).size(); } public Object getGroup(int groupPosition) { return ExpandableActivity.mArrListParent.get(groupPosition); } public int getGroupCount() { return ExpandableActivity.mArrListParent.size(); } public long getGroupId(int groupPosition) { return 0; } public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { if(convertView==null){ convertView=LayoutInflater.from(context).inflate(R.layout.expand_list_parent, null); } TextView txt_title=(TextView)convertView.findViewById(R.id.expandable_parent_text); ImageView iv_icon=(ImageView)convertView.findViewById(R.id.expandable_parent_icon); txt_title.setText(ExpandableActivity.mArrListParent.get(groupPosition).get("title").toString()); int resId=(Integer)ExpandableActivity.mArrListParent.get(groupPosition).get("title_icon"); iv_icon.setImageResource(resId); return convertView; } public boolean hasStableIds() { return false; } public boolean isChildSelectable(int groupPosition, int childPosition) { return true; } } </string>

1、context对象：这是为了inflate的使用，因为parent和child都有相同的布局，所以需要把layout取出来，所以需要一个context对象，具体可以看看这位网友的日志：http://lzy3169421.blog.163.com/blog/static/113545277201111392857802/

2、接下来是构造函数和重写方法了，不太复杂的。。。

3、两个getview的方法：分别是child的和group的。

if(convertView == null){
   convertView=LayoutInflater.from(context).inflate(R.layout.expand_list_child, null);
  }是为了去除child的布局

然后是通过id findview 这个相信大家都能看懂啦，比较难得是赋值。由于我定义数据时通过map定义的，那要怎么变成string类型和imageview呢？

txt_title.setText(ExpandableActivity.mArrListParent.get(groupPosition).get("title").toString());
  
  int resId=(Integer)ExpandableActivity.mArrListParent.get(groupPosition).get("title_icon");
  iv_icon.setImageResource(resId);

这两句话一定要看懂，就是将map变成string和imageview。

group和child类似，就不再赘述了。。。

 

PS：由于我的这个demo做的比较简单，图标资源也是有限的，由于我item的图标用的是一样的，所以大家会觉得很单一，其实通过初始化数据，是可以添加毫不相同的图标的，也可以使布局更加复杂化，今天主要是方便大家了解清楚逻辑。。。

建议大家不要盲目复制代码，看懂才是关键！！！

 

另外，我会将工程文件上传至csdn，需要的朋友可以下载，谢谢！http://download.csdn.net/download/jenn_lian/4537069

也欢迎大家留言交流啦~~~