RecyclerView使用StaggeredGridLayoutManager布局的粘性头部实现

发表于   |   分类于 ，   |     |   阅读次数

介绍RecyclerView中使用StaggeredGridLayoutManager布局时粘性头部的实现

我们经常在使用App的过程中有城市的列表选择，我们会发现App在滑动的过程中，会有粘性头部一直悬浮在最上端，其中实现的方法有很多种，当然，这里我们不讨论使用ListView或者GridView控件，也不讨论RecyclerView使用LinearLayoutManager或者GridLayoutManager布局时的实现方式。本文讨论的重点是使用StaggeredGridLayoutManager布局时的粘性头部的实现方式。本文已展示本地图片库的图片作为例子来展开。

先上一下效果图

粘性头部

扫描本地图片库

  1. public LocalPictureDateResult loadAllLocalPictures() {
  2.         LocalPictureDateResult result = new LocalPictureDateResult(mContext);
  3.         Uri mImageUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
  4.         ContentResolver mContentResolver = mContext.getContentResolver();
  5.         Log.i(TAG, mImageUri.getPath());
  6.         // query only jpeg and png image type files
  7.         Cursor mCursor = mContentResolver.query(mImageUri, null,
  8.                 MediaStore.Images.Media.MIME_TYPE + "=? or "
  9.                         + MediaStore.Images.Media.MIME_TYPE + "=?",
  10.                 new String[]{"image/jpeg", "image/png"}, MediaStore.Images.Media.DATE_MODIFIED + " DESC");
  11.         if (mCursor != null) {
  12.             while (mCursor.moveToNext()) {
  13.                 //retrive image path
  14.                 String path = mCursor.getString(mCursor
  15.                         .getColumnIndex(MediaStore.Images.Media.DATA));
  16.                 int width = mCursor.getInt(mCursor
  17.                         .getColumnIndex(MediaStore.Images.Media.WIDTH));
  18.                 int height = mCursor.getInt(mCursor
  19.                         .getColumnIndex(MediaStore.Images.Media.HEIGHT));
  20.                 long modifiedData = mCursor.getLong(mCursor.
  21.                        getColumnIndex(MediaStore.Images.Media.DATE_MODIFIED));
  22.                 long addedData = mCursor.getLong(mCursor.
  23.                        getColumnIndex(MediaStore.Images.Media.DATE_ADDED));
  24.                 if (path==null || "".equals(path) || width == 0 || height == 0 || modifiedData == 0) {
  25.                     continue;
  26.                 }
  27.                 LocalPictureDetailInfo lpi = new LocalPictureDetailInfo(path, width, height, addedData * 1000, modifiedData * 1000);
  28.                 result.add(lpi);
  29.             }
  30.             mCursor.close();
  31.         }
  32.         return result;
  33.     }

这里返回一个LocalPictureDateResult对象，里面存放了扫描出来的本地图片文件信息集合

这里我们看下上面代码中的result.add(lpi)方法

  1. **LocalPictureDateResult.java** 
  3.     /**
  4.      * save the positions of title in the data collections
  5.      */
  6.     ArrayList mArrayTitlePos;
  8.     /**
  9.      * title collection
  10.      */
  11.     private HashSet<String> titleSet ;
  13.     /**
  14.      * pictures collection,include title and picture details
  15.      */
  16.     ArrayList<WrapLocalPictureDetailInfo> mLocalPictureInfos;
  18.    /**
  19.      * add local picture details
  20.      *
  21.      * @param detailInfo
  22.      */
  23.     public void add(LocalPictureDetailInfo detailInfo) {
  24.         String dateTimeStr = mDateParseFilter.parse(detailInfo.getModifiedDate());
  25.         if (!titleSet.contains(dateTimeStr)) {
  26.             titleSet.add(dateTimeStr);
  27.             // save title position
  28.             mArrayTitlePos.add(mLocalPictureInfos.size());
  30.             // add title object
  31.             WrapLocalPictureDetailInfo titleInfo = new WrapLocalPictureDetailInfo(dateTimeStr, DATA_TYPE_TITLE);
  32.             mLocalPictureInfos.add(titleInfo);
  33.             // add content object
  34.             WrapLocalPictureDetailInfo contentInfo = new WrapLocalPictureDetailInfo(detailInfo);
  35.             mLocalPictureInfos.add(contentInfo);
  36.         } else {
  37.             mLocalPictureInfos.add(new WrapLocalPictureDetailInfo(detailInfo));
  38.         }
  39.     }

