基于RecyclerView的瀑布流实现

最新推荐文章于 2024-04-22 00:00:00 发布

原创最新推荐文章于 2024-04-22 00:00:00 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

Coding 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个使用RecyclerView实现瀑布流布局的实例，详细展示了Fragment中RecyclerView的初始化过程、自定义Adapter和SpaceItemDecoration的方法，并解释了SpaceItemDecoration对于item布局的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fragment的布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.VodListFragment">



        <android.support.v7.widget.RecyclerView
            android:id="@+id/id_recyclerview"
            android:divider="@color/colorWhite"
            android:dividerHeight="0dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>


</FrameLayout>

item的布局

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
        <variable
            name="vodvideo"
            type="com.xiangbita.dqk.dqkand.model.VodVideo"/>
        <variable
            name="handler"
            type="com.xiangbita.dqk.dqkand.fragment.VodListFragment"/>

    </data>
    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:id="@+id/cardView"
        android:onClick="@{(theView) -> handler.to_play(theView, vodvideo)}"
        android:layout_height="wrap_content">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <ImageView
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"
                app:imageUrl="@{vodvideo.snapshot}"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="title"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>

</layout>

fragment中对RecyclerView的初始化：

View view  =inflater.inflate(R.layout.fragment_vod_list, container, false);
        mRecyclerView = (RecyclerView) view.findViewById(R.id.id_recyclerview);
        mspan_count=2;
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(mspan_count,StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
        mRecyclerView.setLayoutManager(layoutManager);
        mVodAdapter = new VodAdapter();
        mRecyclerView.setAdapter(mVodAdapter);
        SpacesItemDecoration decoration=new SpacesItemDecoration(2);
        mRecyclerView.addItemDecoration(decoration);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        videoList = new ArrayList<>();

上面代码中用到的内部类VodAdapter:

        class VodAdapter extends RecyclerView.Adapter<VodAdapter.VodItemViewHolder> {

        @Override
        public VodItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
        {
            ViewDataBinding itembinding = DataBindingUtil.inflate(LayoutInflater.from(getContext()
            ), R.layout.vod_list_item, parent, false);
            VodItemViewHolder holder = new VodItemViewHolder(itembinding.getRoot());
            itembinding.setVariable(BR.handler,VodListFragment.this);
            holder.viewDataBinding = itembinding;

            return holder;
        }

        @Override
        public void onBindViewHolder(VodItemViewHolder holder, int position)
        {
            holder.viewDataBinding.setVariable(BR.vodvideo,videoList.get(position));
        }
        @Override
        public int getItemCount()
        {
            return videoList.size();
        }

        class VodItemViewHolder extends RecyclerView.ViewHolder
        {
            public ViewDataBinding viewDataBinding;
            public CardView cardView;
            public VodItemViewHolder(View view)
            {
                super(view);
                cardView = (CardView) view.findViewById(R.id.cardView);
            }
        }
    }

用到的内部类SpaceItemDecoration:

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

        private int space;

        public SpacesItemDecoration(int space) {
            this.space=space;
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            outRect.left=space;
            outRect.right=space;
            outRect.bottom=space;
            if(parent.getChildAdapterPosition(view)<mspan_count){
                outRect.top=space;
            }
        }
    }

做个简单的说明，如果不加这个SpaceItemDecoration会导致数据第一次加载时的item布局异常。

参考资料：

Android RecyclerView 使用完全解析体验艺术般的控件：http://blog.youkuaiyun.com/lmj623565791/article/details/45059587
RecyclerView实现瀑布流布局： http://blog.youkuaiyun.com/tiankong1206/article/details/47088995