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

@Override
protected 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表示每一行有所得子项个数