RecyclerVIew 快速添加吸顶效果

作者: 972ac0603088 | 来源:发表于2017-05-27 17:52 被阅读136次

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，至此文章结束，如果大家发现文中有问题，可以留言指出，谢谢。

RecyclerVIew 快速添加吸顶效果

1.FrameLayout作为 RecyClerView的父布局， RecyClerVIew的顶部是有一个和 RecyClerView中的分类 item一样的布局（悬浮条）。

2.每次只用根据RecyClerView的子item距离头顶的距离来改变悬浮 y坐标。图例如下

3.根据RecyclerView最后可见item的posstion来从数据源中获取分类信息。

注：图片加载用的是fresco。

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android 知识

RecyclerVIew 快速添加吸顶效果

1.FrameLayout作为 RecyClerView的父布局， RecyClerVIew的顶部是有一个和 RecyClerView中的 分类 item一样的布局（ 悬浮条）。

2.每次只用根据RecyClerView的子item距离头顶的距离来改变悬浮 y坐标。图例如下

3.根据RecyclerView最后可见item的posstion来从数据源中获取分类信息。

注：图片加载用的是fresco。

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android 知识

1.FrameLayout作为 RecyClerView的父布局， RecyClerVIew的顶部是有一个和 RecyClerView中的分类 item一样的布局（悬浮条）。