2025-05-23

ExpandableListView顧名思義既是可擴展的ListView,我們可用來實現菜單設置之類的功能。前些時間做項目用到瞭,現在給大傢分享一下 ExpandableListView的實現方式。

先上效果圖:

  

展開後:

 

 

佈局文件如下:

[html] <?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
    <ExpandableListView android:id="@+id/newsList" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:cacheColorHint="@color/transparent" 
        android:drawSelectorOnTop="false" 
        android:groupIndicator="@null" 
        > 
    </ExpandableListView> 
</LinearLayout> 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <ExpandableListView android:id="@+id/newsList"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:cacheColorHint="@color/transparent"
  android:drawSelectorOnTop="false"
  android:groupIndicator="@null"
  >
 </ExpandableListView>
</LinearLayout>
ExpandableListView父欄目的佈局如下:

 

[html] <?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="wrap_content" 
    android:layout_height="32dip" 
    android:background="@drawable/bg_group" 
    android:padding="5dip" 
    > 
    <TextView android:id="@+id/group_text" 
        android:textSize="22dip" 
        android:textColor="@color/white" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"/> 
    <ImageView android:id="@+id/group_image" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:paddingLeft="10dip" 
        android:paddingTop="3dip" 
    /> 
</LinearLayout> 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="horizontal"
 android:layout_width="wrap_content"
 android:layout_height="32dip"
 android:background="@drawable/bg_group"
 android:padding="5dip"
 >
 <TextView android:id="@+id/group_text"
  android:textSize="22dip"
  android:textColor="@color/white"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"/>
 <ImageView android:id="@+id/group_image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:paddingLeft="10dip"
  android:paddingTop="3dip"
 />
</LinearLayout>
子欄目的佈局:

[html] <?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@color/white" 
    android:padding="5dip" 
    > 
    <TextView android:id="@+id/child" 
        android:layout_marginLeft="10dip" 
        android:textSize="22dip" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"/> 
</LinearLayout> 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="horizontal"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@color/white"
 android:padding="5dip"
 >
 <TextView android:id="@+id/child"
  android:layout_marginLeft="10dip"
  android:textSize="22dip"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"/>
</LinearLayout>下面看主要代碼:

[java] package com.cloay.news; 
 
import android.content.Intent; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.ExpandableListView; 
import android.widget.ExpandableListView.OnChildClickListener; 
 
import com.cloay.news.bean.NewsListAdapter; 
import com.cloay.news.service.MainService; 
 
/**
 * 實現欄目列表界面(使用ExpendListView實現)
 * @author Cloay
 * 2012-3-3
 * 下午09:38:12
 */ 
public class HomeActivity extends NewsReaderActivity{ 
    private ExpandableListView newsList; 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.home); 
        MainService.allActivity.add(this); 
         
        newsList = (ExpandableListView) findViewById(R.id.newsList); 
        NewsListAdapter adapter = new NewsListAdapter(HomeActivity.this); 
        newsList.setAdapter(adapter); 
        newsList.setOnChildClickListener(new OnChildClickListener() {//<span style="color:#ff0000;">為item設置監聽註意必須在adapter中 isChildSelectable()return true詳見下面代碼</span>  
             
            @Override 
            public boolean onChildClick(ExpandableListView parent, View v, 
                    int groupPosition, int childPosition, long id) { 
//              System.out.println("groupPosition–>:" + groupPosition);  
//              System.out.println("childPosition–>:" + childPosition);  
                Intent intent = new Intent(HomeActivity.this, ContentActivity.class); 
                intent.putExtra("groupPosition", groupPosition); 
                intent.putExtra("childPosition", childPosition); 
                HomeActivity.this.startActivity(intent); 
                return true; 
            } 
        }); 
    } 

package com.cloay.news;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;

import com.cloay.news.bean.NewsListAdapter;
import com.cloay.news.service.MainService;

/**
 * 實現欄目列表界面(使用ExpendListView實現)
 * @author Cloay
 * 2012-3-3
 * 下午09:38:12
 */
public class HomeActivity extends NewsReaderActivity{
 private ExpandableListView newsList;
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.home);
  MainService.allActivity.add(this);
  
  newsList = (ExpandableListView) findViewById(R.id.newsList);
  NewsListAdapter adapter = new NewsListAdapter(HomeActivity.this);
  newsList.setAdapter(adapter);
  newsList.setOnChildClickListener(new OnChildClickListener() {//<span style="color:#ff0000;">為item設置監聽註意必須在adapter中 isChildSelectable()return true詳見下面代碼</span>
   
   @Override
   public boolean onChildClick(ExpandableListView parent, View v,
     int groupPosition, int childPosition, long id) {
//    System.out.println("groupPosition–>:" + groupPosition);
//    System.out.println("childPosition–>:" + childPosition);
    Intent intent = new Intent(HomeActivity.this, ContentActivity.class);
    intent.putExtra("groupPosition", groupPosition);
    intent.putExtra("childPosition", childPosition);
    HomeActivity.this.startActivity(intent);
    return true;
   }
  });
 }
}

