自定義ExpandableListView 實現像QQ好友列表一樣的功能


直接上代碼。


1. 先自定義一個View  重寫ExpandableListView  

package com.coustom.myex;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.ExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.FrameLayout;
import android.widget.AbsListView.OnScrollListener;
import android.widget.RelativeLayout;

public class QExListView extends ExpandableListView implements OnScrollListener {
	private RelativeLayout _groupLayout;
	public int _groupIndex = -1;
	private ExpandableListAdapter _exAdapter;

	@Override
	public void setAdapter(ExpandableListAdapter adapter) {
		super.setAdapter(adapter);
	}

	/**
	 * @param context
	 */
	public QExListView(Context context) {
		super(context);
		super.setOnScrollListener(this);
	}

	/**
	 * @param context
	 * @param attrs
	 */
	public QExListView(Context context, AttributeSet attrs) {
		super(context, attrs);
		super.setOnScrollListener(this);
	}

	/**
	 * @param context
	 * @param attrs
	 * @param defStyle
	 */
	public QExListView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		super.setOnScrollListener(this);
	}

	@Override
	public void onScroll(AbsListView view, int firstVisibleItem,
			int visibleItemCount, int totalItemCount) {

		if (_exAdapter == null)
			_exAdapter = this.getExpandableListAdapter();

		int ptp = view.pointToPosition(0, 0);
		if (ptp != AdapterView.INVALID_POSITION) {
			QExListView qExlist = (QExListView) view;
			long pos = qExlist.getExpandableListPosition(ptp);
			int groupPos = ExpandableListView.getPackedPositionGroup(pos);
			int childPos = ExpandableListView.getPackedPositionChild(pos);

			if (childPos < 0) {
				groupPos = -1;
			}
			if (groupPos < _groupIndex) {

				_groupIndex = groupPos;

				if (_groupLayout != null) {
					_groupLayout.removeAllViews();
					_groupLayout.setVisibility(GONE);// 這裏設置Gone 爲了不讓它遮擋後面header
				}
			} else if (groupPos > _groupIndex) {
				final FrameLayout fl = (FrameLayout) getParent();
				_groupIndex = groupPos;
				if (_groupLayout != null)
					fl.removeView(_groupLayout);

				_groupLayout = (RelativeLayout) getExpandableListAdapter()
						.getGroupView(groupPos, true, null, null);
				_groupLayout.setOnClickListener(new OnClickListener() {

					@Override
					public void onClick(View v) {
						collapseGroup(_groupIndex);
					}
				});

				fl.addView(_groupLayout, fl.getChildCount(), new LayoutParams(
						LayoutParams.FILL_PARENT, 50));

			}
		}
	}

	@Override
	public void onScrollStateChanged(AbsListView view, int scrollState) {
	}

}

2. 設置Adapter 

package com.coustom.myex;

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;

public class ExAdapter extends BaseExpandableListAdapter {
	private ArrayList<String> group;
	private ArrayList<List<String>> child;

	public void initData() {
		group = new ArrayList<String>();
		child = new ArrayList<List<String>>();
		setData("女人健康", new String[] { "運動健康", "潮流服飾", "美容健康", "減肥瘦身", "身體健康",
				"飲食健康", "運動健康", "潮流服飾", "美容健康", "減肥瘦身", "身體健康", "飲食健康", "運動健康",
				"潮流服飾", "美容健康", "減肥瘦身", "身體健康", "飲食健康" });
		setData("女人養生", new String[] { "飲食養生", "運動養生", "健身養生", "冬季養生", "日常護理",
				"運動健康", "潮流服飾", "美容健康", "減肥瘦身", "身體健康", "飲食健康", "運動健康", "潮流服飾",
				"美容健康", "減肥瘦身", "身體健康", "飲食健康" });
		setData("其他", new String[] { "愛美我在行", "保健一點通", "喫喝有門道", "生活小竅門" });

	}

	public void setData(String group, String[] child) {
		this.group.add(group);
		List<String> listChild = new ArrayList<String>();
		for (int i = 0; i < child.length; i++) {
			listChild.add(child[i]);
		}
		this.child.add(listChild);
	}

