Anroid ListView分组和悬浮Header实现

目录(?)[+]

之前在使用iOS时，看到过一种分组的View，每一组都有一个Header，在上下滑动的时候，会有一个悬浮的Header，这种体验觉得很不错，请看下图：

上图中标红的1，2，3，4四张图中，当向上滑动时，仔细观察灰色条的Header变化，当第二组向上滑动时，会把第一组的悬浮Header挤上去。

这种效果在Android是没有的，iOS的SDK就自带这种效果。这篇文章就介绍如何在Android实现这种效果。

1、悬浮Header的实现

[java] view plaincopy

 

1. /** 
2.  * Adapter interface.  The list adapter must implement this interface. 
3.  */  
4. public interface PinnedHeaderAdapter {  
5.   
6.     /** 
7.      * Pinned header state: don‘t show the header. 
8.      */  
9.     public static final int PINNED_HEADER_GONE = 0;  
10.   
11.     /** 
12.      * Pinned header state: show the header at the top of the list. 
13.      */  
14.     public static final int PINNED_HEADER_VISIBLE = 1;  
15.   
16.     /** 
17.      * Pinned header state: show the header. If the header extends beyond 
18.      * the bottom of the first shown element, push it up and clip. 
19.      */  
20.     public static final int PINNED_HEADER_PUSHED_UP = 2;  
21.   
22.     /** 
23.      * Computes the desired state of the pinned header for the given 
24.      * position of the first visible list item. Allowed return values are 
25.      * {@link #PINNED_HEADER_GONE}, {@link #PINNED_HEADER_VISIBLE} or 
26.      * {@link #PINNED_HEADER_PUSHED_UP}. 
27.      */  
28.     int getPinnedHeaderState(int position);  
29.   
30.     /** 
31.      * Configures the pinned header view to match the first visible list item. 
32.      * 
33.      * @param header pinned header view. 
34.      * @param position position of the first visible list item. 
35.      * @param alpha fading of the header view, between 0 and 255. 
36.      */  
37.     void configurePinnedHeader(View header, int position, int alpha);  
38. }  

1.2、如何绘制Header View

[java] view plaincopy

 

1. @Override  
2. protected void dispatchDraw(Canvas canvas) {  
3.     super.dispatchDraw(canvas);  
4.     if (mHeaderViewVisible) {  
5.         drawChild(canvas, mHeaderView, getDrawingTime());  
6.     }  
7. }  

1.3、配置Header View

[java] view plaincopy

 

1. public void configureHeaderView(int position) {  
2.     if (mHeaderView == null || null == mAdapter) {  
3.         return;  
4.     }  
5.       
6.     int state = mAdapter.getPinnedHeaderState(position);  
7.     switch (state) {  
8.         case PinnedHeaderAdapter.PINNED_HEADER_GONE: {  
9.             mHeaderViewVisible = false;  
10.             break;  
11.         }  
12.   
13.         case PinnedHeaderAdapter.PINNED_HEADER_VISIBLE: {  
14.             mAdapter.configurePinnedHeader(mHeaderView, position, MAX_ALPHA);  
15.             if (mHeaderView.getTop() != 0) {  
16.                 mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight);  
17.             }  
18.             mHeaderViewVisible = true;  
19.             break;  
20.         }  
21.   
22.         case PinnedHeaderAdapter.PINNED_HEADER_PUSHED_UP: {  
23.             View firstView = getChildAt(0);  
24.             int bottom = firstView.getBottom();  
25.               int itemHeight = firstView.getHeight();  
26.             int headerHeight = mHeaderView.getHeight();  
27.             int y;  
28.             int alpha;  
29.             if (bottom < headerHeight) {  
30.                 y = (bottom - headerHeight);  
31.                 alpha = MAX_ALPHA * (headerHeight + y) / headerHeight;  
32.             } else {  
33.                 y = 0;  
34.                 alpha = MAX_ALPHA;  
35.             }  
36.             mAdapter.configurePinnedHeader(mHeaderView, position, alpha);  
37.             if (mHeaderView.getTop() != y) {  
38.                 mHeaderView.layout(0, y, mHeaderViewWidth, mHeaderViewHeight + y);  
39.             }  
40.             mHeaderViewVisible = true;  
41.             break;  
42.         }  
43.     }  
44. }  

1.4、onLayout和onMeasure

[java] view plaincopy

 

