PinnedSectionListView的实现原理

最新推荐文章于 2024-03-23 09:34:44 发布

aspook

最新推荐文章于 2024-03-23 09:34:44 发布

阅读量3.6k

点赞数 1

分类专栏： Android 文章标签： Android PinnedSectionListVie 磁铁吸附效果

本文链接：https://blog.csdn.net/ahence/article/details/43407151

版权

Android 专栏收录该内容

71 篇文章 1 订阅

订阅专栏

最近使用新浪体育客户端看NBA新闻，发现其比赛界面也采用了磁铁效果，即上下滑动ListView时，当前时间条会吸附在界面的顶部，具体效果如下图：

其实Android手机自带的联系人界面（至少Nexus 4是）也实现了这种效果，滑动联系人列表时，会把当前联系人分组首字母固定在顶端。这种效果的确很酷，如果你问这么酷的效果是否很难实现呢？请记住在我们尚未成为最前沿拓荒者的时候，总有人会在我们前面，我们要做的就是好好学习，努力追赶他们的脚步，当然这种效果也早有人实现，并且有开源代码，先附上地址：https://github.com/beworker/pinned-section-listview。有了源码我们很容易将这个效果添加到自己的应用中，但是我们需要也应该了解它的实现原理，下面就根据源代码简单分析一下其实现原理。

在分析实现代码之前，我想先把实现原理大致解释一下，这样在分析代码时就更有针对性，也会减少很多迷惑。第一次看到运行案例时我也在想究竟是如何实现这个吸附效果的，我们理解中的ListView的Item随着滑动是不会停止不动的，Demo中默认的颜色很难看出来是怎样产生吸附条的，因此请把要吸附的部分改为透明色，再观察滑动吸附就很容易看明白了，原来ListView仍然是我们认识的ListView，它的滑动效果和原理没有改变，那个吸附条是在ListView上面画上去的，不过是一个障眼法而已。当吸附条向上滑动，刚刚碰到顶部时，这时并没有绘制吸附条，当再往上滑动，则绘制一个当前吸附条的完整副本，固定在页面顶部，而ListView中的真正的吸附部分其实是已经继续上滑出去了，留下的只是一个绘制的副本，当再滑动到一个新的吸附条时，原理也是如此，同样向下滑动也是一样的道理。改为透明效果后的吸附条效果如下，可以很容易看明白：

大概了解了实现原理之后，来通过代码印证一下，核心源码很少，少到只有一个java文件，就是PinnedSectionListView.java，该类继承自ListView,很显然是自定义了一个带有磁铁吸附效果的ListView,而自定义View最简单的方法就是继承已有的View。

再来看一些重要的代码片段：

<span style="font-size:14px;">	/** 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;
	}</span>

第一段代码重新定义了一个接口，定义了一个布尔类型的方法：boolean isItemViewTypePinned(int viewType); 注释已经写的很清楚，该方法根据某一行viewTpye来判断是否将该行View吸附到顶部。第二段代码则定义了一个内部类，用来封装吸附部分的各个属性，包括view、position以及id。

对于ListView，最重要的就是滑动响应，因此我们来看OnScrollListener是如何实现的:

<span style="font-size:14px;">	/** Scroll listener which does the magic */
	private final OnScrollListener mOnScrollListener = new OnScrollListener() {

		@Override public void onScrollStateChanged(AbsListView view, int scrollState) {
			if (mDelegateOnScrollListener != null) { // delegate
				mDelegateOnScrollListener.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();
                }
            }
		};

	};</span>

来看关键部分，final boolean isFirstVisibleItemSection =isItemViewTypePinned(adapter, adapter.getItemViewType(firstVisibleItem))，这句代码判断当前ListView中的第一个可见元素是否为要吸附到顶端的磁条。后边的if-else语句则针对是和否做了两种处理。如果第一个元素是吸附条，且刚好在最顶端，这时是不需要绘制吸附条副本的，因此调用destroyPinnedShadow()；如果没在最顶端，则根据当前吸附条的position创建一个吸附条副本，那么就会调用ensureShadowForPosition(firstVisibleItem, firstVisibleItem, visibleItemCount)，在ensureShadowForPosition()方法里，会检查当然吸附条是否为null，是的话则调用 createPinnedShadow(sectionPosition)创建一个。如果第一个元素不是吸附条，则通过findCurrentSectionPosition(firstVisibleItem)函数计算当前吸附条的position,然后依然调用ensureShadowForPosition()绘制吸附条副本。

findCurrentSectionPosition(int fromPosition)函数中核心部分是一个循环遍历，根据行view的viewType来判断是否为吸附条。在使用该自定义的PinnedSectionListView时，必须使用初始定义的PinnedSectionListAdapter，目的是为了使用接口中定义的方法isItemViewTypePinned(int viewType) 来确定某一行是否为吸附条。

既然要绘制的吸附条副本都准备好了，那么再来看是怎么样绘制到ListView上的，具体代码如下：

<span style="font-size:14px;">	@Override
	protected void dispatchDraw(Canvas canvas) {
		super.dispatchDraw(canvas);

		if (mPinnedSection != null) {

			// prepare variables
			int pLeft = getListPaddingLeft();
			int pTop = getListPaddingTop();
			View view = mPinnedSection.view;

			// draw child
			canvas.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();
		}
	}</span>

上述代码里除了绘制吸附条，还绘制了吸附条下的阴影效果，这只是锦上添花了，无碍整个效果的实现原理。

以上简要分析了磁铁吸附效果的实现原理，详细代码及该自定义控件的使用请参考源代码。希望我们在使用开源代码的时候，还要知其所以然，一定要弄明白原理，再应用到自己的程序中，否则你就不能灵活地驾驭它。