為ExpandableListView提供數據的Adapter:

[java] package com.cloay.news.bean; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.content.Context; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseExpandableListAdapter; 
import android.widget.ImageView; 
import android.widget.TextView; 
 
import com.cloay.news.R; 
import com.cloay.news.constants.Constants; 
 
/**
 * ExpandableListView添加數據
 * @author Cloay
 * 2012-3-4
 * 下午08:10:29
 */ 
public class NewsListAdapter extends BaseExpandableListAdapter{ 
    @SuppressWarnings("rawtypes") 
    private List<List> childList = new ArrayList<List>(); 
    private LayoutInflater  inflater; 
    public NewsListAdapter(Context context) { 
        super(); 
        //初始化數據  
        initData(context); 
    } 
    /**
     * 為group及child提供數據初始化
     * @param context
     */ 
    private void initData(Context context) { 
        //設置父欄目標題  
        Constants.group.add(context.getResources().getString(R.string.sina_news)); 
        Constants.group.add(context.getResources().getString(R.string.sina_s)); 
        Constants.group.add(context.getResources().getString(R.string.sina_t)); 
        Constants.group.add(context.getResources().getString(R.string.sina_j)); 
        Constants.group.add(context.getResources().getString(R.string.sina_e)); 
        Constants.group.add(context.getResources().getString(R.string.sina_f)); 
        //每一個子欄目的標題  
        Constants.child1.add(context.getResources().getString(R.string.sina_china)); 
        Constants.child1.add(context.getResources().getString(R.string.sina_world)); 
        Constants.child2.add(context.getResources().getString(R.string.sina_s_all)); 
        Constants.child2.add(context.getResources().getString(R.string.sina_s_football)); 
        Constants.child2.add(context.getResources().getString(R.string.sina_s_nba)); 
        Constants.child3.add(context.getResources().getString(R.string.sina_t)); 
        Constants.child3.add(context.getResources().getString(R.string.sina_t_internet)); 
        Constants.child3.add(context.getResources().getString(R.string.sina_t_mobile)); 
        Constants.child4.add(context.getResources().getString(R.string.sina_j_all)); 
        Constants.child4.add(context.getResources().getString(R.string.sina_j_china)); 
        Constants.child4.add(context.getResources().getString(R.string.sina_j_world)); 
        Constants.child5.add(context.getResources().getString(R.string.sina_e_all)); 
        Constants.child6.add(context.getResources().getString(R.string.sina_f_w)); 
        Constants.child6.add(context.getResources().getString(R.string.sina_f_m)); 
         
        childList.add(Constants.child1); 
        childList.add(Constants.child2); 
        childList.add(Constants.child3); 
        childList.add(Constants.child4); 
        childList.add(Constants.child5); 
        childList.add(Constants.child6); 
        inflater = LayoutInflater.from(context); 
    } 
    public NewsListAdapter(String[] group){ 
         
    } 
    @Override 
    public int getGroupCount() { 
        return Constants.group.size(); //父欄目大小  
    } 
 
    @Override 
    public int getChildrenCount(int groupPosition) { 
        return childList.get(groupPosition).size();  //子欄目數量  
    } 
 
    @Override 
    public Object getGroup(int groupPosition) { 
        return null; 
    } 
 
    @Override 
    public Object getChild(int groupPosition, int childPosition) { 
        return null; 
    } 
 
    @Override 
    public long getGroupId(int groupPosition) { 
        return 0; 
    } 
 
    @Override 
    public long getChildId(int groupPosition, int childPosition) { 
        return 0; 
    } 
 
    @Override 
    public boolean hasStableIds() { 
        return false; 
    } 
 
    @Override 
    public View getGroupView(int groupPosition, boolean isExpanded, 
            View convertView, ViewGroup parent) { 
        if (convertView == null) {   
            convertView = inflater.inflate(   
                    R.layout.group, null);   
        }  
        ImageView image = (ImageView) convertView.findViewById(R.id.group_image); 
        //設置展開時的圖標  
        image.setImageResource(R.drawable.mm_submenu_down_normal); 
        if(!isExpanded){ 
            image.setImageResource(R.drawable.mm_submenu_normal); 
        } 
        TextView textView = (TextView) convertView.findViewById(R.id.group_text); 
        textView.setText(Constants.group.get(groupPosition));   
        return convertView; 
    } 
 
    @Override 
    public View getChildView(int groupPosition, int childPosition, 
            boolean isLastChild, View convertView, ViewGroup parent) { 
        if (convertView == null) {   
            convertView = inflater.inflate(   
                    R.layout.child, null);   
        }   
        TextView textView = (TextView) convertView.findViewById(R.id.child); 
        textView.setText((childList.get(groupPosition)).get(childPosition).toString());   
        return convertView; 
    } 
 