1. @Override  
2. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
3.     super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
4.     if (mHeaderView != null) {  
5.         measureChild(mHeaderView, widthMeasureSpec, heightMeasureSpec);  
6.         mHeaderViewWidth = mHeaderView.getMeasuredWidth();  
7.         mHeaderViewHeight = mHeaderView.getMeasuredHeight();  
8.     }  
9. }  
10.   
11. @Override  
12. protected void onLayout(boolean changed, int left, int top, int right, int bottom) {  
13.     super.onLayout(changed, left, top, right, bottom);  
14.     if (mHeaderView != null) {  
15.         mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight);  
16.         configureHeaderView(getFirstVisiblePosition());  
17.     }  
18. }  

好了，到这里，悬浮Header View就完了，各位可能看不到完整的代码，只要明白这几个核心的方法，自己写出来，也差不多了。

2、ListView Section实现

每一个ItemView中包含Header，通过数据来控制其显示或隐藏，实现原理如下图：

3、Adapter的实现

[java] view plaincopy

 

1. private class ListViewAdapter extends BaseAdapter implements PinnedHeaderAdapter {  
2.       
3.     private ArrayList<Contact> mDatas;  
4.     private static final int TYPE_CATEGORY_ITEM = 0;    
5.     private static final int TYPE_ITEM = 1;    
6.       
7.     public ListViewAdapter(ArrayList<Contact> datas) {  
8.         mDatas = datas;  
9.     }  
10.       
11.     @Override  
12.     public boolean areAllItemsEnabled() {  
13.         return false;  
14.     }  
15.       
16.     @Override  
17.     public boolean isEnabled(int position) {  
18.         // 异常情况处理    
19.         if (null == mDatas || position <  0|| position > getCount()) {  
20.             return true;  
21.         }   
22.           
23.         Contact item = mDatas.get(position);  
24.         if (item.isSection) {  
25.             return false;  
26.         }  
27.           
28.         return true;  
29.     }  
30.       
31.     @Override  
32.     public int getCount() {  
33.         return mDatas.size();  
34.     }  
35.       
36.     @Override  
37.     public int getItemViewType(int position) {  
38.         // 异常情况处理    
39.         if (null == mDatas || position <  0|| position > getCount()) {  
40.             return TYPE_ITEM;  
41.         }   
42.           
43.         Contact item = mDatas.get(position);  
44.         if (item.isSection) {  
45.             return TYPE_CATEGORY_ITEM;  
46.         }  
47.           
48.         return TYPE_ITEM;  
49.     }  
50.   
51.     @Override  
52.     public int getViewTypeCount() {  
53.         return 2;  
54.     }  
55.   
56.     @Override  
57.     public Object getItem(int position) {  
58.         return (position >= 0 && position < mDatas.size()) ? mDatas.get(position) : 0;  
59.     }  
60.   
61.     @Override  
62.     public long getItemId(int position) {  
63.         return 0;  
64.     }  
65.   
66.     @Override  
67.     public View getView(int position, View convertView, ViewGroup parent) {  
68.         int itemViewType = getItemViewType(position);  
69.         Contact data = (Contact) getItem(position);  
70.         TextView itemView;  
71.           
72.         switch (itemViewType) {  
73.         case TYPE_ITEM:  
74.             if (null == convertView) {  
75.                 itemView = new TextView(SectionListView.this);  
76.                 itemView.setLayoutParams(new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,  
77.                         mItemHeight));  
78.                 itemView.setTextSize(16);  
79.                 itemView.setPadding(10, 0, 0, 0);  
80.                 itemView.setGravity(Gravity.CENTER_VERTICAL);  
81.                 //itemView.setBackgroundColor(Color.argb(255, 20, 20, 20));  
82.                 convertView = itemView;  
83.             }  
84.               
85.             itemView = (TextView) convertView;  
86.             itemView.setText(data.toString());  
87.             break;  
88.               
89.         case TYPE_CATEGORY_ITEM:  
90.             if (null == convertView) {  
91.                 convertView = getHeaderView();  
92.             }  
93.             itemView = (TextView) convertView;  
94.             itemView.setText(data.toString());  
95.             break;  
96.         }  
97.           
98.         return convertView;  
99.     }  
100.   
101.     @Override  
102.     public int getPinnedHeaderState(int position) {  
103.         if (position < 0) {  
104.             return PINNED_HEADER_GONE;  
105.         }  
106.           
107.         Contact item = (Contact) getItem(position);  
108.         Contact itemNext = (Contact) getItem(position + 1);  
109.         boolean isSection = item.isSection;  
110.         boolean isNextSection = (null != itemNext) ? itemNext.isSection : false;  
111.         if (!isSection && isNextSection) {  
112.             return PINNED_HEADER_PUSHED_UP;  
113.         }  
114.           
115.         return PINNED_HEADER_VISIBLE;  
116.     }  
117.   
118.     @Override  
119.     public void configurePinnedHeader(View header, int position, int alpha) {  
120.         Contact item = (Contact) getItem(position);  
121.         if (null != item) {  
122.             if (header instanceof TextView) {  
123.                 ((TextView) header).setText(item.sectionStr);  
124.             }  
125.         }  
126.     }  
127. }  