上面这段代码，把扫描出来的本地图片集，通过图片的最后修改时间，分离出时间段名称，并且把时间段名称作为数据的一部分加入到最后的图片集合中，这样图片集合中就包含了图片数据和标题数据，并且我们也有了每个标题在图片集合中的位置，这样有利于我们后面计算和寻找标题做准备。

主页面布局

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent">
  5.     <android.support.v4.widget.SwipeRefreshLayout
  6.         android:id="@+id/srl_root"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent"
  9.         android:orientation="vertical">
  11.         <android.support.v7.widget.RecyclerView
  12.             android:id="@+id/rv_content"
  13.             android:layout_width="match_parent"
  14.             android:layout_height="match_parent">
  16.         </android.support.v7.widget.RecyclerView>
  18.     </android.support.v4.widget.SwipeRefreshLayout>
  20.     <LinearLayout
  21.         android:id="@+id/header_one"
  22.         android:layout_width="match_parent"
  23.         android:layout_height="wrap_content"
  24.         android:visibility="invisible">
  26.         <include layout="@layout/item_title_local_picture" />
  27.     </LinearLayout>
  29. </FrameLayout>

上面我们看到最外层用了个FrameLayout，用了个LinearLayout作为粘性头部，引入的头部布局和RecyclerView中的头部布局一样

RecyclerView的普通头部制作

头部布局文件

  1. <TextView xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:id="@+id/tv_title"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:background="@android:color/holo_red_light"
  6.     android:gravity="center_vertical"
  7.     android:textColor="@android:color/black"
  8.     android:textSize="20sp">
  10. </TextView>

设置RecylerView的adapter和layoutmanager

  1.     int mColumns = 3;
  2.     // 
  3.     mLayoutManager = new StaggeredGridLayoutManager(mColumns, StaggeredGridLayoutManager.VERTICAL);
  4.     mAdapter = new LocalPicturesAdapter(this, mMainPresenter.getLocalPictureDatas(), mColumns);
  5.     // set RecylerView's adapter and layoutmanager
  6.     mContentView.setLayoutManager(mLayoutManager);
  7.     mContentView.setAdapter(mAdapter);
  8.     mContentView.setHasFixedSize(true);

LocalPicturesAdapter类，主要根据数据中的type类型来显示不同的

  1. public class LocalPicturesAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements View.OnClickListener {
  3.     Activity mContext;
  5.     List<WrapLocalPictureDetailInfo> mImagePaths;
  7.     int columnNums = 1;
  9.     private OnRecyclerViewItemClickListener mOnItemClickListener = null;
  11.     public LocalPicturesAdapter(Activity context, List<WrapLocalPictureDetailInfo> imagePaths, int columnNums) {
  12.         this.mContext = context;
  13.         this.mImagePaths = imagePaths;
  14.         this.columnNums = columnNums;
  15.     }
  17.     public void setImagePaths(List<WrapLocalPictureDetailInfo> imagePaths){
  18.         this.mImagePaths = imagePaths;
  19.     }
  21.     @Override
  22.     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  23.         RecyclerView.ViewHolder viewHolder;
  24.         View view;
  25.         if (viewType == DATA_TYPE_TITLE) {
  26.             view = mContext.getLayoutInflater().inflate(R.layout.item_title_local_picture,null);
  27.             viewHolder = new LocalPicturesTitleHolder(view);
  28.         } else if (viewType == DATA_TYPE_CONTENT) {
  29.             view = mContext.getLayoutInflater().inflate(R.layout.item_content_local_picture,null);
  30.             viewHolder = new LocalPicturesContentHolder(view);
  31.         } else {
  32.             view = mContext.getLayoutInflater().inflate(R.layout.item_content_local_picture,null);
  33.             viewHolder = new LocalPicturesContentHolder(view);
  34.         }
  35.         if (view != null) {
  36.             // add listener
  37.             view.setOnClickListener(this);
  38.         }
  39.         return viewHolder;
  40.     }
  42.     @Override
  43.     public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
  44.         if (viewHolder.getItemViewType() == DATA_TYPE_TITLE) {
  45.             LocalPicturesTitleHolder holder = (LocalPicturesTitleHolder) viewHolder;
  46.             holder.itemView.setTag(position);
  47.             if (holder.mTvTitle != null) {
  48.                 WrapLocalPictureDetailInfo pictureDetailInfo = mImagePaths.get(position);
  49.                 // set title layoutparams
  50.                 StaggeredGridLayoutManager.LayoutParams layoutParams = new StaggeredGridLayoutManager.LayoutParams(
  51.                         ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
  52.                 // set title full span
  53.                 layoutParams.setFullSpan(true);
  54.                 holder.itemView.setLayoutParams(layoutParams);
  55.                 holder.mTvTitle.setText(pictureDetailInfo.getDataTitle());
  56.             }
  57.         } else if (viewHolder.getItemViewType() == DATA_TYPE_CONTENT) {
  58.             LocalPicturesContentHolder holder = (LocalPicturesContentHolder) viewHolder;
  59.             holder.itemView.setTag(position);
  60.             if (holder.mImageView != null) {
  61.                 WrapLocalPictureDetailInfo pictureDetailInfo = mImagePaths.get(position);
  62.                 ........
  63.                 ........
  64.                 ........
  65.                 // use glide load the image into ImageView
  66.                 Glide.with(mContext).load(new File(pictureDetailInfo.getPath())).into(holder.mImageView);
  67.             }
  68.         }
  69.     }
  71.     ......
  72.     ......
  73.     ......
  74. }