    @Override 
    public boolean isChildSelectable(int groupPosition, int childPosition) { 
        return true;  //<span style="color:#ff0000;">返回true才能點擊child</span>  
    } 
 
     

package com.cloay.news.bean;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.cloay.news.R;
import com.cloay.news.constants.Constants;

/**
 * ExpandableListView添加數據
 * @author Cloay
 * 2012-3-4
 * 下午08:10:29
 */
public class NewsListAdapter extends BaseExpandableListAdapter{
 @SuppressWarnings("rawtypes")
 private List<List> childList = new ArrayList<List>();
 private LayoutInflater  inflater;
 public NewsListAdapter(Context context) {
  super();
  //初始化數據
  initData(context);
 }
 /**
  * 為group及child提供數據初始化
  * @param context
  */
 private void initData(Context context) {
  //設置父欄目標題
  Constants.group.add(context.getResources().getString(R.string.sina_news));
  Constants.group.add(context.getResources().getString(R.string.sina_s));
  Constants.group.add(context.getResources().getString(R.string.sina_t));
  Constants.group.add(context.getResources().getString(R.string.sina_j));
  Constants.group.add(context.getResources().getString(R.string.sina_e));
  Constants.group.add(context.getResources().getString(R.string.sina_f));
  //每一個子欄目的標題
  Constants.child1.add(context.getResources().getString(R.string.sina_china));
  Constants.child1.add(context.getResources().getString(R.string.sina_world));
  Constants.child2.add(context.getResources().getString(R.string.sina_s_all));
  Constants.child2.add(context.getResources().getString(R.string.sina_s_football));
  Constants.child2.add(context.getResources().getString(R.string.sina_s_nba));
  Constants.child3.add(context.getResources().getString(R.string.sina_t));
  Constants.child3.add(context.getResources().getString(R.string.sina_t_internet));
  Constants.child3.add(context.getResources().getString(R.string.sina_t_mobile));
  Constants.child4.add(context.getResources().getString(R.string.sina_j_all));
  Constants.child4.add(context.getResources().getString(R.string.sina_j_china));
  Constants.child4.add(context.getResources().getString(R.string.sina_j_world));
  Constants.child5.add(context.getResources().getString(R.string.sina_e_all));
  Constants.child6.add(context.getResources().getString(R.string.sina_f_w));
  Constants.child6.add(context.getResources().getString(R.string.sina_f_m));
  
  childList.add(Constants.child1);
  childList.add(Constants.child2);
  childList.add(Constants.child3);
  childList.add(Constants.child4);
  childList.add(Constants.child5);
  childList.add(Constants.child6);
  inflater = LayoutInflater.from(context);
 }
 public NewsListAdapter(String[] group){
  
 }
 @Override
 public int getGroupCount() {
  return Constants.group.size(); //父欄目大小
 }

 @Override
 public int getChildrenCount(int groupPosition) {
  return childList.get(groupPosition).size();  //子欄目數量
 }

 @Override
 public Object getGroup(int groupPosition) {
  return null;
 }

 @Override
 public Object getChild(int groupPosition, int childPosition) {
  return null;
 }

 @Override
 public long getGroupId(int groupPosition) {
  return 0;
 }

 @Override
 public long getChildId(int groupPosition, int childPosition) {
  return 0;
 }

 @Override
 public boolean hasStableIds() {
  return false;
 }

 @Override
 public View getGroupView(int groupPosition, boolean isExpanded,
   View convertView, ViewGroup parent) {
  if (convertView == null) { 
            convertView = inflater.inflate( 
                    R.layout.group, null); 
        }
  ImageView image = (ImageView) convertView.findViewById(R.id.group_image);
  //設置展開時的圖標
  image.setImageResource(R.drawable.mm_submenu_down_normal);
  if(!isExpanded){
   image.setImageResource(R.drawable.mm_submenu_normal);
  }
        TextView textView = (TextView) convertView.findViewById(R.id.group_text);
        textView.setText(Constants.group.get(groupPosition)); 
        return convertView;
 }

 @Override
 public View getChildView(int groupPosition, int childPosition,
   boolean isLastChild, View convertView, ViewGroup parent) {
  if (convertView == null) { 
            convertView = inflater.inflate( 
                    R.layout.child, null); 
        } 
        TextView textView = (TextView) convertView.findViewById(R.id.child);
        textView.setText((childList.get(groupPosition)).get(childPosition).toString()); 
        return convertView;
 }

 @Override
 public boolean isChildSelectable(int groupPosition, int childPosition) {
  return true;  //<span style="color:#ff0000;">返回true才能點擊child</span>
 }

 
}

通過以上代碼我們就能實現想要的瞭有什麼問題請留言,大傢一起交流學習!  

 

摘自  Cloay的專欄
 
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *