学习日记--PinnedSectionListView（类似通讯录分组）的测试

常用的联系人、通讯录，会按照联系人的姓氏从A，B，C，，，X，Y，Z，这样归类排列下去，方便用户快速查找和定位。PinnedSectionListView是一个第三方的开源框架，在github上的链接地址是：https://github.com/beworker/pinned-section-listview 。Android PinnedSectionListView不仅是一个实现上述功能且有“pinded”的ListView，而且PinnedSectionListView在向上滚动或者向下滚动时候会有一些特殊效果：分组的标签会悬停在ListView的顶部，直到该分组被滑出/滑入整个ListView的可视界面而呈现出弹入弹出效果。

实现上述功能，直接将PinnedSectionListView作为一个普通的ListView即可，但重点是在构造PinnedSectionListView适配器Adapter时，每一个Item需要小心设置View Type。

效果图如下：

一、测试用的主MainActivity.java

package com.hxzy.pinnedsectionlistview;import java.util.ArrayList;import com.hxzy.pinnedsectionlistview.PinnedSectionListView.PinnedSectionListAdapter;import android.app.Activity;import android.app.ListActivity;import android.content.Context;import android.graphics.Color;import android.os.Bundle;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ListView;import android.widget.TextView;public class MainActivity extends Activity {// 数据集。private ArrayList<Item> items;// ListView之Item的View Type数量。private final int VIEW_TYPE_COUNT = 2;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);items = new ArrayList<Item>();// 假设我们演示以A,B,C,,,F这样的字符串作为分组的标签。// 每一组装载5个子数据。String[] groups = { "A", "B", "C", "D", "E", "F" };for (int i = 0; i < groups.length; i++) {String s = groups[i];Item group = new Item();group.type = Item.GROUP;group.text = s;items.add(group);for (int j = 0; j < 5; j++) {Item child = new Item();child.type = Item.CHILD;child.text = s + "组数据" + j;items.add(child);}}PinnedSectionListView psListView = (PinnedSectionListView) findViewById(R.id.pListView);psListView.setAdapter(new MyAdapter(this, -1));}private class Item {public static final int GROUP = 0;public static final int CHILD = 1;public int type;public String text;}private class MyAdapter extends ArrayAdapter implements PinnedSectionListAdapter {private LayoutInflater flater;public MyAdapter(Context context, int resource) {super(context, resource);flater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);}// 假设此方法返回皆为false。那么PinnedSectionListView将退化成为一个基础的ListView.// 只不过退化后的ListView只是一个拥有两个View Type的ListView。// 从某种角度上讲，此方法对于PinnedSectionListView至关重要，因为返回值true或false，// 将直接导致PinnedSectionListView是一个PinnedSectionListView，还是一个普通的ListView。@Overridepublic int getItemViewType(int position) {return getItem(position).type;}// 2个type：GROUP或者CHILD。public int getViewTypeCount() {return VIEW_TYPE_COUNT;}@Overridepublic int getCount() {return items.size();}@Overridepublic Item getItem(int position) {Item item = items.get(position);return item;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {int type = this.getItemViewType(position);if (type == Item.GROUP) {convertView = flater.inflate(android.R.layout.simple_list_item_1, null);TextView text_group = (TextView) convertView.findViewById(android.R.id.text1);text_group.setText(getItem(position).text);text_group.setBackgroundColor(Color.RED);// 将背景设置为半透明，更好的观察效果。// text.getBackground().setAlpha(128);}if (type == Item.CHILD) {convertView = flater.inflate(android.R.layout.simple_list_item_1, null);TextView text_child = (TextView) convertView.findViewById(android.R.id.text1);text_child.setText(getItem(position).text);}return convertView;}@Overridepublic boolean isItemViewTypePinned(int viewType) {boolean type = false;switch (viewType) {case Item.GROUP: {type = true;break;}case Item.CHILD: {type = false;break;}default:type = false;break;}return type;}}}

二、第三方开源的PinnedSectionListView全部源代码：

/* * Copyright (C) 2013 Sergej Shafarenka, halfbit.de * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file kt in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.hxzy.pinnedsectionlistview;import android.content.Context;import android.database.DataSetObserver;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.PointF;import android.graphics.Rect;import android.graphics.drawable.GradientDrawable;import android.graphics.drawable.GradientDrawable.Orientation;import android.os.Parcelable;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.SoundEffectConstants;import android.view.View;import android.view.ViewConfiguration;import android.view.ViewGroup;import android.view.accessibility.AccessibilityEvent;import android.widget.AbsListView;import android.widget.HeaderViewListAdapter;import android.widget.ListAdapter;import android.widget.ListView;import android.widget.SectionIndexer;/** * ListView, which is capable to pin section views at its top while the rest is still scrolled. */public class PinnedSectionListView extends ListView {    //-- inner classes/** List adapter to be implemented for being used with PinnedSectionListView adapter. */public static interface PinnedSectionListAdapter extends ListAdapter {/** This method shall return 'true' if views of given type has to be pinned. */boolean isItemViewTypePinned(int viewType);}/** Wrapper class for pinned section view and its position in the list. */static class PinnedSection {public View view;public int position;public long id;}//-- class fields    // fields used for handling touch events    private final Rect mTouchRect = new Rect();    private final PointF mTouchPoint = new PointF();    private int mTouchSlop;    private View mTouchTarget;    private MotionEvent mDownEvent;    // fields used for drawing shadow under a pinned section    private GradientDrawable mShadowDrawable;    private int mSectionsDistanceY;    private int mShadowHeight;    /** Delegating listener, can be null. */    OnScrollListener mDelegateOnScrollListener;    /** Shadow for being recycled, can be null. */    PinnedSection mRecycleSection;    /** shadow instance with a pinned view, can be null. */    PinnedSection mPinnedSection;    /** Pinned view Y-translation. We use it to stick pinned view to the next section. */    int mTranslateY;/** Scroll listener which does the magic */private final OnScrollListener mOnScrollListener = new OnScrollListener() {@Override public void onScrollStateChanged(AbsListView view, int scrollState) {if (mDelegateOnScrollListener != null) { // delegatemDelegateOnScrollListener.onScrollStateChanged(view, scrollState);}}@Override        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {            if (mDelegateOnScrollListener != null) { // delegate                mDelegateOnScrollListener.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount);            }            // get expected adapter or fail fast            ListAdapter adapter = getAdapter();            if (adapter == null || visibleItemCount == 0) return; // nothing to do            final boolean isFirstVisibleItemSection =                    isItemViewTypePinned(adapter, adapter.getItemViewType(firstVisibleItem));            if (isFirstVisibleItemSection) {                View sectionView = getChildAt(0);                if (sectionView.getTop() == getPaddingTop()) { // view sticks to the top, no need for pinned shadow                    destroyPinnedShadow();                } else { // section doesn't stick to the top, make sure we have a pinned shadow                    ensureShadowForPosition(firstVisibleItem, firstVisibleItem, visibleItemCount);                }            } else { // section is not at the first visible position                int sectionPosition = findCurrentSectionPosition(firstVisibleItem);                if (sectionPosition > -1) { // we have section position                    ensureShadowForPosition(sectionPosition, firstVisibleItem, visibleItemCount);                } else { // there is no section for the first visible item, destroy shadow                    destroyPinnedShadow();                }            }};};/** Default change observer. */    private final DataSetObserver mDataSetObserver = new DataSetObserver() {        @Override public void onChanged() {            recreatePinnedShadow();        };        @Override public void onInvalidated() {            recreatePinnedShadow();        }    };//-- constructors    public PinnedSectionListView(Context context, AttributeSet attrs) {        super(context, attrs);        initView();    }    public PinnedSectionListView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        initView();    }    private void initView() {        setOnScrollListener(mOnScrollListener);        mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();        initShadow(true);    }    //-- public API methods    public void setShadowVisible(boolean visible) {        initShadow(visible);        if (mPinnedSection != null) {            View v = mPinnedSection.view;            invalidate(v.getLeft(), v.getTop(), v.getRight(), v.getBottom() + mShadowHeight);        }    }    //-- pinned section drawing methods    public void initShadow(boolean visible) {        if (visible) {            if (mShadowDrawable == null) {                mShadowDrawable = new GradientDrawable(Orientation.TOP_BOTTOM,                        new int[] { Color.parseColor("#ffa0a0a0"), Color.parseColor("#50a0a0a0"), Color.parseColor("#00a0a0a0")});                mShadowHeight = (int) (8 * getResources().getDisplayMetrics().density);            }        } else {            if (mShadowDrawable != null) {                mShadowDrawable = null;                mShadowHeight = 0;            }        }    }    protected ViewGroup.LayoutParams generateDefaultLayoutParams() {                  LayoutParams mLayoutParams=new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);                    return mLayoutParams;         }  /** Create shadow wrapper with a pinned view for a view at given position */void createPinnedShadow(int position) {// try to recycle shadowPinnedSection pinnedShadow = mRecycleSection;mRecycleSection = null;// create new shadow, if neededif (pinnedShadow == null) pinnedShadow = new PinnedSection();// request new view using recycled view, if suchView pinnedView = getAdapter().getView(position, pinnedShadow.view, PinnedSectionListView.this);// read layout parametersLayoutParams layoutParams = (LayoutParams) pinnedView.getLayoutParams();if (layoutParams == null) {    layoutParams = (LayoutParams) generateDefaultLayoutParams();    pinnedView.setLayoutParams(layoutParams);}int heightMode = MeasureSpec.getMode(layoutParams.height);int heightSize = MeasureSpec.getSize(layoutParams.height);if (heightMode == MeasureSpec.UNSPECIFIED) heightMode = MeasureSpec.EXACTLY;int maxHeight = getHeight() - getListPaddingTop() - getListPaddingBottom();if (heightSize > maxHeight) heightSize = maxHeight;// measure & layoutint ws = MeasureSpec.makeMeasureSpec(getWidth() - getListPaddingLeft() - getListPaddingRight(), MeasureSpec.EXACTLY);int hs = MeasureSpec.makeMeasureSpec(heightSize, heightMode);pinnedView.measure(ws, hs);pinnedView.layout(0, 0, pinnedView.getMeasuredWidth(), pinnedView.getMeasuredHeight());mTranslateY = 0;// initialize pinned shadowpinnedShadow.view = pinnedView;pinnedShadow.position = position;pinnedShadow.id = getAdapter().getItemId(position);// store pinned shadowmPinnedSection = pinnedShadow;}/** Destroy shadow wrapper for currently pinned view */void destroyPinnedShadow() {    if (mPinnedSection != null) {        // keep shadow for being recycled later        mRecycleSection = mPinnedSection;        mPinnedSection = null;    }}/** Makes sure we have an actual pinned shadow for given position. */    void ensureShadowForPosition(int sectionPosition, int firstVisibleItem, int visibleItemCount) {        if (visibleItemCount < 2) { // no need for creating shadow at all, we have a single visible item            destroyPinnedShadow();            return;        }        if (mPinnedSection != null                && mPinnedSection.position != sectionPosition) { // invalidate shadow, if required            destroyPinnedShadow();        }        if (mPinnedSection == null) { // create shadow, if empty            createPinnedShadow(sectionPosition);        }        // align shadow according to next section position, if needed        int nextPosition = sectionPosition + 1;        if (nextPosition < getCount()) {            int nextSectionPosition = findFirstVisibleSectionPosition(nextPosition,                    visibleItemCount - (nextPosition - firstVisibleItem));            if (nextSectionPosition > -1) {                View nextSectionView = getChildAt(nextSectionPosition - firstVisibleItem);                final int bottom = mPinnedSection.view.getBottom() + getPaddingTop();                mSectionsDistanceY = nextSectionView.getTop() - bottom;                if (mSectionsDistanceY < 0) {                    // next section overlaps pinned shadow, move it up                    mTranslateY = mSectionsDistanceY;                } else {                    // next section does not overlap with pinned, stick to top                    mTranslateY = 0;                }            } else {                // no other sections are visible, stick to top                mTranslateY = 0;                mSectionsDistanceY = Integer.MAX_VALUE;            }        }    }int findFirstVisibleSectionPosition(int firstVisibleItem, int visibleItemCount) {ListAdapter adapter = getAdapter();        int adapterDataCount = adapter.getCount();        if (getLastVisiblePosition() >= adapterDataCount) return -1; // dataset has changed, no candidate        if (firstVisibleItem+visibleItemCount >= adapterDataCount){//added to prevent index Outofbound (in case)            visibleItemCount = adapterDataCount-firstVisibleItem;        }for (int childIndex = 0; childIndex < visibleItemCount; childIndex++) {int position = firstVisibleItem + childIndex;int viewType = adapter.getItemViewType(position);if (isItemViewTypePinned(adapter, viewType)) return position;}return -1;}int findCurrentSectionPosition(int fromPosition) {ListAdapter adapter = getAdapter();if (fromPosition >= adapter.getCount()) return -1; // dataset has changed, no candidateif (adapter instanceof SectionIndexer) {// try fast way by asking section indexerSectionIndexer indexer = (SectionIndexer) adapter;int sectionPosition = indexer.getSectionForPosition(fromPosition);int itemPosition = indexer.getPositionForSection(sectionPosition);int typeView = adapter.getItemViewType(itemPosition);if (isItemViewTypePinned(adapter, typeView)) {return itemPosition;} // else, no luck}// try slow way by looking through to the next section item abovefor (int position=fromPosition; position>=0; position--) {int viewType = adapter.getItemViewType(position);if (isItemViewTypePinned(adapter, viewType)) return position;}return -1; // no candidate found}void recreatePinnedShadow() {    destroyPinnedShadow();        ListAdapter adapter = getAdapter();        if (adapter != null && adapter.getCount() > 0) {            int firstVisiblePosition = getFirstVisiblePosition();            int sectionPosition = findCurrentSectionPosition(firstVisiblePosition);            if (sectionPosition == -1) return; // no views to pin, exit            ensureShadowForPosition(sectionPosition,                    firstVisiblePosition, getLastVisiblePosition() - firstVisiblePosition);        }}@Overridepublic void setOnScrollListener(OnScrollListener listener) {if (listener == mOnScrollListener) {super.setOnScrollListener(listener);} else {mDelegateOnScrollListener = listener;}}@Overridepublic void onRestoreInstanceState(Parcelable state) {super.onRestoreInstanceState(state);post(new Runnable() {@Override public void run() { // restore pinned view after configuration change    recreatePinnedShadow();}});}@Overridepublic void setAdapter(ListAdapter adapter) {    // assert adapter in debug modeif (BuildConfig.DEBUG && adapter != null) {if (!(adapter instanceof PinnedSectionListAdapter))throw new IllegalArgumentException("Does your adapter implement PinnedSectionListAdapter?");if (adapter.getViewTypeCount() < 2)throw new IllegalArgumentException("Does your adapter handle at least two types" +" of views in getViewTypeCount() method: items and sections?");}// unregister observer at old adapter and register on new oneListAdapter oldAdapter = getAdapter();if (oldAdapter != null) oldAdapter.unregisterDataSetObserver(mDataSetObserver);if (adapter != null) adapter.registerDataSetObserver(mDataSetObserver);// destroy pinned shadow, if new adapter is not same as old oneif (oldAdapter != adapter) destroyPinnedShadow();super.setAdapter(adapter);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {    super.onLayout(changed, l, t, r, b);        if (mPinnedSection != null) {            int parentWidth = r - l - getPaddingLeft() - getPaddingRight();            int shadowWidth = mPinnedSection.view.getWidth();            if (parentWidth != shadowWidth) {                recreatePinnedShadow();            }        }}@Overrideprotected void dispatchDraw(Canvas canvas) {super.dispatchDraw(canvas);if (mPinnedSection != null) {// prepare variablesint pLeft = getListPaddingLeft();int pTop = getListPaddingTop();View view = mPinnedSection.view;// draw childcanvas.save();int clipHeight = view.getHeight() +        (mShadowDrawable == null ? 0 : Math.min(mShadowHeight, mSectionsDistanceY));canvas.clipRect(pLeft, pTop, pLeft + view.getWidth(), pTop + clipHeight);canvas.translate(pLeft, pTop + mTranslateY);drawChild(canvas, mPinnedSection.view, getDrawingTime());if (mShadowDrawable != null && mSectionsDistanceY > 0) {    mShadowDrawable.setBounds(mPinnedSection.view.getLeft(),            mPinnedSection.view.getBottom(),            mPinnedSection.view.getRight(),            mPinnedSection.view.getBottom() + mShadowHeight);    mShadowDrawable.draw(canvas);}canvas.restore();}}//-- touch handling methods    @Override    public boolean dispatchTouchEvent(MotionEvent ev) {        final float x = ev.getX();        final float y = ev.getY();        final int action = ev.getAction();        if (action == MotionEvent.ACTION_DOWN                && mTouchTarget == null                && mPinnedSection != null                && isPinnedViewTouched(mPinnedSection.view, x, y)) { // create touch target            // user touched pinned view            mTouchTarget = mPinnedSection.view;            mTouchPoint.x = x;            mTouchPoint.y = y;            // copy down event for eventually be used later            mDownEvent = MotionEvent.obtain(ev);        }        if (mTouchTarget != null) {            if (isPinnedViewTouched(mTouchTarget, x, y)) { // forward event to pinned view                mTouchTarget.dispatchTouchEvent(ev);            }            if (action == MotionEvent.ACTION_UP) { // perform onClick on pinned view                super.dispatchTouchEvent(ev);                performPinnedItemClick();                clearTouchTarget();            } else if (action == MotionEvent.ACTION_CANCEL) { // cancel                clearTouchTarget();            } else if (action == MotionEvent.ACTION_MOVE) {                if (Math.abs(y - mTouchPoint.y) > mTouchSlop) {                    // cancel sequence on touch target                    MotionEvent event = MotionEvent.obtain(ev);                    event.setAction(MotionEvent.ACTION_CANCEL);                    mTouchTarget.dispatchTouchEvent(event);                    event.recycle();                    // provide correct sequence to super class for further handling                    super.dispatchTouchEvent(mDownEvent);                    super.dispatchTouchEvent(ev);                    clearTouchTarget();                }            }            return true;        }        // call super if this was not our pinned view        return super.dispatchTouchEvent(ev);    }    private boolean isPinnedViewTouched(View view, float x, float y) {        view.getHitRect(mTouchRect);        // by taping top or bottom padding, the list performs on click on a border item.        // we don't add top padding here to keep behavior consistent.        mTouchRect.top += mTranslateY;        mTouchRect.bottom += mTranslateY + getPaddingTop();        mTouchRect.left += getPaddingLeft();        mTouchRect.right -= getPaddingRight();        return mTouchRect.contains((int)x, (int)y);    }    private void clearTouchTarget() {        mTouchTarget = null;        if (mDownEvent != null) {            mDownEvent.recycle();            mDownEvent = null;        }    }    private boolean performPinnedItemClick() {        if (mPinnedSection == null) return false;        OnItemClickListener listener = getOnItemClickListener();        if (listener != null && getAdapter().isEnabled(mPinnedSection.position)) {            View view =  mPinnedSection.view;            playSoundEffect(SoundEffectConstants.CLICK);            if (view != null) {                view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_CLICKED);            }            listener.onItemClick(this, view, mPinnedSection.position, mPinnedSection.id);            return true;        }        return false;    }    public static boolean isItemViewTypePinned(ListAdapter adapter, int viewType) {        if (adapter instanceof HeaderViewListAdapter) {            adapter = ((HeaderViewListAdapter)adapter).getWrappedAdapter();        }        return ((PinnedSectionListAdapter) adapter).isItemViewTypePinned(viewType);    }}

三、layout布局文件（activity_main.xml文件，把PinnedSectionListView直接作为ListView使用：）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.hxzy.pinnedsectionlistview.MainActivity" >    <com.hxzy.pinnedsectionlistview.PinnedSectionListView        android:id="@+id/pListView"         android:layout_width="match_parent"        android:layout_height="wrap_content"        /></RelativeLayout>