RecyclerView实现图片瀑布流

RecyclerView相关用法及实现

首先需要在build.gradle中添加相应的依赖库compile 'com.android.support:recyclerview-v7:25.0.1'，只有这样才可以使用RecyclerView

用RecyclerView实现瀑布流的效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:orientation="vertical">    <ImageView        android:id="@+id/fruit_img"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginTop="2dp"        android:scaleType="fitCenter"/>    <TextView        android:id="@+id/tv_content"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:gravity="center_horizontal"        android:singleLine="true"        android:textSize="14sp"/>
</LinearLayout>

(1) 定义一个水果对象类，里面包含2个属性，图片编号和水果名称，代码如下：

public class Fruit{    private String name;    private int imageId;    public Fruit(String name, int imageId)    {        super();        this.name = name;        this.imageId = imageId;    }    public String getName()    {        return name;    }    public int getImageId()    {        return imageId;    }}

(2).每个单项的显示布局文件

每项都有都一个ImageView和TextView，ImageView用来显示图片，TextView用于显示名字

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:orientation="vertical">    <ImageView        android:id="@+id/fruit_img"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginTop="2dp"        android:scaleType="fitCenter"/>    <TextView        android:id="@+id/tv_content"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:gravity="center_horizontal"        android:singleLine="true"        android:textSize="14sp"/>
</LinearLayout>

(3).项目的布局文件

整个活动就只有RecyclerView

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v7.widget.RecyclerView        android:id="@+id/lv_fruit"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_marginTop="5dp"/></LinearLayout>

(4)创建一个适配器(Adapter)继承RecyclerView.Adapter并将泛型指定为适配器中的静态类ViewHolder

    static class ViewHolder extends RecyclerView.ViewHolder    {        View fruitView;        ImageView fruitImage;        TextView fruitName;        public ViewHolder(View view)        {            super(view);            fruitView = view;            fruitImage = (ImageView) view.findViewById(R.id.fruit_img);            fruitName = (TextView) view.findViewById(R.id.tv_content);        }    }

该静态了中有三个成员，每个单项的View，单项的ImageView和TextView

实现父类的三个方法onCreateViewHolder()、getItemCount()和onBindViewHolder(),在onCreateViewHolder()方法中定义每一项布局的点击事件

    @Override    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)    {        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);        final ViewHolder viewHolder = new ViewHolder(view);        viewHolder.fruitView.setOnClickListener(new View.OnClickListener()        {            @Override            public void onClick(View view)            {                int position = viewHolder.getAdapterPosition();                Fruit fruit = fruitList.get(position);                Toast.makeText(view.getContext(),fruit.getName(),Toast.LENGTH_LONG).show();            }        });        return viewHolder;    }    @Override    public void onBindViewHolder(ViewHolder holder, int position)    {        Fruit fruit = fruitList.get(position);        holder.fruitImage.setImageResource(fruit.getImageId());        holder.fruitName.setText(fruit.getName());    }    @Override    public int getItemCount()    {        return fruitList.size();    }

自定义适配器（FruitAdapter）的构造方法传了一个数据集

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder>{    List<Fruit> fruitList;        public FruitAdapter(List<Fruit> list)    {        this.fruitList = list;    }}

（5）活动类MainActivity，申明一个int型数组、一个String型数组和一个List

List<Fruit> listFruit = new ArrayList<>();int[] imgIds = {R.mipmap.one, R.mipmap.five, R.mipmap.four, R.mipmap.two, R.mipmap.three, R.mipmap.ic_launcher};String[] names = {"西瓜", "梨子", "火龙果", "猕猴桃", "橙子", "机器人"};

初始化List，将定义的两个数组赋值给List

private int random(int i){    Random random = new Random();    int target = random.nextInt(i);    return target;}private void initFruit(){    for (int i = 0; i < 50; i++)    {        int index = random(6);        Fruit fruit = new Fruit(names[index], imgIds[index]);        listFruit.add(fruit);    }}

重写onCreate方法，首先初始化RecyclerView

申明一个瀑布流布局排序方式 ,设置布局排序方式为垂直排序，每一行有三个子项：

StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

设置RecyclerView的布局管理：recyclerView.setLayoutManager(layoutManager);

初始化自定义适配器，并将之前初始化的数据集传入其构造方法：FruitAdapter fruitAdapter = new FruitAdapter(listFruit);

最后设置RecyclerView的适配器：recyclerView.setAdapter(fruitAdapter);

@Overrideprotected void onCreate(Bundle savedInstanceState){    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_my);    initFruit();    RecyclerView recyclerView = (RecyclerView) this.findViewById(R.id.lv_fruit);    StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);    recyclerView.setLayoutManager(layoutManager);    FruitAdapter fruitAdapter = new FruitAdapter(listFruit);    recyclerView.setAdapter(fruitAdapter);}

还可以 设置线性布局排序方式和网格布局的排序方式

线性布局的排序方式代码如下：

LinearLayoutManager layoutManager = new LinearLayoutManager(this);//this所指为当前活动的上下文
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

网格布局的排序方式代码如下：

GridLayoutManager layoutManager = new GridLayoutManager(this, 4);

//this所指的是当前项目的上下文，4表示每一行有所得子项个数