基于RecyclerView的瀑布流实现

fragment的布局：

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context=".fragment.VodListFragment">  
  6.   
  7.   
  8.   
  9.         <android.support.v7.widget.RecyclerView  
  10.             android:id="@+id/id_recyclerview"  
  11.             android:divider="@color/colorWhite"  
  12.             android:dividerHeight="0dp"  
  13.             android:layout_width="match_parent"  
  14.             android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>  
  15.   
  16.   
  17. </FrameLayout>  

item的布局

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <layout>  
  3.     <data>  
  4.         <variable  
  5.             name="vodvideo"  
  6.             type="com.xiangbita.dqk.dqkand.model.VodVideo"/>  
  7.         <variable  
  8.             name="handler"  
  9.             type="com.xiangbita.dqk.dqkand.fragment.VodListFragment"/>  
  10.   
  11.     </data>  
  12.     <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"  
  13.         xmlns:android="http://schemas.android.com/apk/res/android"  
  14.         android:layout_width="match_parent"  
  15.         android:id="@+id/cardView"  
  16.         android:onClick="@{(theView) -> handler.to_play(theView, vodvideo)}"  
  17.         android:layout_height="wrap_content">  
  18.         <LinearLayout  
  19.             android:orientation="vertical"  
  20.             android:layout_width="match_parent"  
  21.             android:layout_height="wrap_content">  
  22.   
  23.   
  24.             <ImageView  
  25.                 xmlns:app="http://schemas.android.com/apk/res-auto"  
  26.                 android:layout_width="match_parent"  
  27.                 android:layout_height="wrap_content"  
  28.                 android:scaleType="fitCenter"  
  29.                 app:imageUrl="@{vodvideo.snapshot}"/>  
  30.             <TextView  
  31.                 android:layout_width="match_parent"  
  32.                 android:layout_height="wrap_content"  
  33.                 android:text="title"/>  
  34.         </LinearLayout>  
  35.     </android.support.v7.widget.CardView>  
  36.   
  37. </layout>  




fragment中对RecyclerView的初始化：

  1. View view  =inflater.inflate(R.layout.fragment_vod_list, container, false);  
  2.         mRecyclerView = (RecyclerView) view.findViewById(R.id.id_recyclerview);  
  3.         mspan_count=2;  
  4.         StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(mspan_count,StaggeredGridLayoutManager.VERTICAL);  
  5.         layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);  
  6.         mRecyclerView.setLayoutManager(layoutManager);  
  7.         mVodAdapter = new VodAdapter();  
  8.         mRecyclerView.setAdapter(mVodAdapter);  
  9.         SpacesItemDecoration decoration=new SpacesItemDecoration(2);  
  10.         mRecyclerView.addItemDecoration(decoration);  
  11.         mRecyclerView.setItemAnimator(new DefaultItemAnimator());  
  12.         videoList = new ArrayList<>();  


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

  1. class VodAdapter extends RecyclerView.Adapter<VodAdapter.VodItemViewHolder> {  
  2.   
  3. @Override  
  4. public VodItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType)  
  5. {  
  6.     ViewDataBinding itembinding = DataBindingUtil.inflate(LayoutInflater.from(getContext()  
  7.     ), R.layout.vod_list_item, parent, false);  
  8.     VodItemViewHolder holder = new VodItemViewHolder(itembinding.getRoot());  
  9.     itembinding.setVariable(BR.handler,VodListFragment.this);  
  10.     holder.viewDataBinding = itembinding;  
  11.   
  12.     return holder;  
  13. }  
  14.   
  15. @Override  
  16. public void onBindViewHolder(VodItemViewHolder holder, int position)  
  17. {  
  18.     holder.viewDataBinding.setVariable(BR.vodvideo,videoList.get(position));  
  19. }  
  20. @Override  
  21. public int getItemCount()  
  22. {  
  23.     return videoList.size();  
  24. }  
  25.   
  26. class VodItemViewHolder extends RecyclerView.ViewHolder  
  27. {  
  28.     public ViewDataBinding viewDataBinding;  
  29.     public CardView cardView;  
  30.     public VodItemViewHolder(View view)  
  31.     {  
  32.         super(view);  
  33.         cardView = (CardView) view.findViewById(R.id.cardView);  
  34.     }  
  35. }  

用到的内部类SpaceItemDecoration:

  1. public class SpacesItemDecoration extends RecyclerView.ItemDecoration {  
  2.   
  3.         private int space;  
  4.   
  5.         public SpacesItemDecoration(int space) {  
  6.             this.space=space;  
  7.         }  
  8.   
  9.         @Override  
  10.         public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {  
  11.             outRect.left=space;  
  12.             outRect.right=space;  
  13.             outRect.bottom=space;  
  14.             if(parent.getChildAdapterPosition(view)<mspan_count){  
  15.                 outRect.top=space;  
  16.             }  
  17.         }  
  18.     }  


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

参考资料：

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dhcn/p/7130467.html