	Context mContext;

	public ExAdapter(Context context) {
		mContext = context;
		initData();
	}

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

	@Override
	public int getChildrenCount(int groupPosition) {
		// 返回的是對應group的child大小,不能將child的所有元素返回
		return child.get(groupPosition).size();
	}

	@Override
	public Object getGroup(int groupPosition) {
		// 根據groupPosition的索引值返回group對象
		return group.get(groupPosition);
	}

	@Override
	public Object getChild(int groupPosition, int childPosition) {
		// 根據groupPosition,childPosition索引值,返回一個child對象
		return child.get(groupPosition).get(childPosition);
	}

	@Override
	public long getGroupId(int groupPosition) {
		// 返回groupPosition的id
		return groupPosition;
	}

	@Override
	public long getChildId(int groupPosition, int childPosition) {
		// 返回childPosition的id
		return childPosition;
	}

	@Override
	public boolean hasStableIds() {
		// TODO Auto-generated method stub
		return false;
	}

	/*
	 * 回調方法 isExpanded 第一次打開的時候,是否顯二級菜單
	 */
	@Override
	public View getGroupView(int groupPosition, boolean isExpanded,
			View convertView, ViewGroup parent) {
		View view = LayoutInflater.from(mContext).inflate(
				R.layout.ex_list_parent_item, parent, false);

		// 可以在這裏填充佈局
		TextView textView = (TextView) view.findViewById(R.id.textView1);
		ImageView imageView = (ImageView) view.findViewById(R.id.imageView1);
		imageView.setPadding(0, 15, 0, 0);
		textView.setText(group.get(groupPosition));
		if (isExpanded) {
			imageView.setImageResource(R.drawable.arrow_down);
		} else {
			imageView.setImageResource(R.drawable.arrow_right);
		}
		textView.setTextSize(25);
//		textView.setPadding(30, 5, 0, 5);
		return view;
	}

	// 在這裏是獲取二級list的
	@Override
	public View getChildView(int groupPosition, int childPosition,
			boolean isLastChild, View convertView, ViewGroup parent) {
		ViewHodler viewHodler = new ViewHodler();
		// 可以在這裏填充佈局
		if (convertView == null) {
			convertView = LayoutInflater.from(mContext).inflate(
					R.layout.item_list_artlist, parent, false);
			viewHodler.textView = (TextView) convertView
					.findViewById(R.id.textView1);
			convertView.setTag(viewHodler);
		} else {
			viewHodler = (ViewHodler) convertView.getTag();
		}
		viewHodler.textView
				.setText(child.get(groupPosition).get(childPosition));
		return convertView;
	}

	@Override
	public boolean isChildSelectable(int groupPosition, int childPosition) {
		// 爲false的時候,child不能點擊
		return true;
	}

	class ViewHodler {
		TextView textView;
	}

}

3. 引用  

package com.coustom.myex;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;

public class MainActivity extends Activity {
	private QExListView listView;
	private ExAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		listView = (QExListView) findViewById(R.id.MyView);
		listView.setCacheColorHint(new Color().GRAY);
		adapter = new ExAdapter(getApplicationContext());
		// listView.setOnChildClickListener(onChildClickListener);
		listView.setAdapter(adapter);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}


4. 引用剛纔自定義的View  activity_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:background="#dddddd"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <com.coustom.myex.QExListView
            android:id="@+id/MyView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:cacheColorHint="#000000"
            android:fadingEdge="none"
            android:groupIndicator="@null" >
        </com.coustom.myex.QExListView>
    </FrameLayout>

</LinearLayout>

5. 兩個自定義的 item 

① ex_list_parent_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#CCCCCC"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="25dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="37dp"
        android:paddingTop="5dp"
        android:scaleType="center"
        android:src="@drawable/arrow_right" />

</RelativeLayout>

② item_list_artlist.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="#FAe3e3"
    android:paddingLeft="20dp" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/expande_child_dian" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章