Android RecyclerView waterfall stream detailed explanation

In order to solve the low efficiency of ListView and the determination of horizontal scrolling, Android has added a RecyclerView control in the V7 package. In addition to the functions of ListView, RecyclerView also optimizes the shortcomings of ListView and can achieve horizontal scrolling and waterfall. flow.

In order to facilitate understanding, first use RecyclerView to realize the function of ListView:

Is it ugly? It does not matter, today our main character is the waterfall. This will be the first, I have summarized the general steps to achieve the use of RecyclerView (this example uses the Android Studio platform):

1、RecyclerView是新增的控件，为了兼容低版本需要在buid.gredle中添加对应的库。
compile 'com.android.support:recyclerview-v7:24.2.1'

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    testCompile 'junit:junit:4.12'
}

2、和ListView一样，需要提供一个数据源。
3、在布局文件中添加一个RecyclerView控件。

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

4、在Activity中关联控件并且进行一些设置。

There are three Manager classes in RecyclerView: LinearLayoutManager, StaggeredGridLayoutManager, GridLayoutManager. Corresponding to the three modes of RecyclerView: linear flow layout, waterfall flow layout, grid flow layout.

 RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);//1、关联UI
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);//2、实例化理类
        recyclerView.setLayoutManager(linearLayoutManager);//3、设置管理类
        RecyclerAdapter adapter = new RecyclerAdapter(r_Image, r_Name);//4、实例化适配器
        recyclerView.setAdapter(adapter);//5、设置适配器

5、为适配器创建一个布局文件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="horizontal">
    <ImageView
        android:layout_width="120sp"
        android:layout_height="120sp"
        app:srcCompat="@drawable/aa"
        android:id="@+id/imageView" />
    <TextView
        android:text="TextView"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="22dp"
        android:paddingLeft="10sp"
        android:textSize="16sp"
        android:id="@+id/textView" />
</LinearLayout>

6、创建一个适配器RecyclerView.Adapter的子类并且重写三个必需重写的方法：

public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {      //创建Holder实例并且返回，Holder用来缓存实例优化响应效率。
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_ayout, parent, false);
        final ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }
    //构造函数，传递两个参数为RecyclerView的数据源数据，这里用两个数组来提供数据
    public RecyclerAdapter(int[] r_Image, String[] r_Name) {
        this.r_Image = r_Image;
        this.r_Name = r_Name;
    }

    @Override
    public void onBindViewHolder(RecyclerAdapter.ViewHolder holder, int position) {
    //更新UI
        holder.imageView.setImageResource(r_Image[position]);
        holder.textView.setText(r_Name[position]);

    }

    @Override
    public int getItemCount() {//返回子项个数
        return r_Image.length;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;

        public ViewHolder(View itemView) {//关联UI控件
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageView);
            textView = (TextView) itemView.findViewById(R.id.textView);
        }
    }

The vertical scrolling of the linear flow layout is achieved above. If you need to change to horizontal scrolling, you only need to set the layout manager to horizontal before setting the layout method for RecyclerView in step 4 above:
linearLayoutManager.setOrientation (LinearLayoutManager.HORIZONTAL) ; // Set scroll direction

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);//2、实例化理管理类
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//设置滚动方向
        recyclerView.setLayoutManager(linearLayoutManager);//3、设置管理类

Comparing ListView to understand, you will find that RecyclerView is simpler than ListView. After using RecyclerView to complete the linear flow layout of RecyclerView, it is very simple to implement the waterfall flow layout. Strictly speaking, you only need to modify the management class, but in order to make the UI more beautiful, generally speaking, we will modify the layout of the UI. Two parameters need to be modified:

1、将LinearLayoutManager管理类更换成StaggeredGridLayoutManager类

The StaggeredGridLayoutManager class has two parameters, the first is of type int, which sets the number of columns in the waterfall flow. The second specifies the arrangement direction of the layout, we set it to be arranged vertically.

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

2、修改UI参数.

At this point, the waterfall flow can be realized, but in order to have an obvious effect of the waterfall flow, I also modified the array of data provided to have different lengths.
(Some data that is completely meaningless, copied casually in the code)

 R.drawable.hh, R.drawable.ii, R.drawable.jj};
            private String r_Name[] = {"1 StaggeredGridLayoutManager linearLayoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);" +
            "        recyclerView.setLayoutManager(linearLayoutManage", "2setLayoutManager(linearLayoutMa", "3setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa",            "4setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "5setLayoutManager(linearLayoutMa",            "6setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "7setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa",
            "8setLayoutManager(linearLayoutMa", "9setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "10setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa"};

Effect picture:

Waterfall flow, the picture is accompanied by English instructions, is there a B grid? ! !

---

Complete source line

The code of the two examples is very similar, here only the implementation source code of the waterfall stream is posted:

After buid.gredle is modified:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "25.0.1"
    defaultConfig {
        applicationId "com.example.administrator.class_recyclerviewtest"
        minSdkVersion 15
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    testCompile 'junit:junit:4.12'
}

Activity class:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;

import java.util.List;

public class MainActivity extends AppCompatActivity {
    private int r_Image[] = {R.drawable.aa, R.drawable.bb, R.drawable.cc,
            R.drawable.dd, R.drawable.ee, R.drawable.ff, R.drawable.gg,
            R.drawable.hh, R.drawable.ii, R.drawable.jj};
            private String r_Name[] = {"1 StaggeredGridLayoutManager linea anager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);" +
            "        recyclerView.setLayoutManager(linear tManage", "2setLayoutManager(linearLayoutMa", "3setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa",
            "4setLayoutManager(linearyoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "5setLayoutManager(linearLayoutMa",
            "6setLa rLayoutMasetLayoutManager(linearLayo youtManager(linearLayoutMasetLayoutManager(linearLayoutMa", "7setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa",
            "8setLayoutManager(linearLayoutMa", "9setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "10setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa"};
    private List<List<String>> r_list = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);//1、关联UI
//        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);//2、实例化理类
//        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//设置滚动方向
        StaggeredGridLayoutManager linearLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

        recyclerView.setLayoutManager(linearLayoutManager);//3、设置管理类
        RecyclerAdapter adapter = new RecyclerAdapter(r_Image, r_Name);//4、实例化适配器
        recyclerView.setAdapter(adapter);//5、设置适配器
    }
}

Custom adapter class:

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
//import android.R;

/**
 * Created by Administrator on 2016/12/12 0012.
 */
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    private int[] r_Image;
    private String[] r_Name;

    @Override
    public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_ayout, parent, false);
        final ViewHolder viewHolder = new ViewHolder(view);
        viewHolder.textView.setOnClickListener(new View.OnClickListener() {
            @Override//点击事件监听
            public void onClick(View view) {
                int position = viewHolder.getAdapterPosition();
                Toast.makeText(view.getContext(), r_Name[position], Toast.LENGTH_SHORT).show();
            }
        });
        viewHolder.imageView.setOnClickListener(new View.OnClickListener() {
            @Override//点击事件监听
            public void onClick(View view) {
                int position = viewHolder.getAdapterPosition();
                Toast.makeText(view.getContext(), r_Name[position] + "Imange", Toast.LENGTH_SHORT).show();
            }
        });
        return viewHolder;
    }

    public RecyclerAdapter(int[] r_Image, String[] r_Name) {
        this.r_Image = r_Image;
        this.r_Name = r_Name;
    }

    @Override
    public void onBindViewHolder(RecyclerAdapter.ViewHolder holder, int position) {
        holder.imageView.setImageResource(r_Image[position]);
        holder.textView.setText(r_Name[position]);

    }

    @Override
    public int getItemCount() {
        return r_Image.length;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;

        public ViewHolder(View itemView) {//关联UI控件
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageView);
            textView = (TextView) itemView.findViewById(R.id.textView);
        }
    }

UI layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.class_recyclerviewtest.MainActivity">

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

RecyclerView adapter layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="120sp"
        android:layout_height="120sp"
        app:srcCompat="@drawable/aa"
        android:id="@+id/imageView" />
    <TextView
        android:text="TextView"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="22dp"
        android:paddingLeft="10sp"
        android:textSize="16sp"
        android:id="@+id/textView" />
</LinearLayout>

http://blog.csdn.net/q296264785/article/details/53316772