基于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. <android.support.v7.widget.RecyclerView
7. android:id="@+id/id_recyclerview"
8. android:divider="@color/colorWhite"
9. android:dividerHeight="0dp"
10. android:layout_width="match_parent"
11. android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
12. </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. </data>
11. <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
12. xmlns:android="http://schemas.android.com/apk/res/android"
13. android:layout_width="match_parent"
14. android:id="@+id/cardView"
15. android:onClick="@{(theView) -> handler.to_play(theView, vodvideo)}"
16. android:layout_height="wrap_content">
17. <LinearLayout
18. android:orientation="vertical"
19. android:layout_width="match_parent"
20. android:layout_height="wrap_content">
21. <ImageView
22. xmlns:app="http://schemas.android.com/apk/res-auto"
23. android:layout_width="match_parent"
24. android:layout_height="wrap_content"
25. android:scaleType="fitCenter"
26. app:imageUrl="@{vodvideo.snapshot}"/>
27. <TextView
28. android:layout_width="match_parent"
29. android:layout_height="wrap_content"
30. android:text="title"/>
31. </LinearLayout>
32. </android.support.v7.widget.CardView>
33. </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. @Override
3. public VodItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
4. {
5. ViewDataBinding itembinding = DataBindingUtil.inflate(LayoutInflater.from(getContext()
6. ), R.layout.vod_list_item, parent, false);
7. VodItemViewHolder holder = new VodItemViewHolder(itembinding.getRoot());
8. itembinding.setVariable(BR.handler,VodListFragment.this);
9. holder.viewDataBinding = itembinding;
10. return holder;
11. }
12. @Override
13. public void onBindViewHolder(VodItemViewHolder holder, int position)
14. {
15. holder.viewDataBinding.setVariable(BR.vodvideo,videoList.get(position));
16. }
17. @Override
18. public int getItemCount()
19. {
20. return videoList.size();
21. }
22. class VodItemViewHolder extends RecyclerView.ViewHolder
23. {
24. public ViewDataBinding viewDataBinding;
25. public CardView cardView;
26. public VodItemViewHolder(View view)
27. {
28. super(view);
29. cardView = (CardView) view.findViewById(R.id.cardView);
30. }
31. }

用到的内部类SpaceItemDecoration:

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

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

参考资料：

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