Android之IphoneTreeView帶組指示器的ExpandableListView效果

1、Android之IphoneTreeView帶組指示器的ExpandableListView效果在正在顯示的最上面的組的標(biāo)簽位置添加一個(gè)和組視圖完全一樣的視圖，作為組標(biāo)簽。這個(gè)標(biāo)簽的位置要隨著列表的滑動(dòng)不斷變化，以保持總是顯示在最上方，并且該消失的時(shí)候就消失 之前實(shí)現(xiàn)過一次這種效果的ExpandableListView： 首先讓我們看看封裝得比較完善的IphoneTreeView： 復(fù)制代碼 代碼如下:public class IphoneTreeView extends ExpandableListView implements OnScrollListener, OnGroupClickL

2、istener public IphoneTreeView(Context context, AttributeSet attrs, int defStyle) super(context, attrs, defStyle); registerListener(); public IphoneTreeView(Context context, AttributeSet attrs) super(context, attrs); registerListener(); public IphoneTreeView(Context context) super(context); registerL

3、istener(); /* * Adapter 接口 . 列表必須實(shí)現(xiàn)此接口 . */ public interface IphoneTreeHeaderAdapter public static final int PINNED_HEADER_GONE = 0; public static final int PINNED_HEADER_VISIBLE = 1; public static final int PINNED_HEADER_PUSHED_UP = 2; /* * 獲取 Header 的狀態(tài) * * param groupPosition * param childPositio

4、n * return * PINNED_HEADER_GONE,PINNED_HEADER_VISIBLE,PINNED_HEADER_PUSHED_UP * 其中之一 */ int getTreeHeaderState(int groupPosition, int childPosition); /* * 配置 QQHeader, 讓 QQHeader 知道顯示的內(nèi)容 * * param header * param groupPosition * param childPosition * param alpha */ void configureTreeHeader(View heade

5、r, int groupPosition, int childPosition, int alpha); /* * 設(shè)置組按下的狀態(tài) * * param groupPosition * param status */ void onHeadViewClick(int groupPosition, int status); /* * 獲取組按下的狀態(tài) * * param groupPosition * return */ int getHeadViewClickStatus(int groupPosition); private static final int MAX_ALPHA = 255;

6、 private IphoneTreeHeaderAdapter mAdapter; /* * 用于在列表頭顯示的 View,mHeaderViewVisible 為 true 才可見 */ private View mHeaderView; /* * 列表頭是否可見 */ private boolean mHeaderViewVisible; private int mHeaderViewWidth; private int mHeaderViewHeight; public void setHeaderView(View view) mHeaderView = view; AbsListV

7、iew.LayoutParams lp = new AbsListView.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); view.setLayoutParams(lp); if (mHeaderView != null) setFadingEdgeLength(0); requestLayout(); private void registerListener() setOnScrollListener(this); setOnGroupClickListene

