上图: 本文代码的Github地址

思路:

1. 每一个RecyclerView的item的布局(下文叫itemUI)里面都包含“吸顶文本”这个布局(下文叫StickyLayout)，根据当前itemA和上一个itemB的吸顶信息是否相同，决定是否展示itemA的StickyLayout.
2. 包含RecyclerView的布局(下文叫wrapperUI)最上部分，有一个假的StickyLayout(下文叫FakeStickyLayout).
3. 监听RecyclerView的滚动，根据RecyclerView的滚动距离，决定FakeStickyLayout向上或者向下滚动的距离.

代码解析

• 先说布局:

wrapperUI.xml  <FrameLayout           android:layout_width="match_parent"       android:layout_height="match_parent"       app:layout_behavior="@string/appbar_scrolling_view_behavior      <android.support.v7.widget.RecyclerView         android:id="@+id/rv_sticky_example"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:scrollbars="vertical" />        <include layout="@layout/layout_sticky_header_view" /> </FrameLayout>

itemUI.xml  <?xml version="1.0" encoding="utf-8"?> <LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"      android:layout_height="wrap_content"      android:layout_marginTop="1dp"           android:orientation="vertical">      <include layout="@layout/layout_sticky_header_view" />      <RelativeLayout           android:id="@+id/rl_content_wrapper"           ]     android:layout_width="match_parent"           android:layout_height="wrap_content"           android:layout_marginTop="1dp"          android:padding="10dp">        ~~~~~~~    </RelativeLayout> </LinearLayout>

这两个布局没什么特别，重点是

<include layout="@layout/layout_sticky_header_view" />

这个include标签引用的布局，就是吸顶的那个布局，保证了itemUI中的StickyLayout和wrapperUI中的FakeStickyLayout的布局一致.

• 再说RecyclerView 的 Adapter:

// RecyclerView 的第一个item，肯定是展示StickyLayout的. public static final int FIRST_STICKY_VIEW = 1; // RecyclerView 除了第一个item以外，要展示StickyLayout的. public static final int HAS_STICKY_VIEW = 2; // RecyclerView 的不展示StickyLayout的item. public static final int NONE_STICKY_VIEW = 3;

if (position == 0) {          recyclerViewHolder.tvStickyHeader.setVisibility(View.VISIBLE);             recyclerViewHolder.tvStickyHeader.setText(stickyExampleModel.sticky);        // 第一个item的吸顶信息肯定是展示的，并且标记tag为FIRST_STICKY_VIEW     recyclerViewHolder.itemView.setTag(FIRST_STICKY_VIEW);    } else {       // 之后的item都会和前一个item要展示的吸顶信息进行比较，不相同就展示，并且标记tag为HAS_STICKY_VIEW     if (!TextUtils.equals(stickyExampleModel.sticky, stickyExampleModels.get(position - 1).sticky)) {         recyclerViewHolder.tvStickyHeader.setVisibility(View.VISIBLE);           recyclerViewHolder.tvStickyHeader.setText(stickyExampleModel.sticky);           recyclerViewHolder.itemView.setTag(HAS_STICKY_VIEW);       } else {              // 相同就不展示，并且标记tag为NONE_STICKY_VIEW       recyclerViewHolder.tvStickyHeader.setVisibility(View.GONE);              recyclerViewHolder.itemView.setTag(NONE_STICKY_VIEW);        }   } // ContentDescription 用来记录并获取要吸顶展示的信息 recyclerViewHolder.itemView.setContentDescription(stickyExampleModel.sticky);

• 说了半天，重点终于来了

rvStickyExample.addOnScrollListener(new RecyclerView.OnScrollListener() {       @Override       public void onScrolled(RecyclerView recyclerView, int dx, int dy) {           super.onScrolled(recyclerView, dx, dy);            // 找到RecyclerView的item中，和RecyclerView的getTop 向下相距5个像素的那个item       // (尝试2、3个像素位置都找不到，所以干脆用了5个像素)，       // 我们根据这个item，来更新吸顶布局的内容，       // 因为我们的StickyLayout展示的信息肯定是最上面的那个item的信息.        View stickyInfoView = recyclerView.findChildViewUnder(tvStickyHeaderView.getMeasuredWidth() / 2, 5);           if (stickyInfoView != null && stickyInfoView.getContentDescription() != null) {                 tvStickyHeaderView.setText(String.valueOf(stickyInfoView.getContentDescription()));           }            // 找到固定在屏幕上方那个FakeStickyLayout下面一个像素位置的RecyclerView的item，       // 我们根据这个item来更新假的StickyLayout要translate多少距离.        // 并且只处理HAS_STICKY_VIEW和NONE_STICKY_VIEW这两种tag，       // 因为第一个item的StickyLayout虽然展示，但是一定不会引起FakeStickyLayout的滚动.        View transInfoView = recyclerView.findChildViewUnder(                          tvStickyHeaderView.getMeasuredWidth() / 2, tvStickyHeaderView.getMeasuredHeight() + 1);            if (transInfoView != null && transInfoView.getTag() != null) {               int transViewStatus = (int) transInfoView.getTag();               int dealtY = transInfoView.getTop() - tvStickyHeaderView.getMeasuredHeight();                // 如果当前item需要展示StickyLayout，         // 那么根据这个item的getTop和FakeStickyLayout的高度相差的距离来滚动FakeStickyLayout.          // 这里有一处需要注意，如果这个item的getTop已经小于0，也就是滚动出了屏幕，         // 那么我们就要把假的StickyLayout恢复原位，来覆盖住这个item对应的吸顶信息.          if (transViewStatus == StickyExampleAdapter.HAS_STICKY_VIEW) {                         if (transInfoView.getTop() > 0) {                       tvStickyHeaderView.setTranslationY(dealtY);                   } else {                       tvStickyHeaderView.setTranslationY(0);                  }               } else if (transViewStatus == StickyExampleAdapter.NONE_STICKY_VIEW) {                   // 如果当前item不需要展示StickyLayout，那么就不会引起FakeStickyLayout的滚动.            tvStickyHeaderView.setTranslationY(0);               }           }       } });

相关文章

一个属性实现带进度的圆形进度条

写在末尾:

本人第一次写简书，如果有不正确的地方欢迎批评指正.

https://github.com/christmasjason/StickyHeaderView