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

4,396 阅读2分钟

一、前言

最近看到敖厂长的视频,发现了一个不错的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 pinnedTypeHeader = new ArrayList<>();

    private final SparseArray mTypePinnedHeaderFactories = new SparseArray<>();
    private final RecyclerView.AdapterDataObserver mAdapterDataObserver = new RecyclerView.AdapterDataObserver() {
        @Override
        public void onChanged() {
            mIsAdapterDataChanged = true;
        }
    };

    public PinnedHeaderDecoration() {
        this.mHeaderPosition = -1;
    }

    
    
    
    

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

        
        createPinnedHeader(parent);

        if (mPinnedHeaderView != null && pinnedTypeHeader.contains(viewType)) {
            int headerEndAt = mPinnedHeaderView.getTop() + mPinnedHeaderView.getHeight();

            
            View 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);
        }
    }

    @Override
    public 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;
        }
        
        int 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) {
                
                layoutParams = 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();
        
        pinnedHeaderDecoration.setPinnedTypeHeader(RecyclerItem.ITEM_HEADER);
        pinnedHeaderDecoration.registerTypePinnedHeader(RecyclerItem.ITEM_HEADER, new PinnedHeaderDecoration.PinnedHeaderCreator() {
            @Override
            public boolean create(RecyclerView parent, int adapterPosition) {
                return true;
            }
        });
        pinnedHeaderDecoration.registerTypePinnedHeader(RecyclerItem.ITEM_DESC, new PinnedHeaderDecoration.PinnedHeaderCreator() {
            @Override
            public boolean create(RecyclerView parent, int adapterPosition) {
                return true;
            }
        });
        mRecyclerView.addItemDecoration(pinnedHeaderDecoration);

四、总结

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

源码下载