8、r(this); /* * 點(diǎn)擊 HeaderView 觸發(fā)的事件 */ private void headerViewClick() long packedPosition = getExpandableListPosition(this .getFirstVisiblePosition(); int groupPosition = ExpandableListView .getPackedPositionGroup(packedPosition); if (mAdapter.getHeadViewClickStatus(groupPosition) = 1) this.collapseGr

9、oup(groupPosition); mAdapter.onHeadViewClick(groupPosition, 0); else this.expandGroup(groupPosition); mAdapter.onHeadViewClick(groupPosition, 1); this.setSelectedGroup(groupPosition); private float mDownX; private float mDownY; /* * 如果 HeaderView 是可見的 , 此函數(shù)用于判斷是否點(diǎn)擊了 HeaderView, 并對(duì)做相應(yīng)的處理 , 因?yàn)?HeaderV

10、iew * 是畫上去的 , 所以設(shè)置事件監(jiān)聽是無效的 , 只有自行控制 . */ Override public boolean onTouchEvent(MotionEvent ev) if (mHeaderViewVisible) switch (ev.getAction() case MotionEvent.ACTION_DOWN: mDownX = ev.getX(); mDownY = ev.getY(); if (mDownX <= mHeaderViewWidth && mDownY <= mHeaderViewHeight) return true;

11、 break; case MotionEvent.ACTION_UP: float x = ev.getX(); float y = ev.getY(); float offsetX = Math.abs(x - mDownX); float offsetY = Math.abs(y - mDownY); / 如果 HeaderView 是可見的 , 點(diǎn)擊在 HeaderView 內(nèi) , 那么觸發(fā) headerClick() if (x <= mHeaderViewWidth && y <= mHeaderViewHeight && offsetX

12、<= mHeaderViewWidth && offsetY <= mHeaderViewHeight) if (mHeaderView != null) headerViewClick(); return true; break; default: break; return super.onTouchEvent(ev); Override public void setAdapter(ExpandableListAdapter adapter) super.setAdapter(adapter); mAdapter = (IphoneTreeHeaderAdap

13、ter) adapter; /* * * 點(diǎn)擊了 Group 觸發(fā)的事件 , 要根據(jù)根據(jù)當(dāng)前點(diǎn)擊 Group 的狀態(tài)來 */ Override public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) if (mAdapter.getHeadViewClickStatus(groupPosition) = 0) mAdapter.onHeadViewClick(groupPosition, 1); parent.expandGroup(groupPosition); pa

14、rent.setSelectedGroup(groupPosition); else if (mAdapter.getHeadViewClickStatus(groupPosition) = 1) mAdapter.onHeadViewClick(groupPosition, 0); parent.collapseGroup(groupPosition); / 返回 true 才可以彈回第一行 , 不知道為什么 return true; Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

15、super.onMeasure(widthMeasureSpec, heightMeasureSpec); if (mHeaderView != null) measureChild(mHeaderView, widthMeasureSpec, heightMeasureSpec); mHeaderViewWidth = mHeaderView.getMeasuredWidth(); mHeaderViewHeight = mHeaderView.getMeasuredHeight(); private int mOldState = -1; Override protected void o

16、nLayout(boolean changed, int left, int top, int right, int bottom) super.onLayout(changed, left, top, right, bottom); final long flatPostion = getExpandableListPosition(getFirstVisiblePosition(); final int groupPos = ExpandableListView .getPackedPositionGroup(flatPostion); final int childPos = Expan

17、dableListView .getPackedPositionChild(flatPostion); int state = mAgetTreeHeaderState(groupPos, childPos); if (mHeaderView != null && mAdapter != null && state != mOldState) mOldState = state; mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight); configureHeaderView(groupPos,

18、 childPos); public void configureHeaderView(int groupPosition, int childPosition) if (mHeaderView = null | mAdapter = null | (ExpandableListAdapter) mAdapter).getGroupCount() = 0) return; int state = mAdapter.getTreeHeaderState(groupPosition, childPosition); switch (state) case IphoneTreeHeaderAdapt

19、er.PINNED_HEADER_GONE: mHeaderViewVisible = false; break; case IphoneTreeHeaderAdapter.PINNED_HEADER_VISIBLE: mAdapter.configureTreeHeader(mHeaderView, groupPosition, childPosition, MAX_ALPHA); if (mHeaderView.getTop() != 0) mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight); mHeaderViewV

20、isible = true; break; case IphoneTreeHeaderAdapter.PINNED_HEADER_PUSHED_UP: View firstView = getChildAt(0); int bottom = firstView.getBottom(); / intitemHeight = firstView.getHeight(); int headerHeight = mHeaderView.getHeight(); int y; int alpha; if (bottom < headerHeight) y = (bottom - headerHei

21、ght); alpha = MAX_ALPHA * (headerHeight + y) / headerHeight; else y = 0; alpha = MAX_ALPHA; mAdapter.configureTreeHeader(mHeaderView, groupPosition, childPosition, alpha); if (mHeaderView.getTop() != y) mHeaderView.layout(0, y, mHeaderViewWidth, mHeaderViewHeight + y); mHeaderViewVisible = true; bre

22、ak; Override /* * 列表界面更新時(shí)調(diào)用該方法(如滾動(dòng)時(shí)) */ protected void dispatchDraw(Canvas canvas) super.dispatchDraw(canvas); if (mHeaderViewVisible) / 分組欄是直接繪制到界面中，而不是加入到ViewGroup中 drawChild(canvas, mHeaderView, getDrawingTime(); Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleIte

23、mCount, int totalItemCount) final long flatPos = getExpandableListPosition(firstVisibleItem); int groupPosition = ExpandableListView.getPackedPositionGroup(flatPos); int childPosition = ExpandableListView.getPackedPositionChild(flatPos); configureHeaderView(groupPosition, childPosition); Override pu