我们通过显示普通title的方法是使用设置itemview的StaggeredGridLayoutManager.LayoutParams来实现的，并且setFUllSpan(true)用来让title显示一整行

RecylerView滚动监听

  1. public RecyclerView.OnScrollListener onScrollListener = new RecyclerView.OnScrollListener() {
  3.         // get the recyclerview first visable item's position,return the size same as span count
  4.         int mFirstVisiblePosition[] = new int[mColumns];
  5.         // get the recyclerview last visable item's position,return the size same as span count
  6.         int mLastVisiblePosition[] = new int[mColumns];
  8.         // sticky head view height
  9.         private int mStickyHeadHeight = 0;
  11.         @Override
  12.         public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
  13.             super.onScrollStateChanged(recyclerView, newState);
  14.         }
  16.         @Override
  17.         public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
  18.             super.onScrolled(recyclerView, dx, dy);
  19.             if (dy == 0) {
  20.                 // the first time show the recyclerview items
  21.                 mLayoutManager.findFirstVisibleItemPositions(mFirstVisiblePosition);
  22.                 int titlePosision = getMinVisablePosition(mFirstVisiblePosition);
  23.                 if (titlePosision >= 0) {
  24.                     // get the item object
  25.                     WrapLocalPictureDetailInfo wrapLocalPictureDetailInfo = mAdapter.getItemObject(titlePosision);
  27.                     if (wrapLocalPictureDetailInfo != null) {
  28.                         // set the first title view text content
  29.                         ((TextView) mHeaderOneView.getChildAt(0)).setText(wrapLocalPictureDetailInfo.getDataTitle());
  30.                         mHeaderOneView.setVisibility(View.VISIBLE);
  31.                         // set the current title position into view tag object
  32.                         mHeaderOneView.setTag(titlePosision);
  33.                         // retrive the title view height,and set into variable
  34.                         mStickyHeadHeight = mHeaderOneView.getMeasuredHeight();
  35.                     }
  36.                 }
  37.             } else if (dy != 0) {  //  pull down the recyclerview then dy<0 , pull up the recyclerview then dy>0
  39.                 mLayoutManager.findFirstVisibleItemPositions(mFirstVisiblePosition);
  40.                 int minVisablePosition = getMinVisablePosition(mFirstVisiblePosition);
  42.                 mLayoutManager.findLastVisibleItemPositions(mLastVisiblePosition);
  43.                 int maxVisablePosition = getMaxVisablePosition(mLastVisiblePosition);
  45.                 if (minVisablePosition < 0) {
  46.                     return;
  47.                 }
  48.                 /**
  49.                  * get one title position before current minimum visable item position
  50.                  */
  51.                 int beforeFirstItemTitlePosition = mMainPresenter.findBeforeTitlePosition(minVisablePosition);
  52.                 /**
  53.                  * get the title position after current minimum visable item position
  54.                  */
  55.                 int afterFirstItemTitlePosition = mMainPresenter.findAfterTitlePosition(minVisablePosition);
  57.                 // when next title item position after the current minimum visable exist,and not equals current item position
  58.                 if (afterFirstItemTitlePosition != Integer.MIN_VALUE && afterFirstItemTitlePosition != minVisablePosition) {
  59.                     // determine whether next title item after the current minimum visable position is visable in the recyclerview
  60.                     if (afterFirstItemTitlePosition <= maxVisablePosition) {
  61.                         // it means that next title item is visable in the recycleview now
  62.                         // find that suitable next title view
  63.                         View nextTitleView = findView(afterFirstItemTitlePosition);
  64.                         if (nextTitleView != null) {
  65.                             float yxis = nextTitleView.getY();
  66.                             // if next title view is scroll into first title view's area
  67.                             if (yxis <= mStickyHeadHeight) {
  68.                                 // then fix the first title scroll y
  69.                                 mHeaderOneView.scrollTo(0, (int) (mStickyHeadHeight - yxis));
  70.                             } else {
  71.                                 // others,next title away from the first title view
  72.                                 // then fix first title view scroll y
  73.                                 mHeaderOneView.scrollTo(0, 0);
  74.                             }
  75.                             // set visable to the header view always
  76.                             mHeaderOneView.setVisibility(View.VISIBLE);
  77.                         }
  78.                     }
  79.                 }
  82.                 /**
  83.                  * Determine whether need to change the title
  84.                  */
  85.                 // when title item before the current maxinum visable position exist,and position not equals the current header view's tag
  86.                 if (beforeFirstItemTitlePosition != Integer.MIN_VALUE && mHeaderOneView.getTag() != null && (int) mHeaderOneView.getTag() != beforeFirstItemTitlePosition) {
  87.                     /**
  88.                      * it means that should change the title content
  89.                      */
  90.                     ((TextView) mHeaderOneView.getChildAt(0)).setText("");
  91.                     // always show the title item that before the current maxinum visable position
  92.                     WrapLocalPictureDetailInfo wpdi = mMainPresenter.getLocalPictureDatas().get(beforeFirstItemTitlePosition);
  93.                     // set new title content
  94.                     ((TextView) mHeaderOneView.getChildAt(0)).setText(wpdi.getDataTitle());
  95.                     if (dy > 0) {
  96.                         // if user pull up the recyclerview,fix the scroll y.Sometimes,because of the next title item may be not visable in current recyclerview,
  97.                         // so,we should force set header view visable once again
  98.                         mHeaderOneView.setVisibility(View.VISIBLE);
  99.                         mHeaderOneView.scrollTo(0, 0);
  100.                     }
  101.                     // set title position in the tag
  102.                     mHeaderOneView.setTag(beforeFirstItemTitlePosition);
  103.                     // retrive the sticky head height
  104.                     mStickyHeadHeight = mHeaderOneView.getMeasuredHeight();
  105.                 }
  106.             }
  107.         }
  109.         ......
  110.         ......
  111.         ......
  112.     };

