android開發筆記——含表徵圖的expandable listview（通過重寫adapter）

今天想跟大家分享一下昨天自己關於expandable listview重寫adapter的一些心得。

實現效果：背景實現圓角；每行即可以顯示文字，又可顯示圖片（如有需要可以更複雜）。先上一張：

首先來看看圓角的實現。其實這個是比較簡單的，只需要在drawble檔案下面加一個xml檔案即可：

 

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

對裡面的一些屬性說明一下下~~~（這個也適合其他的控制項哦，只需要在background屬性裡面添加就好啦）

 

 

 <br /><?xml version="1.0" encoding="utf-8"?><br /><shape xmlns:android="http://schemas.android.com/apk/res/android"></p><p> <!-- 圓角 --><br /> <corners android:radius="9dp" android:topleftradius="2dp" android:toprightradius="2dp" android:bottomleftradius="2dp" android:bottomrightradius="2dp"><!-- 設定圓角半徑 --></p><p> <!-- 漸層 --><br /> <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"></p><p> <!-- 間隔 --><br /> <padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp"><!-- 各方向的間隔 --></p><p> <!-- 大小 --><br /> <size android:width="50dp" android:height="50dp"><!-- 寬度和高度 --></p><p> <!-- 填充 --><br /> <solid android:color="@android:color/white"><!-- 填充的顏色 --></p><p> <!-- 描邊 --><br /> <stroke android:width="2dp" android:color="@android:color/black" android:dashwidth="1dp" android:dashgap="2dp"></p><p></stroke></solid></size></padding></gradient></corners></shape>

然後，就要開始做expandable listview了。。。和其他控制項一樣，需要在布局檔案中添加控制項，這裡值得注意的是android:id這個屬性的賦值

android:id="@+id/android:list" 不然會報錯的哦~~~布局檔案很簡單，我就不貼出來啦。。。

然後就是在activity當中聲明啊定義什麼的了。。。下面給出源碼：

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

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

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