RecyclerView實現瀑布流布局

標籤：瀑布流   android   動畫   布局   

RecyclerView本身提供了三個LayoutManager的實現

• LinearLayoutManager
• GridLayoutManager
• StaggeredGridLayoutManager

第一個和第二個大家比較常用，今天我們就來使用第三個比較陌生的StaggeredGridLayoutManager，讓你分分鐘實現瀑布流布局。
首先來看下最後的效果

好吧，讓我們來實現它吧
首先是Item的布局masonry_item.xml很簡單，就是一張圖片加文字,item背景設定為白色

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:background="@color/white">    <ImageView        android:id="@+id/masonry_item_img"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:adjustViewBounds="true"        android:scaleType="centerCrop"/>    <TextView        android:id="@+id/masonry_item_title"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"/></LinearLayout>

為了簡單起見，我們假設每個item的資料是一個產品資訊

public class Product {    private int img;    private String title;    public Product(int img, String title) {        this.img = img;        this.title = title;    }    public int getImg() {        return img;    }    public void setImg(int img) {        this.img = img;    }    public String getTitle() {        return title;    }    public void setTitle(String title) {        this.title = title;    }}

recyclerView的adapter也很簡單，構造方法接受產品列表資料來源

public class MasonryAdapter extends RecyclerView.Adapter<MasonryAdapter.MasonryView>{    private List<Product> products;    public MasonryAdapter(List<Product> list) {        products=list;    }    @Override    public MasonryView onCreateViewHolder(ViewGroup viewGroup, int i) {        View view= LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.masonry_item, viewGroup, false);        return new MasonryView(view);    }    @Override    public void onBindViewHolder(MasonryView masonryView, int position) {        masonryView.imageView.setImageResource(products.get(position).getImg());        masonryView.textView.setText(products.get(position).getTitle());    }    @Override    public int getItemCount() {        return products.size();    }    public static class MasonryView extends  RecyclerView.ViewHolder{        ImageView imageView;        TextView textView;       public MasonryView(View itemView){           super(itemView);           imageView= (ImageView) itemView.findViewById(R.id.masonry_item_img );           textView= (TextView) itemView.findViewById(R.id.masonry_item_title);       }    }}

主介面Activity代碼就可以把資料來源和view連起來了

 @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        recyclerView= (RecyclerView) findViewById(R.id.recycler);        //設定layoutManager        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));        //設定adapter        initData();        MasonryAdapter adapter=new MasonryAdapter(productList);        recyclerView.setAdapter(adapter);        //設定item之間的間隔        SpacesItemDecoration decoration=new SpacesItemDecoration(16);        recyclerView.addItemDecoration(decoration);    }

第一
大家看到我們把recyclerview的layoutManager設定成了

new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL)

參數含義顯而易見，2就是2列，第二個參數是垂直方向

第二

SpacesItemDecoration decoration=new SpacesItemDecoration(16);recyclerView.addItemDecoration(decoration);

設定間隔，我們自訂了一個SpacesItemDecoration,代碼非常簡單

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)==0){            outRect.top=space;        }    }}

重點就這2個地方 ，幾行代碼就實現了一個漂亮的瀑布流布局，有興趣自己去玩下哦。

RecyclerView實現瀑布流布局