仿“游品位”首页效果之RecyclerView实现PinnedHeader标签

一、前言

最近看到敖厂长的视频，发现了一个不错的app：游品位（网易出品的，感觉猪厂出的产品都很良心，像火爆朋友圈的“阴阳师”），主要功能就是推荐精品手游，还是大安卓好，很多好游戏都是免费的，o(∩_∩)o
当时看到了它的首页效果（看下面），感觉很不错，所以就很想模仿一下，其实就是PinnedHeader，我问了下我身边IOS的，他们说IOS是自带这种效果，当时我就懵比：坑爹，安卓怎么就没有？ 只能自己想办法实现了。

二、效果对比

没图没真相，那就比较一下，反正我觉得基本一样。

• 原版效果
  

• 我实现的效果
  

三、实现思路

在研究的过程中，我发现网上其实有很多PinnedHeader的实现，大多都是依赖于Listview的（反编译了一下游品位，也是通过XListview实现的），请原谅我的强迫症，我就是想用RecyclerView，然后有google了一轮，发现了几个库：

header-decor
SuperSLiM
sticky-headers-recyclerview

受到sticky-headers-recyclerview的启发，决定通过自定义RecyclerView.ItemDecoration 来实现，这样代码的侵入性和拓展性都很不错。
关于RecyclerView.ItemDecoration的相关学习可以参照这篇

深入理解 RecyclerView 系列之一：ItemDecoration

这里我把RecyclerView的item分为了三种，其中type1和type3我都认为是pinnedheader，只不过type3进行特殊处理，不用显示pinnedheader

自定义RecyclerView.ItemDecoration，直接结合代码分析一下

