You must be no longer unfamiliar with the form of the list. There are contact list, file list, SMS list and so on. This article describes how to use RecyclerView to achieve list effect in Android development.

Use steps

Introducing RecyclerView

Add a reference in the build.gradle file of the app. We use the Android x package.

gradle:

dependencies {
    // ...
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
}

Data preparation

First determine what data to display. Is user information, contacts, or files. Here, take characters as an example. Before writing code, we first consider the requirements, that is, how to display and how to display data. In daily work, there are UI renderings. The art design in this paper is played by ourselves.

For example, display   a   and   97.

ViewHolder and layout

Now the data to be displayed has been determined. To design UI presentation. layout is closely related to ViewHolder. It is better to write the ViewHolder class before designing the Adapter class.

Create a new layout file item that defines item (list sub item)_ letter.xml.

<?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:orientation="horizontal">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000" />

</LinearLayout>

Here, the internal class is used, and the ViewHolder class is written in the Activity class.

Create VH class

private class VH extends RecyclerView.ViewHolder {
    TextView tv1;
    TextView tv2;

    public VH(@NonNull View itemView) {
        super(itemView);
        tv1 = itemView.findViewById(R.id.tv1);
        tv2 = itemView.findViewById(R.id.tv2);
    }
}

As can be seen from the above, the layout of ViewHolder and item are closely related. The id in layout is relatively simple. Some more meaningful IDS can be named in actual projects.

In the layout file of the activity, add RecyclerView.

Add RecyclerView to layout

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/re_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Design Adapter

Design an adapter that inherits from recyclerview. Adapter < VH >.

The VH here is the ViewHolder we wrote above.

The LetterAdapter holds its own list of data. Three methods need to be implemented.

• onCreateViewHolder method, which requires a VH object to be returned.
  • Here is to create a VH object and return it. The VH constructor requires a view to be passed in. We create a view for it using layoutinflator. Of course, the creation is based on the previously designed item_letter.
• onBindViewHolder is to give the data to the corresponding VH for display.
• The getItemCount method requires the number of returned data.

LetterAdapter:

private class LetterAdapter extends RecyclerView.Adapter<VH> {

    private List<Character> dataList;

    public LetterAdapter(List<Character> dataList) {
        this.dataList = dataList;
    }

    @NonNull
    @Override
    public VH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new VH(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_letter, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull VH holder, int position) {
        Character c = dataList.get(position);
        holder.tv1.setText(c.toString());
        holder.tv2.setText(String.valueOf(Integer.valueOf(c)));
    }

    @Override
    public int getItemCount() {
        return dataList.size();
    }
}

If you are careless, you may forget to initialize the dataList in the adapter. A null pointer exception will be reported.

Set RecyclerView

It is initialized in the onCreate method of the Activity.

RecyclerView requires 2 settings, adapter and LayoutManager. The adapter is the one we ordered above. LayoutManager here uses LinearLayoutManager to specify the vertical direction, so that we will get a sliding list up and down.

Using LinearLayoutManager

List<Character> characterList = new ArrayList<>();
for (char c = 'a'; c <= 'z'; c++) {
    characterList.add(c);
}

mLetterAdapter = new LetterAdapter(characterList);
RecyclerView letterReView = findViewById(R.id.re_view);
letterReView.setAdapter(mLetterAdapter);
letterReView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.VERTICAL, false));` </pre></details> 

Observe the operation results

Run to the mobile phone or simulator and open the activity. Some friends found that why does a sub item item item occupy the whole screen?

Because the item we set earlier fills the screen. Back to item_letter.xml, take a look at the root layout settings. Put layout_ Change the setting in height = "match_parent" to wrap_content. Recompile and run again to see the results.

We can also set a fixed height for the root layout. It depends on art design and demand.

Android zero foundation tutorial video reference