RecyclerView Basics

Verification environment

The content of this article was verified in the following environment.

About RecyclerView

Feature

Overall picture

List of classes that appear in RecyclerView

name of the class Description Where is it in ListView?
RecyclerView RecyclerView itself. Widget. Equivalent to ListView itself
RecyclerView.Adapter What is generated by setting one row of data in one row of View Equivalent to ListView Adapter
RecyclerView.ViewHolder Holds a line of View (widget) reference In ListView, the layout was inflated with the getItem method. In RecyclerView, the view of the layout for one line is held in the subclass of ViewHolder.
RecyclerView.LayoutManager A class that manages layout responsively considering the size of one piece of data Does not exist in ListView.

RecyclerView seen in the figure

The simplest overview of RecyclerView is shown below. The big difference from ListView is that in ListView, inflating, getting data from the layout file in the getItem method, It is stored in View. In RecyclerView, each must be defined as an independent process (method or class).

RecyclerView_001.png

The app created this time

I created a very simple app. Content that only displays the image and title in one line, and detailed information below it. The purpose of this time is not a complicated display, but to understand the basic implementation method of RecyclerView, I made it such a simple application.

SmallScreenshot_1493098981.png

Implementation

You can make the most of input completion by creating children in the following order.

Add support library

To use RecyclerView, you need to add a support library.

build.gradle


dependencies {
    compile 'com.android.support:recyclerview-v7:25.3.1'
}

Layout for one line

row.xml



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="0.5"/>
            <TextView
                android:id="@+id/detail"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="0.5"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

One line of data model

RowData.java


package jp.co.casareal.sample.recyclerviewsample.model;

/**
 * Created by naoi on 2017/04/25.
 */

public class RowData {
    private String title;
    private String detail;
・ ・ ・ Setter/getter omitted ...
}

ViewHolder definition

The Adapter gets a View reference from the inflated row layout and holds it in the public </ b> field.

CasarealViewHolder.java


package jp.co.casareal.sample.recyclerviewsample.viewholder;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

import jp.co.casareal.sample.recyclerviewsample.R;

/**
 * Created by naoi on 2017/04/25.
 */

public class CasarealViewHolder extends RecyclerView.ViewHolder {
    public TextView titleView;
    public TextView detailView;
    public CasarealViewHolder(View itemView) {
        super(itemView);
        titleView = (TextView) itemView.findViewById(R.id.title);
        detailView = (TextView) itemView.findViewById(R.id.detail);

    }
}

Adapter definition

CasarealRecycleViewAdapter.java


package jp.co.casareal.sample.recyclerviewsample.adapter;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

import jp.co.casareal.sample.recyclerviewsample.R;
import jp.co.casareal.sample.recyclerviewsample.model.RowData;
import jp.co.casareal.sample.recyclerviewsample.viewholder.CasarealViewHolder;

/**
 * Created by naoi on 2017/04/25.
 */

public class CasarealRecycleViewAdapter extends RecyclerView.Adapter<CasarealViewHolder> {

    private List<RowData> list;

    public CasarealRecycleViewAdapter(List<RowData> list) {
        this.list = list;
    }

    @Override
    public CasarealViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.row, parent,false);
        CasarealViewHolder vh = new CasarealViewHolder(inflate);
        return vh;
    }

    @Override
    public void onBindViewHolder(CasarealViewHolder holder, int position) {
        holder.titleView.setText(list.get(position).getTitle());
        holder.detailView.setText(list.get(position).getDetail());
    }

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

Description of each process in Adapter

.java


 @Override
    public CasarealViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.row, parent,false);
        CasarealViewHolder vh = new CasarealViewHolder(inflate);
        return vh;
    }

Corresponds to ① and ② of "RecyclerView seen in the figure".

.java


@Override
    public void onBindViewHolder(CasarealViewHolder holder, int position) {
        holder.titleView.setText(list.get(position).getTitle());
        holder.detailView.setText(list.get(position).getDetail());
    }

Corresponds to ③ and ④ of "RecyclerView seen in the figure".

.java


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

This method should return the total number of items to display.

In addition, the data set to be displayed in the constructor etc. is passed.

Activity definition

Overall layout file

activity_main.xml


<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.co.casareal.sample.recyclerviewsample.MainActivity">

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

As with ListView, you will need to set the Adapter later, so you need to specify the id in RecyclerView.

Activity processing

MainActivity.java


package jp.co.casareal.sample.recyclerviewsample;

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

import java.util.ArrayList;
import java.util.List;

import jp.co.casareal.sample.recyclerviewsample.adapter.CasarealRecycleViewAdapter;
import jp.co.casareal.sample.recyclerviewsample.model.RowData;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView rv = (RecyclerView) findViewById(R.id.casarealRecyclerView);
        CasarealRecycleViewAdapter adapter = new CasarealRecycleViewAdapter(this.createDataset());

        LinearLayoutManager llm = new LinearLayoutManager(this);

        rv.setHasFixedSize(true);

        rv.setLayoutManager(llm);

        rv.setAdapter(adapter);
    }

    private List<RowData> createDataset() {

        List<RowData> dataset = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            RowData data = new RowData();
            data.setTitle("Casa Real Taro" + i + "issue");
            data.setDetail("Casa Real Taro" + i + "I like fried chicken");

            dataset.add(data);
        }
        return dataset;
    }
}

Description of each process

.java


 LinearLayoutManager llm = new LinearLayoutManager(this);
 rv.setLayoutManager(llm);

One of the useful features that ListView doesn't have is the LayoutManager used to responsively display data. This time I'm using LinerLayout, but there are also Grid and so on.

.java


 rv.setHasFixedSize(true);

If the number of data to be displayed is fixed length, it is a setting that makes effective use of resources and improves performance.

.java


  CasarealRecycleViewAdapter adapter = new CasarealRecycleViewAdapter(this.createDataset());
  rv.setAdapter(adapter);

Set the Adapter.

.java


  private List<RowData> createDataset() {

        List<RowData> dataset = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            RowData data = new RowData();
            data.setTitle("Casa Real Taro" + i + "issue");
            data.setDetail("Casa Real Taro" + i + "I like fried chicken");

            dataset.add(data);
        }
        return dataset;
    }

The dataset to be displayed is generated by the createDataset method.

To enhance the functions

This is the Kotlin version, but if you want to know how to operate by drag and drop or swipe, please refer to the following article.

Drag and drop move and swipe removal in RecyclerView

reference

Creating lists and cards https://developer.android.com/training/material/lists-cards.html?hl=ja#CardView

API https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html

Recommended Posts

RecyclerView Basics
Rails basics
Ruby basics
Ruby basics
Fragment basics
JPA Basics 1
Docker basics
ViewPager basics
Java basics
Java basics
RSpec Basics
JPA Basics 2
Hash basics
Now, I've summarized the basics of RecyclerView
Rails CSV basics
Rails Routing Basics
Rails database basics
Basics of Ruby
Java JAR basics
Object-oriented (Java) basics
vim (gitbush) basics
Regular expression basics
Java concurrency basics
Stream API basics