public class PinnedHeaderDecoration extends RecyclerView.ItemDecoration {private static final String TAG = "PinnedHeaderDecoration";private int mHeaderPosition;private int mPinnedHeaderTop;private boolean mIsAdapterDataChanged;private Rect mClipBounds;private View mPinnedHeaderView;private RecyclerView.Adapter mAdapter;private int viewType;private List<Integer> pinnedTypeHeader = new ArrayList<>();private final SparseArray<PinnedHeaderCreator> mTypePinnedHeaderFactories = new SparseArray<>();private final RecyclerView.AdapterDataObserver mAdapterDataObserver = new RecyclerView.AdapterDataObserver() {@Overridepublic void onChanged() {mIsAdapterDataChanged = true;}};public PinnedHeaderDecoration() {this.mHeaderPosition = -1;}// 当我们调用mRecyclerView.addItemDecoration()方法添加decoration的时候，RecyclerView在绘制的时候，去会绘制decorator，即调用该类的onDraw和onDrawOver方法，// 1.onDraw方法先于drawChildren// 2.onDrawOver在drawChildren之后，一般我们选择复写其中一个即可。// 3.getItemOffsets 可以通过outRect.set()为每个Item设置一定的偏移量，主要用于绘制Decorator。@Overridepublic void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {//检测标签，并将标签强制固定在顶部createPinnedHeader(parent);if (mPinnedHeaderView != null && pinnedTypeHeader.contains(viewType)) {int headerEndAt = mPinnedHeaderView.getTop() + mPinnedHeaderView.getHeight();// 根据坐标查找view，headEnd + 1找到的就是mPinnedHeaderView底部下面的viewView v = parent.findChildViewUnder(c.getWidth() / 2, headerEndAt + 1);if (isHeaderView(parent, v)) {// 如果是标签的话，缓存的标签就要同步跟此标签移动mPinnedHeaderTop = v.getTop() - mPinnedHeaderView.getHeight();} else {mPinnedHeaderTop = 0;}Log.d(TAG, "onDraw" + v.getTop());Log.d(TAG, "mPinnedHeaderView.getHeight()" + mPinnedHeaderView.getHeight());mClipBounds = c.getClipBounds();mClipBounds.top = mPinnedHeaderTop + mPinnedHeaderView.getHeight();c.clipRect(mClipBounds);}}@Overridepublic void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {if (mPinnedHeaderView != null && pinnedTypeHeader.contains(viewType)) {c.save();mClipBounds.top = 0;c.clipRect(mClipBounds, Region.Op.UNION);c.translate(0, mPinnedHeaderTop);mPinnedHeaderView.draw(c);c.restore();}}private void createPinnedHeader(RecyclerView parent) {updatePinnedHeader(parent);RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();if (layoutManager == null || layoutManager.getChildCount() <= 0) {return;}//获取第一个可见item的positionint firstVisiblePosition = ((RecyclerView.LayoutParams) layoutManager.getChildAt(0).getLayoutParams()).getViewAdapterPosition();int headerPosition = findPinnedHeaderPosition(parent, firstVisiblePosition);if (headerPosition >= 0 && mHeaderPosition != headerPosition) {mHeaderPosition = headerPosition;//获取标签类型viewType = mAdapter.getItemViewType(headerPosition);//手动调用创建标签RecyclerView.ViewHolder pinnedViewHolder = mAdapter.createViewHolder(parent, viewType);mAdapter.bindViewHolder(pinnedViewHolder, headerPosition);mPinnedHeaderView = pinnedViewHolder.itemView;ViewGroup.LayoutParams layoutParams = mPinnedHeaderView.getLayoutParams();if (layoutParams == null) {// 标签默认宽度占满parentlayoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);mPinnedHeaderView.setLayoutParams(layoutParams);}// 测量高度int heightMode = View.MeasureSpec.getMode(layoutParams.height);int heightSize = View.MeasureSpec.getSize(layoutParams.height);if (heightMode == View.MeasureSpec.UNSPECIFIED) {heightMode = View.MeasureSpec.EXACTLY;}int maxHeight = parent.getHeight() - parent.getPaddingTop() - parent.getPaddingBottom();if (heightSize > maxHeight) {heightSize = maxHeight;}int ws = View.MeasureSpec.makeMeasureSpec(parent.getWidth() - parent.getPaddingLeft() - parent.getPaddingRight(), View.MeasureSpec.EXACTLY);int hs = View.MeasureSpec.makeMeasureSpec(heightSize, heightMode);mPinnedHeaderView.measure(ws, hs);// 位置强制布局在顶部mPinnedHeaderView.layout(0, 0, mPinnedHeaderView.getMeasuredWidth(), mPinnedHeaderView.getMeasuredHeight());}}/*** 从传入位置递减找出标签的位置* @param parent* @param fromPosition* @return*/private int findPinnedHeaderPosition(RecyclerView parent, int fromPosition) {if (fromPosition > mAdapter.getItemCount() || fromPosition < 0) {return -1;}for (int position = fromPosition; position >= 0; position--) {final int viewType = mAdapter.getItemViewType(position);if (isPinnedViewType(parent, position, viewType)) {return position;}}return -1;}public PinnedHeaderDecoration setPinnedTypeHeader(Integer... pinnedTypeHeader) {this.pinnedTypeHeader.addAll(Arrays.asList(pinnedTypeHeader));return this;}private boolean isPinnedViewType(RecyclerView parent, int adapterPosition, int viewType) {PinnedHeaderCreator pinnedHeaderCreator = mTypePinnedHeaderFactories.get(viewType);return pinnedHeaderCreator != null && pinnedHeaderCreator.create(parent, adapterPosition);}private boolean isHeaderView(RecyclerView parent, View v) {int position = parent.getChildAdapterPosition(v);if (position == RecyclerView.NO_POSITION) {return false;}return isPinnedViewType(parent, position, mAdapter.getItemViewType(position));}private void updatePinnedHeader(RecyclerView parent) {RecyclerView.Adapter adapter = parent.getAdapter();if (mAdapter != adapter || mIsAdapterDataChanged) {resetPinnedHeader();if (mAdapter != null) {mAdapter.unregisterAdapterDataObserver(mAdapterDataObserver);}mAdapter = adapter;if (mAdapter != null) {mAdapter.registerAdapterDataObserver(mAdapterDataObserver);}}}private void resetPinnedHeader() {mHeaderPosition = -1;mPinnedHeaderView = null;}public void registerTypePinnedHeader(int itemType, PinnedHeaderCreator pinnedHeaderCreator) {mTypePinnedHeaderFactories.put(itemType, pinnedHeaderCreator);}public interface PinnedHeaderCreator {boolean create(RecyclerView parent, int adapterPosition);}
}

理解了上面的代码，MainActivity 中的使用就很简单了：

 PinnedHeaderDecoration pinnedHeaderDecoration = new PinnedHeaderDecoration();//设置只有RecyclerItem.ITEM_HEADER的item显示标签pinnedHeaderDecoration.setPinnedTypeHeader(RecyclerItem.ITEM_HEADER);pinnedHeaderDecoration.registerTypePinnedHeader(RecyclerItem.ITEM_HEADER, new PinnedHeaderDecoration.PinnedHeaderCreator() {@Overridepublic boolean create(RecyclerView parent, int adapterPosition) {return true;}});pinnedHeaderDecoration.registerTypePinnedHeader(RecyclerItem.ITEM_DESC, new PinnedHeaderDecoration.PinnedHeaderCreator() {@Overridepublic boolean create(RecyclerView parent, int adapterPosition) {return true;}});mRecyclerView.addItemDecoration(pinnedHeaderDecoration);

四、总结

为了更好的理解，下面这个源码中的布局都直接是图片（请原谅我的偷懒），不过作为效果展示，还是一样的，上面那个完整的效果是我的学习的新项目，还在重构中，等完美了再开源，敬请期待！！
如果您觉得对你有所帮助，轻轻点一下star，来鼓励一下我，谢谢！o(∩_∩)o

源码下载