ExpandableListView的美化以及出現的問題

如果有用到列表,有需要對列表分組,一般都會用到自定義ExpandableListView
,這個控件其實很自由的,可以與很多控件組合使用,現在實現以下的效果:


組與組分開可以用圖片處理,圖片關鍵是組與列表的拼接。然後就是自定義BaseExpandableListAdapter中加些判斷,就好了,下面是代碼:

主頁佈局main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg"
    android:padding="20dip">

    <!-- 自定義ExpandableListView -->
    <cn.zoeice.expandable.MyExplandableListView
        android:id="@+id/id_expandablelist"
        android:layout_width="fill_parent"
    	android:layout_height="fill_parent"
        />

</LinearLayout>

group佈局group_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/group"
    android:gravity="center_vertical" >

    <ImageView
        android:id="@+id/id_group_img"
        android:layout_width="40dip"
        android:layout_height="40dip"
        android:src="@drawable/black_leopard" />

    <TextView
        android:id="@+id/id_group_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="24sp"
        android:textColor="#FFF" />

</LinearLayout>

child佈局child_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/child"
    android:gravity="center_vertical" 
    >

    <ImageView
        android:id="@+id/id_child_img"
        android:layout_width="40dip"
        android:layout_height="40dip"
        android:src="@drawable/snow_leopard" />

    <TextView
        android:id="@+id/id_child_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="24sp"
        android:textColor="#00a8ff" />

</LinearLayout>

主頁activity的類MainDemoActivity.java

package cn.zoeice.expandable;

import android.app.Activity;
import android.os.Bundle;

/**
 * ExpandableListView UI design
* Title: MainDemoActivity
* Description:
* Company: iceTree
* @author    zoeice
* @date       2012-7-9
 */
public class MainDemoActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}


主要是自定義MyExplandableListView的類MyExplandableListView.java

package cn.zoeice.expandable;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 自定義ExplandableListView
* Title: MyExplandableListView
* Description:
* Company: iceTree
* @author    zoeice
* @date       2012-7-9
 */
public class MyExplandableListView extends ExpandableListView 
			implements OnChildClickListener,OnGroupClickListener{
	
	ExpandInfoAdapter adapter;
	private Context context_;
	
	String[] str_group_items_ = {"第一組", "第二組", "第三組", "第四組", "第五組"};
	String[][] str_child_items_ = {{"這是第一條", "這是第二條"}, {"這是第一條", "這是第二條", "這是第三條"}, {"這是第一條"}, {"這是第一條", "這是第二條"}, {"這是第一條", "這是第二條", "這是第三條", "這是第四條"}};
	
	public MyExplandableListView(Context context) {
		super(context);
		context_ = context;
		/* 隱藏默認箭頭顯示 */
		this.setGroupIndicator(null);
		/* 隱藏垂直滾動條 */
		this.setVerticalScrollBarEnabled(false);
		
		/* 監聽child,group點擊事件 */
		this.setOnChildClickListener(this);
		this.setOnGroupClickListener(this);
		
		setCacheColorHint(Color.TRANSPARENT);
		setDividerHeight(0);
		setChildrenDrawnWithCacheEnabled(false);
		setGroupIndicator(null);
		
		/*隱藏選擇的黃色高亮*/
		ColorDrawable drawable_tranparent_ = new ColorDrawable(Color.TRANSPARENT);
		setSelector(drawable_tranparent_);
		
		/*設置adapter*/
		adapter = new ExpandInfoAdapter();
		setAdapter(adapter);
	}
	
	
    
	public MyExplandableListView(Context context, AttributeSet attrs) {
		this(context);
		// TODO Auto-generated constructor stub
	}



	public class ExpandInfoAdapter extends BaseExpandableListAdapter {
	    	LinearLayout mGroupLayout;
    	
    	//++++++++++++++++++++++++++++++++++++++++++++
    	// child's stub
    	
		@Override
		public Object getChild(int groupPosition, int childPosition) {
			// TODO Auto-generated method stub
			return str_child_items_[groupPosition][childPosition];
		}

		@Override
		public long getChildId(int groupPosition, int childPosition) {
			// TODO Auto-generated method stub
			return childPosition;
		}
		
		@Override
		public int getChildrenCount(int groupPosition) {
			// TODO Auto-generated method stub
			return str_child_items_[groupPosition].length;
		}
		
		@Override
		public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView,
				ViewGroup parent) {
			// TODO Auto-generated method stub
			TextView txt_child;
			if(null == convertView){
				convertView = LayoutInflater.from(context_).inflate(R.layout.child_item, null);  
			}
			/*判斷是否是最後一項,最後一項設計特殊的背景*/
			if(isLastChild){
				convertView.setBackgroundResource(R.drawable.child_end);
			} else {
				convertView.setBackgroundResource(R.drawable.child);
			}
			
			txt_child = (TextView)convertView.findViewById(R.id.id_child_txt);
			txt_child.setText(str_child_items_[groupPosition][childPosition]);

			return convertView;
		}
				
		//++++++++++++++++++++++++++++++++++++++++++++
    	// group's stub
		
		@Override
		public Object getGroup(int groupPosition) {
			// TODO Auto-generated method stub
			return str_group_items_[groupPosition];
		}

		@Override
		public int getGroupCount() {
			// TODO Auto-generated method stub
			return str_group_items_.length;
		}

		@Override
		public long getGroupId(int groupPosition) {
			// TODO Auto-generated method stub
			return groupPosition;
		}

		@Override
		public View getGroupView(int groupPosition, boolean isExpanded,  View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			TextView txt_group;
			if(null == convertView){
				convertView = LayoutInflater.from(context_).inflate(R.layout.group_item, null);  
			}
			/*判斷是否group張開,來分別設置背景圖*/
			if(isExpanded){
				convertView.setBackgroundResource(R.drawable.group_e);
			}else{
				convertView.setBackgroundResource(R.drawable.group);
			}
			
			txt_group = (TextView)convertView.findViewById(R.id.id_group_txt);
			txt_group.setText(str_group_items_[groupPosition]);
			return convertView;
		}
		
	        @Override
		public boolean isChildSelectable(int arg0, int arg1) {
			// TODO Auto-generated method stub
			return true;
		}
		
		@Override
		public boolean hasStableIds() {
			// TODO Auto-generated method stub
			return false;
		}

	}
	
	@Override
	public boolean onChildClick(ExpandableListView parent, View v,
			int groupPosition, int childPosition, long id) {
		// TODO Auto-generated method stub
		Toast.makeText(getContext(), "hi,你竟然點擊了第" + (groupPosition + 1) + "組的第" + (childPosition + 1) + "條!", 2000).show();
		return false;
	}
	
	@Override
	public boolean onGroupClick(ExpandableListView parent, View v,
			int groupPosition, long id) {
		// TODO Auto-generated method stub
		return false;
	}

}

getView中如果用到ViewHolder的話不知道爲什麼會出現view緩存異常,可以幫我看一下嘿嘿

上代碼:

http://download.csdn.net/detail/zoeice/4419170

發佈了26 篇原創文章 · 獲贊 3 · 訪問量 28萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章