24、blic void onScrollStateChanged(AbsListView view, int scrollState) 使用起來也是比較簡(jiǎn)單的，先在布局文件中聲明activity_main.xml： 復(fù)制代碼 代碼如下: <RelativeLayout xmlns:android="schemas.android/apk/res/android" xmlns:tools="schemas.android/tools" android:layout_width="match_parent" android:layout

25、_height="match_parent" tools:context=".MainActivity" > <com.way.iphonetreeview.IphoneTreeView android:id="+id/iphone_tree_view" android:layout_width="match_parent" android:layout_height="match_parent" android:background="android:color/tran

26、sparent" android:cacheColorHint="android:color/transparent" android:divider="null" android:transcriptMode="normal" /> </RelativeLayout> 然后在MainActivity中調(diào)用，為了縮減代碼，我把Adapter作為內(nèi)部類放在MainActivity中了： 復(fù)制代碼 代碼如下: public class MainActivity extends Activity private

27、LayoutInflater mInflater; private IphoneTreeView iphoneTreeView; Override protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(Ractivity_main); initView(); private void initView() / TODO Auto-generated method stub mInflater = LayoutInflater.from(this)

28、; iphoneTreeView = (IphoneTreeView) findViewById(R.id.iphone_tree_view); iphoneTreeView.setHeaderView(getLayoutInflater().inflate( R.layout.list_head_view, iphoneTreeView, false); iphoneTreeView.setGroupIndicator(null); iphoneTreeView.setAdapter(new IphoneTreeViewAdapter(); public class IphoneTreeVi

29、ewAdapter extends BaseExpandableListAdapter implements IphoneTreeHeaderAdapter / Sample data set. childreni contains the children (String) for / groupsi. private HashMap<Integer, Integer> groupStatusMap; private String groups = "第一組", "第二組", "第三組", "第四組"

30、 ; private String children = "Way", "Arnold", "Barry", "Chuck", "David", "Afghanistan", "Albania", "Belgium", "Lily", "Jim", "LiMing", "Jodan" , "Ace", "Bandit"

31、, "Cha-Cha", "Deuce", "Bahamas", "China", "Dominica", "Jim", "LiMing", "Jodan" , "Fluffy", "Snuggles", "Ecuador", "Ecuador", "Jim", "LiMing", "Jodan"

32、, "Goldy", "Bubbles", "Iceland", "Iran", "Italy", "Jim", "LiMing", "Jodan" ; public IphoneTreeViewAdapter() / TODO Auto-generated constructor stub groupStatusMap = new HashMap<Integer, Integer>(); public Object get

33、Child(int groupPosition, int childPosition) return childrengroupPositionchildPosition; public long getChildId(int groupPosition, int childPosition) return childPosition; public int getChildrenCount(int groupPosition) return childrengroupPosition.length; public Object getGroup(int groupPosition) retu

34、rn groupsgroupPosition; public int getGroupCount() return groups.length; public long getGroupId(int groupPosition) return groupPosition; public boolean isChildSelectable(int groupPosition, int childPosition) return true; public boolean hasStableIds() return true; Override public View getChildView(in

35、t groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) / TODO Auto-generated method stub if (convertView = null) convertView = mInflater.inflate(R.layout.list_item_view, null); TextView tv = (TextView) convertView .findViewById(Rtact_list_item_name); tv.setText(

36、getChild(groupPosition, childPosition).toString(); TextView state = (TextView) convertView .findViewById(R.id.cpntact_list_item_state); state.setText("愛生活.愛Android."); return convertView; Override public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup p

37、arent) / TODO Auto-generated method stub if (convertView = null) convertView = mInflater.inflate(R.layout.list_group_view, null); TextView groupName = (TextView) convertView .findViewById(R.id.group_name); groupName.setText(groupsgroupPosition); ImageView indicator = (ImageView) convertView .findVie

38、wById(R.id.group_indicator); TextView onlineNum = (TextView) convertView .findViewById(R.id.online_count); onlineNum.setText(getChildrenCount(groupPosition) + "/" + getChildrenCount(groupPosition); if (isExpanded) indicator.setImageResource(R.drawable.indicator_expanded); else indicator.setImageResource(R.drawable.indicator_unexpanded); return convertView; Override public int getTreeHeaderState(int groupPosition, int childPosition) f