RecyView的吸顶效果图。
效果图
每次当一个分类的所有item滑出视图，就会有新的item分类信息替换掉原来的信息。
其实原理很简单
1.FrameLayout作为 RecyClerView的父布局， RecyClerVIew的顶部是有一个和 RecyClerView中的 分类 item一样的布局（ 悬浮条）。
2.每次只用根据RecyClerView的子item距离头顶的距离来改变悬浮 y坐标。图例如下
<b>2.1 列表中的item距离顶端的距离大于或者等于悬浮条的高度，那么 悬浮条的y 一直等于0.
getTop>height
<b>2.2 列表中的item距离顶端的距离<悬浮条的高度，那么 悬浮条的y 需要改变了，我们看效果中，它会被列表中的分类item给慢慢挤出视图外，实际上它的y是慢慢变成负数的，这个值 等于悬浮条的高度 - item中的分类条目的getTop（在往上滑动的时候，getTop是慢慢减小的）的负数。如果没想明白，可以看下图
移动的距离
<b>2.3 根据最后一个可见item的postion，来变更需要获取的下一个分类item的getTop。
3.根据RecyclerView最后可见item的posstion来从数据源中获取分类信息。
原理说完了，开撸代码：
说明我的RecyclerVIew里有两种item，一个分类信息，一个ImageView
1.两个类型的item
分类信息item
<?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="50dp"
android:id="@+id/ac_recy_header_title_ly"
android:background="@color/lightcoral"
android:gravity="center">
<TextView
android:id="@+id/ac_recy_header_title_tv"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/white"
android:gravity="center">
</TextView>
</LinearLayout>
ImageView的item
<?xml version="1.0" encoding="utf-8"?>
<com.facebook.drawee.view.SimpleDraweeView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:background="@android:color/holo_red_dark"
android:id="@+id/ac_recy_holder_image_iv"
>
</com.facebook.drawee.view.SimpleDraweeView>
2.Acitivty 的视图
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
android:id="@+id/ac_recy_hear_list_cy"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
<!--这里就是分类信息的视图 -->
<include layout="@layout/ac_recy_header" />
</FrameLayout>
3.Activity的代码
public class RecyclerViewScrollHeaderActivity extends BaseActivity {
private RecyclerView mList_rcy;
private LinearLayout mHeaderTitle_ly;
private LinearLayoutManager mLayoutManager;
private RecyclerScrollerHeaderAdapter mAdapter;
private List<ImageData> mData;
private TextView mHeader_tv; //悬浮条
private int mPostion = 0;//
private float mHeaderHight;//悬浮条的高度
@Override
protected void initView() {
setContentView(R.layout.ac_recyscrollheader);
mList_rcy = (RecyclerView) findViewById(R.id.ac_recy_hear_list_cy);
mHeader_tv = (TextView) findViewById(R.id.ac_recy_header_title_tv);
mLayoutManager = new LinearLayoutManager(this);
getData();
mHeader_tv.setText(mData.get(mPostion).getTitle());
mAdapter = new RecyclerScrollerHeaderAdapter(this, mData);
mList_rcy.setLayoutManager(mLayoutManager);
mList_rcy.setAdapter(mAdapter);
mHeaderTitle_ly = (LinearLayout) findViewById(R.id.ac_recy_header_title_ly);
mList_rcy.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
mHeaderHight = mHeaderTitle_ly.getHeight();
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
View view = null;
if (mPostion % 2 != 0) {
view = mLayoutManager.findViewByPosition(mPostion + 1);
if (view != null) {
if (mHeaderHight <= view.getTop()) { //当 下面的 titleView 距离顶端的高度 不小于 悬浮条的高度，悬浮条不需要改变 y，还是0
mHeaderTitle_ly.setY(0);
} else if (mHeaderHight > view.getTop()) {//当 下面的 titleView 距离顶端的高度 小于 悬浮条的高度，悬浮条要改变 y，改变的规则是 悬浮条的高度 和 titleview的top 之差
mHeaderTitle_ly.setY(-(mHeaderHight - view.getTop()));
}
}
}
if (mLayoutManager.findFirstVisibleItemPosition() != mPostion) {
mPostion = mLayoutManager.findFirstVisibleItemPosition();
if (mPostion % 2 == 0)
mHeader_tv.setText(mData.get(mPostion).getTitle());
else {
if (dy < 0)
mHeader_tv.setText(mData.get(mPostion - 1).getTitle());
}
mHeaderTitle_ly.setY(0);
}
L.e(" FirstVisibleItemPosition2 :" + mLayoutManager.findFirstVisibleItemPosition() + " mPostion：" + mPostion);
}
});
mHeader_tv.setText(mData.get(mPostion).getTitle());
}
private void getData() {
mData = new ArrayList<>();
for (int i = 0; i < 100; i++) {
ImageData imageData = new ImageData();
imageData.setmType(ImageData.type_iamge);
if (i % 10 == 1) {
imageData.setImage_url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2580419392,1281570884&fm=117&gp=0.jpg");
}
if (i % 10 == 3) {
imageData.setImage_url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3703479237,346170631&fm=23&gp=0.jpg");
}
if (i % 10 == 5) {
imageData.setImage_url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1016811083,3723889658&fm=23&gp=0.jpg");
}
if (i % 10 == 7) {
imageData.setImage_url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2566266812,1674812120&fm=23&gp=0.jpg");
}
if (i % 10 == 9) {
imageData.setImage_url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1550387292,1263991851&fm=23&gp=0.jpg");
}
if (i % 2 == 0) {
imageData.setmType(ImageData.type_title);
imageData.setTitle("pic_beautif __" + i / 2);
}
mData.add(imageData);
}
}
}
4.Adapter的代码
public class RecyclerScrollerHeaderAdapter extends BaseAdapter<ImageData> {
public RecyclerScrollerHeaderAdapter(Context context,List<ImageData> mList) {
super(context,mList);
}
@Override
public int getItemViewType(int position) {
return mData.get(position).getmType();
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if(viewType==ImageData.type_iamge){
View view= LayoutInflater.from(mContext).inflate(R.layout.ac_recy_holder,parent,false);
ScrollerHolder holder=new ScrollerHolder(view);
return holder;
}
else{
View view= LayoutInflater.from(mContext).inflate(R.layout.ac_recy_header,parent,false);
ScrollerHeader holder=new ScrollerHeader(view);
return holder;
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if(getItemViewType(position)==ImageData.type_iamge){
ScrollerHolder holder1= (ScrollerHolder) holder;
holder1.refreshView(mData.get(position));
}
else{
ScrollerHeader holder2= (ScrollerHeader) holder;
holder2.refreshView(mData.get(position));
}
super.onBindViewHolder(holder, position);
}
@Override
public int getItemCount() {
return mData.size();
}
}
5.两个Hodler的代码
public class ScrollerHeader extends BaseHolder<ImageData>{
private TextView mTextView;
public ScrollerHeader(View itemView) {
super(itemView);
mTextView=(TextView)itemView.findViewById(R.id.ac_recy_header_title_tv);
}
@Override
public void refreshView(ImageData mData) {
this.mData=mData;
mTextView.setText(mData.getTitle());
}
}
public class ScrollerHolder extends BaseHolder<ImageData> {
private SimpleDraweeView mImageView;
public ScrollerHolder(View itemView) {
super(itemView);
mImageView = (SimpleDraweeView) itemView.findViewById(R.id.ac_recy_holder_image_iv);
}
@Override
public void refreshView(ImageData mData) {
this.mData = mData;
mImageView.setImageURI(mData.getImage_url());
}
}
注：图片加载用的是fresco。
原理比较简单，数据随便添加了点，关键是理解 最后一个可见的item变化时候，导致getTop的变化。
ok，至此文章结束，如果大家发现文中有问题，可以留言指出，谢谢。