其中最主要的原理是在RecylerView滚动的时候，判断dy的大小，查找当前RecylerView中用户可视的最小的item位置，通过之前我们初始化数据的时候，分离出的每个标题在数据集中的位置，底层使用二分查找方法，找到当前可视的最小item位置之前(下文称item之前)和之后(item之后)的标题item的位置信息。如果存在item之前的标题信息，判断和当前已经显示的粘性头部tag中存储的位置不一样，那么用新的头部信息替换当前粘性头部；如果在当前页面搜索到item之后的标题视图，获取该视图对象，判断与已经显示的粘性头部底部位置判断，如果超过了粘性头部，则把粘性头部用scrollTo方法进行向上滑动，就会出现粘性头部滑动的效果，如果没有超过，那么什么都不做

总结

可能看代码还是有点抽象，总结起来就是在初始化数据时，将标题也作为数据项加入到数据集合中，然后在Adapter中动态的判断是标题还是普通内容，采用不同的布局页面和布局，结合滚动时，通过当前页面最小位置的判断之前和之后标题item的位置，来控制滑动或者切换粘性头部，我把示例工程放在了github上RecyclerStaggeredStickyHeaderView，欢迎fork或者start。最后如果发现文章有什么问题或者写的不好的，欢迎留言交流，当然，也欢迎点赞～～～