一、前言
最近看到敖厂长的视频,发现了一个不错的app:游品味(网易出品的,感觉猪厂出的产品都很良心,像火爆朋友圈的“阴阳师”),主要功能就是推荐精品手游,还是大安卓好,很多好游戏都是免费的,o(∩_∩)o
当时看到了它的首页效果(看下面),感觉很不错,所以就很想模仿一下,其实就是PinnedHeader,我问了下我身边IOS的,他们说IOS是自带这种效果,当时我就懵比:坑爹,安卓怎么就没有? 只能自己想办法实现了。
二、效果对比
没图没真相,那就比较一下
原版效果
我实现的效果
三、实现思路
在研究的过程中,我发现网上其实有很多PinnedHeader的实现,大多都是依赖于Listview的(反编译了一下游品味,也是通过XListview实现的),请原谅我的强迫症,我就是想用RecyclerView,然后有google了一轮,发现了几个库:
受到sticky-headers-recyclerview的启发,决定通过自定义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