在getPinnedHeaderState方法中，如果第一个item不是section，第二个item是section的话，就返回状态PINNED_HEADER_PUSHED_UP，否则返回PINNED_HEADER_VISIBLE。

在configurePinnedHeader方法中，就是将item的section字符串设置到header view上面去。

 

【重要说明】

Adapter中的数据里面已经包含了section(header)的数据，数据结构中有一个方法来标识它是否是section。那么，在点击事件就要注意了，通过position可能返回的是section数据结构。

 

数据结构Contact的定义如下：

[java] view plaincopy

 

1. public class Contact {  
2.     int id;  
3.     String name;  
4.     String pinyin;  
5.     String sortLetter = "#";  
6.     String sectionStr;  
7.     String phoneNumber;  
8.     boolean isSection;  
9.     static CharacterParser sParser = CharacterParser.getInstance();  
10.       
11.     Contact() {  
12.           
13.     }  
14.       
15.     Contact(int id, String name) {  
16.         this.id = id;  
17.         this.name = name;  
18.         this.pinyin = sParser.getSpelling(name);  
19.         if (!TextUtils.isEmpty(pinyin)) {  
20.             String sortString = this.pinyin.substring(0, 1).toUpperCase();  
21.             if (sortString.matches("[A-Z]")) {  
22.                 this.sortLetter = sortString.toUpperCase();  
23.             } else {  
24.                 this.sortLetter = "#";  
25.             }  
26.         }  
27.     }  
28.       
29.     @Override  
30.     public String toString() {  
31.         if (isSection) {  
32.             return name;  
33.         } else {  
34.             //return name + " (" + sortLetter + ", " + pinyin + ")";  
35.             return name + " (" + phoneNumber + ")";  
36.         }  
37.     }  
38. }    

 

完整的代码

[java] view plaincopy

 

