Sử dụng RecyclerView trong Android

Minh Tú Anh viết ngày 22/06/2017

Xin chào các bạn, với nhiều bạn học lập trình android chắc không còn xa lạ gì với ListView, một UI Widget hỗ trợ trong việc hiển thị danh sách,... Tuy nhiên còn có một UI Widget khác gần giống ListView nhưng hoạt động linh hoạt và mạnh mẽ hơn. Đó chính là RecycleView. Nó có thể làm được những gì? Vì vậy, hôm nay mình sẽ hướng dẫn các bạn cách sử dụng RecyclerView

B1: Tạo project

các bạn cần tạo một project với tên RecycleViewDemo. (mình dùng android studio)

B2: Thêm dependency vào file build.gradle

Các bạn làm như sau: kích chuột phải vào app -> chọn Open Module Settings, chuyển sang tab Dependency

tiếp theo kích vào dấu + màu xanh lá cây bên tay phải, chọn library dependency, tìm với từ khóa RecycleView, các bạn chọn như trong hình và kích OK

kiểm tra lại file build.gradle

chú ý: phải sửa lại phiên bản cho giống với com.android.support:appcompat-v7:25.3.1 hoặc có thể thay bằng compile 'com.android.support:recyclerview-v7:21.0.+'

B3: tạo RecyclerView trong file xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.haitm.recyclerviewdemo.MainActivity">

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

</android.support.constraint.ConstraintLayout>

B4: tạo file item.xml cho mỗi phần tử

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

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

B5: tạo Adapter cho RecyclerView

package com.example.haitm.recyclerviewdemo;

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

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

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolder>{

    private List<String> data = new ArrayList<>();

    public RecyclerViewAdapter(List<String> data) {
        this.data = data;
    }

    @Override
    public RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View view = inflater.inflate(R.layout.item, parent, false);
        return new RecyclerViewHolder(view);
    }

    @Override
    public void onBindViewHolder(RecyclerViewHolder holder, int position) {
        holder.txtUserName.setText(data.get(position));
    }

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


    public class RecyclerViewHolder extends RecyclerView.ViewHolder {
        TextView txtUserName;
        public RecyclerViewHolder(View itemView) {
            super(itemView);
            txtUserName = (TextView) itemView.findViewById(R.id.user_name);
        }
    }
}

File item.xml của mình chỉ khai báo một TextView (phần tử của RecyclerView chỉ là một string) nên mình khai báo private List<String> data = new ArrayList<>();. data sẽ lưu trữ toàn bộ dữ liệu

Trong class RecyclerViewAdapter, bạn cần khai báo một class RecyclerViewHolder, class này giúp kiểm soát các view tốt hơn, tránh việc findViewById nhiều lần, trong file item.xml các bạn khai báo bao nhiêu view thì ở đây phải có đủ.

Trong phương thức onCreateViewHolder, View view = inflater.inflate(R.layout.item, parent, false); dùng để gán giao diện cho một phần tử của RecyclerView

Phương thức getItemCount() trả về số lượng phần tử

Phương thức onBindViewHolder dùng để gán dữ liệu từ listData vào viewHolder

B6: Gán adapter vào RecyclerView

Trong MainActivity.java, chúng ta khai báo Adapter

package com.example.haitm.recyclerviewdemo;

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;

public class MainActivity extends AppCompatActivity {

    RecyclerView mRecyclerView;
    RecyclerViewAdapter mRcvAdapter;
    List<String> data;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        data = new ArrayList<>();
        data.add("Nguyễn Minh Hưng");
        data.add("Hoàng Minh Lợi");
        data.add("Nguyễn Duy Bảo");
        data.add("Nguyễn Ngọc Doanh");
        data.add("Nguyễn Phạm Thế Hà");
        data.add("Trần Anh Đức");
        data.add("Trần Minh Hải");
        mRcvAdapter = new RecyclerViewAdapter(data);

        LinearLayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);

        mRecyclerView.setLayoutManager(layoutManager);
        mRecyclerView.setAdapter(mRcvAdapter);

    }
}

Các bạn có thể tùy chỉnh tham số truyền vào trong hàm setOrientation để danh sách hiển thị theo chiều dọc hoặc ngang

KẾT QUẢ

B7: Bắt sự kiện khi click vào item của RecyclerView

Để bắt sự kiện khi kích vào item của RecyclerView, đầu tiên các bạn thêm id cho LinearLayout trong item.xml android:id="@+id/line". Mục đích chính là bắt sự kiện khi kích vào LinearLayout

Tiếp theo trong RecyclerViewAdapter sửa như sau

package com.example.haitm.recyclerviewdemo;

import android.content.Context;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

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

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolder>{

    private Context mContext;
    private List<String> data = new ArrayList<>();

    public RecyclerViewAdapter(Context mContext, List<String> data) {
        this.mContext = mContext;
        this.data = data;
    }

    @Override
    public RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // Giữ nguyên
    }

    @Override
    public void onBindViewHolder(final RecyclerViewHolder holder, int position) {
        holder.txtUserName.setText(data.get(position));

        // bắt sự kiện khi kích vào LinearLayout
        holder.line.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                holder.line.setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorAccent));
                if (onItemClickedListener != null) {
                    onItemClickedListener.onItemClick(holder.txtUserName.getText().toString());
                }
            }
        });
    }

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


    public class RecyclerViewHolder extends RecyclerView.ViewHolder {
        TextView txtUserName;
        LinearLayout line;
        public RecyclerViewHolder(View itemView) {
            super(itemView);
            txtUserName = (TextView) itemView.findViewById(R.id.user_name);
            line = (LinearLayout) itemView.findViewById(R.id.line);
        }
    }

    public interface OnItemClickedListener {
        void onItemClick(String username);
    }

    private OnItemClickedListener onItemClickedListener;

    public void setOnItemClickedListener(OnItemClickedListener onItemClickedListener) {
        this.onItemClickedListener = onItemClickedListener;
    }
}

Bên MainActivity.java thêm đoạn code sau để có thể lấy được dữ liệu từ bên Adapter (thực chất là một lời gọi callBack)

mRcvAdapter.setOnItemClickedListener(new RecyclerViewAdapter.OnItemClickedListener() {
            @Override
            public void onItemClick(String username) {
                Toast.makeText(MainActivity.this, username, Toast.LENGTH_SHORT).show();
            }
        });

Kết quả

link github chứa source code ở đây
Chúc các bạn thành công