Sử Dụng RecyclerView Trong Lập Trình Android

Tổng quan về RecyclerView trong Android

RecyclerView nó dùng để xây dựng UI gần giống với hoạt động của ListView, GridView. Nó biểu diễn danh sách với nhiều cách trình bày khác nhau, theo chiều đứng, chiều ngang. Nó là thư viện hỗ trợ tốt hơn ListView rất nhiều nhất ra sử dụng trong CoordinatorLayout để tương tác với các thành phần UI khác.

RecyclerView cũng rất phù hợp khi dữ liệu hiện thị thu thập trong quá trình chạy ứng dụng, như căn cứ vào tương tác người dùng, vào dữ liệu tải về ...

Tích hợp vào build.gradle thư viện như sau để sử dụng RecyclerView

implementation 'com.android.support:appcompat-v7:26.1.0' implementation 'com.android.support:recyclerview-v7:26.1.0' implementation 'com.android.support:design:26.1.0'

Khi dùng đến RecylerView thì bạn cũng cần làm việc với:

• RecyclerView.Adapter Quản lý dữ liệu và cập nhật dữ liệu cần hiện thị vào View (phần tử hiện thị trong RecyclerView)
• RecyclerView.LayoutManager Lớp mà để quy định cách mà vị trí các phần tử trong RecyclerView hiện thị, có thể sử dụng các lớp kế thừa LinearLayoutManager, GridLayoutManager
• RecyclerView.ItemAnimator Lớp để xây dựng cách thực hoạt hình (động) cho các sự kiện trên phần tử hiện thị, như hiệu ứng khi thêm phần tử vào, xóa phần tử khỏi RecyclerView
• RecyclerView.Viewholder lớp dùng để gán / cập nhật dữ liệu vào các phần tử.

Ví dụ đầu tiên sử dụng RecycleView hiện thị danh sách

Giả thiết cần hiện thị danh các học sinh một lớp. Thông tin hiện thị có Tên / Năm sinh, phần tử hiện thị có thêm nút bấm để xem chi tiết

Mô hình biểu diễn dữ liệu

Đầu tiên bạn cần xây dựng mô hình biểu diễn dữ liệu một học sinh (Mode), có thể xây dựng lớp đó như sau:

public class Student { private String mName; private int birthYear; public void setmName(String mName) { this.mName = mName; } public void setBirthYear(int birthYear) { this.birthYear = birthYear; } public Student(String mName, int birthYear) { this.mName = mName; this.birthYear = birthYear; } public String getmName() { return mName; } public int getBirthYear() { return birthYear; } }

RecyclerView trong Layout

Tiếp theo trong Layout XML (ví dụ activity_recycler_view_example_active.xml) thêm RecyclerView dạng sau:

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="false" <android.support.v7.widget.RecyclerView android:id="@+id/studentsList" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView> </android.support.design.widget.CoordinatorLayout>

Tạo ra layout biểu diễn một sinh viên trong danh sách

Ví dụ tạo ra layout có tên student_item.xml và cập nhật nội dung dạng sau:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="10dp" > <ImageView android:layout_width="60dp" android:layout_height="match_parent" android:src="@android:drawable/ic_menu_gallery" /> <LinearLayout android:orientation="vertical" android:layout_width="0dp" android:paddingLeft="5dp" android:layout_weight="1" android:layout_height="match_parent"> <TextView android:id="@+id/studentname" android:layout_width="match_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textSize="16sp" android:text="dsafdsfdsfasf" /> <TextView android:id="@+id/birthyear" android:layout_width="match_parent" android:layout_height="wrap_content" android:textStyle="italic" android:textSize="14sp" android:text="dsfadsfdsf" /> </LinearLayout> <Button android:id="@+id/detail_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="16dp" android:paddingRight="16dp" android:textSize="10sp" android:text="Chi tiết" /> </LinearLayout>

Viết Adapter và ViewHolder

Tạo ra một Adapter kế thừa từ RecyclerView.Adapter ví dụ đặt tên là StudentAdapter, chức năng của nó là để RecycleView tương tác với dữ liệu cần hiện thị. Cụ thể ta sẽ quá tải các phương thức trong Adapter

• getItemCount() : cho biết số phần tử của dữ liệu
• onCreateViewHolder : tạo ra đối tượng ViewHolder, trong nó chứa View hiện thị dữ liệu
• onBindViewHolder : chuyển dữ liệu phần tử vào ViewHolder

StudentAdapter cũng sử dụng một lớp tên ViewHolder kế thừa RecyclerView.ViewHolder, nó nắm giữ View hiện thị dữ liệu

StudentAdapter và ViewHolder trình bày với code như sau:

public class StudentAdapter extends RecyclerView.Adapter { //Dữ liệu hiện thị là danh sách sinh viên private List mStutents; // Lưu Context để dễ dàng truy cập private Context mContext; public StudentAdapter(List _student, Context mContext) { this.mStutents = _student; this.mContext = mContext; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { Context context = parent.getContext(); LayoutInflater inflater = LayoutInflater.from(context); // Nạp layout cho View biểu diễn phần tử sinh viên View studentView = inflater.inflate(R.layout.student_item, parent, false); ViewHolder viewHolder = new ViewHolder(studentView); return viewHolder; } @Override public void onBindViewHolder(ViewHolder holder, int position) { Student student = mStutents.get(position); holder.studentname.setText(student.getmName()); holder.birthyear.setText(student.getBirthYear()+""); } @Override public int getItemCount() { return mStutents.size(); } /** * Lớp nắm giữ cấu trúc view */ public class ViewHolder extends RecyclerView.ViewHolder { private View itemview; public TextView studentname; public TextView birthyear; public Button detail_button; public ViewHolder(View itemView) { super(itemView); itemview = itemView; studentname = itemView.findViewById(R.id.studentname); birthyear = itemView.findViewById(R.id.birthyear); detail_button = itemView.findViewById(R.id.detail_button); //Xử lý khi nút Chi tiết được bấm detail_button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(view.getContext(), studentname.getText() +" | " + " Demo function", Toast.LENGTH_SHORT) .show(); } }); } } }

Code thiết lập RecyclerView - Thiết lập LayoutManager và Adapter

Giờ là lúc sử dụng các kết quả trên, trong onCreate của Activity có thể thêm mã như sau:

RecyclerView recyclerView; StudentAdapter adapter; ArrayList<Student> students; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_recycler_view_example_active); recyclerView = findViewById(R.id.studentsList); students = new ArrayList<Student>(); //Tự phát sinh 50 dữ liệu mẫu for (int i = 1; i