1. package com.lee.sdk.test.section;  
2.   
3. import java.util.ArrayList;  
4.   
5. import android.graphics.Color;  
6. import android.os.Bundle;  
7. import android.view.Gravity;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10. import android.widget.AbsListView;  
11. import android.widget.AdapterView;  
12. import android.widget.AdapterView.OnItemClickListener;  
13. import android.widget.BaseAdapter;  
14. import android.widget.TextView;  
15. import android.widget.Toast;  
16.   
17. import com.lee.sdk.test.GABaseActivity;  
18. import com.lee.sdk.test.R;  
19. import com.lee.sdk.widget.PinnedHeaderListView;  
20. import com.lee.sdk.widget.PinnedHeaderListView.PinnedHeaderAdapter;  
21.   
22. public class SectionListView extends GABaseActivity {  
23.   
24.     private int mItemHeight = 55;  
25.     private int mSecHeight = 25;  
26.       
27.     @Override  
28.     protected void onCreate(Bundle savedInstanceState) {  
29.         super.onCreate(savedInstanceState);  
30.         setContentView(R.layout.activity_main);  
31.           
32.         float density = getResources().getDisplayMetrics().density;  
33.         mItemHeight = (int) (density * mItemHeight);  
34.         mSecHeight = (int) (density * mSecHeight);  
35.           
36.         PinnedHeaderListView mListView = new PinnedHeaderListView(this);  
37.         mListView.setAdapter(new ListViewAdapter(ContactLoader.getInstance().getContacts(this)));  
38.         mListView.setPinnedHeaderView(getHeaderView());  
39.         mListView.setBackgroundColor(Color.argb(255, 20, 20, 20));  
40.         mListView.setOnItemClickListener(new OnItemClickListener() {  
41.             @Override  
42.             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
43.                 ListViewAdapter adapter = ((ListViewAdapter) parent.getAdapter());  
44.                 Contact data = (Contact) adapter.getItem(position);  
45.                 Toast.makeText(SectionListView.this, data.toString(), Toast.LENGTH_SHORT).show();  
46.             }  
47.         });  
48.   
49.         setContentView(mListView);  
50.     }  
51.       
52.     private View getHeaderView() {  
53.         TextView itemView = new TextView(SectionListView.this);  
54.         itemView.setLayoutParams(new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,  
55.                 mSecHeight));  
56.         itemView.setGravity(Gravity.CENTER_VERTICAL);  
57.         itemView.setBackgroundColor(Color.WHITE);  
58.         itemView.setTextSize(20);  
59.         itemView.setTextColor(Color.GRAY);  
60.         itemView.setBackgroundResource(R.drawable.section_listview_header_bg);  
61.         itemView.setPadding(10, 0, 0, itemView.getPaddingBottom());  
62.           
63.         return itemView;  
64.     }  
65.   
66.     private class ListViewAdapter extends BaseAdapter implements PinnedHeaderAdapter {  
67.           
68.         private ArrayList<Contact> mDatas;  
69.         private static final int TYPE_CATEGORY_ITEM = 0;    
70.         private static final int TYPE_ITEM = 1;    
71.           
72.         public ListViewAdapter(ArrayList<Contact> datas) {  
73.             mDatas = datas;  
74.         }  
75.           
76.         @Override  
77.         public boolean areAllItemsEnabled() {  
78.             return false;  
79.         }  
80.           
81.         @Override  
82.         public boolean isEnabled(int position) {  
83.             // 异常情况处理    
84.             if (null == mDatas || position <  0|| position > getCount()) {  
85.                 return true;  
86.             }   
87.               
88.             Contact item = mDatas.get(position);  
89.             if (item.isSection) {  
90.                 return false;  
91.             }  
92.               
93.             return true;  
94.         }  
95.           
96.         @Override  
97.         public int getCount() {  
98.             return mDatas.size();  
99.         }  
100.           
101.         @Override  
102.         public int getItemViewType(int position) {  
103.             // 异常情况处理    
104.             if (null == mDatas || position <  0|| position > getCount()) {  
105.                 return TYPE_ITEM;  
106.             }   
107.               
108.             Contact item = mDatas.get(position);  
109.             if (item.isSection) {  
110.                 return TYPE_CATEGORY_ITEM;  
111.             }  
112.               
113.             return TYPE_ITEM;  
114.         }  
115.   
116.         @Override  
117.         public int getViewTypeCount() {  
118.             return 2;  
119.         }  
120.   
121.         @Override  
122.         public Object getItem(int position) {  
123.             return (position >= 0 && position < mDatas.size()) ? mDatas.get(position) : 0;  
124.         }  
125.   
126.         @Override  
127.         public long getItemId(int position) {  
128.             return 0;  
129.         }  
130.   
131.         @Override  
132.         public View getView(int position, View convertView, ViewGroup parent) {  
133.             int itemViewType = getItemViewType(position);  
134.             Contact data = (Contact) getItem(position);  
135.             TextView itemView;  
136.               
137.             switch (itemViewType) {  
138.             case TYPE_ITEM:  
139.                 if (null == convertView) {  
140.                     itemView = new TextView(SectionListView.this);  
141.                     itemView.setLayoutParams(new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,  
142.                             mItemHeight));  
143.                     itemView.setTextSize(16);  
144.                     itemView.setPadding(10, 0, 0, 0);  
145.                     itemView.setGravity(Gravity.CENTER_VERTICAL);  
146.                     //itemView.setBackgroundColor(Color.argb(255, 20, 20, 20));  
147.                     convertView = itemView;  
148.                 }  
149.                   
150.                 itemView = (TextView) convertView;  
151.                 itemView.setText(data.toString());  
152.                 break;  
153.                   
154.             case TYPE_CATEGORY_ITEM:  
155.                 if (null == convertView) {  
156.                     convertView = getHeaderView();  
157.                 }  
158.                 itemView = (TextView) convertView;  
159.                 itemView.setText(data.toString());  
160.                 break;  
161.             }  
162.               
163.             return convertView;  
164.         }  
165.   
166.         @Override  
167.         public int getPinnedHeaderState(int position) {  
168.             if (position < 0) {  
169.                 return PINNED_HEADER_GONE;  
170.             }  
171.               
172.             Contact item = (Contact) getItem(position);  
173.             Contact itemNext = (Contact) getItem(position + 1);  
174.             boolean isSection = item.isSection;  
175.             boolean isNextSection = (null != itemNext) ? itemNext.isSection : false;  
176.             if (!isSection && isNextSection) {  
177.                 return PINNED_HEADER_PUSHED_UP;  
178.             }  
179.               
180.             return PINNED_HEADER_VISIBLE;  
181.         }  
182.   
183.         @Override  
184.         public void configurePinnedHeader(View header, int position, int alpha) {  
185.             Contact item = (Contact) getItem(position);  
186.             if (null != item) {  
187.                 if (header instanceof TextView) {  
188.                     ((TextView) header).setText(item.sectionStr);  
189.                 }  
190.             }  
191.         }  
192.     }  
193. }  

关于数据加载，分组的逻辑这里就不列出了，数据分组请参考：