簡述RecyclerView實現瀑布流並且隨機自適應item的高度

我們常見的顯示數據的控件listview，下面我簡述 一下RecyclerView的使用及簡單的現實數據

首先在activity_main.xml中

<android.support.v7.widget.RecyclerView
		android:id="@+id/recycler"
		android:layout_width="match_parent"
		android:layout_height="wrap_content">
	</android.support.v7.widget.RecyclerView>

然後我們準備數據，寫一個bean，展示一個圖片和文字

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;
    }
}

然後我們還需要一個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中添加數據

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private ArrayList<Product> productList=new ArrayList<>();
    private int imag[]={R.mipmap.ic_launcher,R.mipmap.a,R.mipmap.s,
            R.mipmap.ss,R.mipmap.sss,R.mipmap.ssss,
            R.mipmap.sssss,R.mipmap.ssssss};
    private String ss[]=new String[imag.length];
    private Product product;

    @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(8);
        recyclerView.addItemDecoration(decoration);
    }
    private void initData() {
        for (int i = 0; i < imag.length; i++) {
            ss[i]="產品"+i;
            product = new Product(imag[i],ss[i]);
            productList.add(product);

        }


    }
}

適配器中的v佈局就不寫了  就一個Imagview和Textview
適配器有了，當然還不行

我們還需要一個ItemDecoration類 來裝飾item

簡單的調整下距離

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;
        }
    }
}

好了 簡單的Recycleview使用就完成了   當然還有更炫酷的樣式，後面還會繼續寫，不喜勿噴~~