Trước khi đi vào ví dụ, chúng ta nên biết RecyclerView là gì trong Android. RecyclerView là phiên bản nâng cao của ListView và hoạt động dựa trên View Holder design pattern. Sử dụng RecyclerView chúng ta có thể hiển thị lưới và danh sách các item.
Ví dụ này minh họa cách cập nhật RecyclerView Adapter bằng cách tạo một ứng dụng hồ sơ sinh viên đẹp hiển thị tên và tuổi.
Bước 1
Tạo một dự án mới trong Android Studio, vào File → New Project và điền đầy đủ thông tin cần thiết để tạo dự án mới.
Bước 2
Mở build.gradle và thêm dependency RecyclerView & CardView.
apply plugin: 'com.android.application' android { compileSdkVersion 28 defaultConfig { applicationId "com.example.andy.tutorialspoint" minSdkVersion 19 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:design:28.0.0' implementation 'com.android.support.constraint:constraint-layout:1.1.3' implementation 'com.android.support:cardview-v7:28.0.0' implementation 'com.android.support:recyclerview-v7:28.0.0' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' }Bước 3
Thêm mã sau vào res/layout/activity_main.xml.
<?xml version = "1.0" encoding = "utf-8"?> <RelativeLayout xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" xmlns:app = "https://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" android:layout_height = "match_parent" app:layout_behavior = "@string/appbar_scrolling_view_behavior" tools:showIn = "@layout/activity_main" tools:context = ".MainActivity"> <android.support.v7.widget.RecyclerView android:id = "@+id/recycler_view" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginBottom = "50dp" android:scrollbars = "vertical" /> <LinearLayout android:layout_width = "match_parent" android:layout_below = "@+id/recycler_view" android:layout_marginTop = "-50dp" android:layout_alignParentBottom = "true" android:layout_height = "wrap_content"> <Button android:id = "@+id/add" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "add item"/> <Button android:id = "@+id/remove" android:layout_width = "wrap_content" android:text = "remove item" android:layout_height = "wrap_content" /> </LinearLayout> </RelativeLayout>
Trong mã trên, chúng ta thêm RecyclerView vào Window Manager làm RelativeLayout cha và thêm 2 button Add và Remove. Button Add sẽ thêm dữ liệu vào RecyclerView Adapter, Button Remove sẽ xóa dữ liệu khỏi RecyclerView.
Bước 4
Thêm mã sau vào src/MainActivity.java
package com.example.andy.tutorialspoint; import android.annotation.TargetApi; import android.os.Build; import android.os.Bundle; import android.support.annotation.RequiresApi; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.DividerItemDecoration; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.View; import android.widget.Button; import android.widget.LinearLayout; import android.widget.Toast; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.List; public class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; private StudentAdapter studentAdapter; private List studentDataList = new ArrayList<>(); @TargetApi(Build.VERSION_CODES.O) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button add = findViewById(R.id.add); Button remove = findViewById(R.id.remove); recyclerView = findViewById(R.id.recycler_view); studentAdapter = new StudentAdapter(studentDataList,MainActivity.this); RecyclerView.LayoutManager manager = new LinearLayoutManager(this); recyclerView.setLayoutManager(manager); recyclerView.setAdapter(studentAdapter); StudentDataPrepare(); remove.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(studentDataList.size()>0) { studentDataList.remove(studentDataList.size() - 1); studentAdapter.notifyDataSetChanged(); Toast.makeText(MainActivity.this, String.valueOf(studentDataList.size()), Toast.LENGTH_LONG).show(); } } }); add.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(studentDataList.size()> = 0) { studentData data = new studentData("raghu ram", 25); studentDataList.add(studentDataList.size(), data); studentAdapter.notifyDataSetChanged(); Toast.makeText(MainActivity.this, String.valueOf(studentDataList.size()), Toast.LENGTH_LONG).show(); } } }); } @RequiresApi(api = Build.VERSION_CODES.N) private void StudentDataPrepare() { studentData data = new studentData("sai", 25); studentDataList.add(data); data = new studentData("sai raj", 25); studentDataList.add(data); data = new studentData("raghu", 20); studentDataList.add(data); data = new studentData("raj", 28); studentDataList.add(data); data = new studentData("amar", 15); studentDataList.add(data); data = new studentData("bapu", 19); studentDataList.add(data); data = new studentData("chandra", 52); studentDataList.add(data); data = new studentData("deraj", 30); studentDataList.add(data); data = new studentData("eshanth", 28); studentDataList.add(data); Collections.sort(studentDataList, new Comparator() { @Override public int compare(studentData o1, studentData o2) { return o1.name.compareTo(o2.name); } }); } }Trong mã trên, chúng ta thêm RecyclerView và StudentAdapter. Trong StudentAdapter, chúng ta truyền studentDataList là ArrayList. StudentDataList chứa tên và tuổi sinh viên. Chúng ta thêm 2 button Add và Remove. Dùng button Add để thêm item vào ArrayList như dưới:
if(studentDataList.size()> = 0) { studentData data = new studentData("raghu ram", 25); studentDataList.add(studentDataList.size(), data); studentAdapter.notifyDataSetChanged(); Toast.makeText(MainActivity.this, String.valueOf(studentDataList.size()), Toast.LENGTH_LONG).show(); }Trong mã trên, chúng ta kiểm tra nếu ArrayList size bằng 0 hoặc lớn hơn 0 thì thêm dữ liệu vào ArrayList và dùng phương thức đặc biệt notifyDataSetChanged(). Phương thức này báo cho Adapter biết dữ liệu đã thay đổi nên Adapter sẽ refresh view nội bộ.
Để xóa dữ liệu khỏi ArrayList, chúng ta dùng remove() với ArrayList như dưới:
if(studentDataList.size()>0) { studentDataList.remove(studentDataList.size() - 1); studentAdapter.notifyDataSetChanged(); Toast.makeText(MainActivity.this, String.valueOf(studentDataList.size()), Toast.LENGTH_LONG).show(); }Trong mã trên, chúng ta xóa dữ liệu dựa trên size-1, nghĩa là xóa item cuối cùng. Sau khi xóa, cập nhật Adapter bằng notifyDataSetChanged().
Bước 5
Nội dung file src/StudentAdapter.java:
package com.example.andy.tutorialspoint; import android.graphics.Color; import android.support.annotation.NonNull; 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.List; import java.util.Random; class StudentAdapter extends RecyclerView.Adapter<StudentAdapter.MyViewHolder> { List<studentData> studentDataList; public StudentAdapter(List<studentData> studentDataList) { this.studentDataList = studentDataList; } @NonNull @Override public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { View itemView = LayoutInflater.from(viewGroup.getContext()) .inflate(R.layout.student_list_row, viewGroup, false); return new MyViewHolder(itemView); } @Override public void onBindViewHolder(MyViewHolder viewHolder, int i) { studentData data = studentDataList.get(i); Random rnd = new Random(); int currentColor = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)); viewHolder.parent.setBackgroundColor(currentColor); viewHolder.name.setText(data.name); viewHolder.age.setText(String.valueOf(data.age)); } @Override public int getItemCount() { return studentDataList.size(); } class MyViewHolder extends RecyclerView.ViewHolder { TextView name,age; LinearLayout parent; public MyViewHolder(View itemView) { super(itemView); parent = itemView.findViewById(R.id.parent); name = itemView.findViewById(R.id.name); age = itemView.findViewById(R.id.age); } } }Trong Adapter class có 4 phương thức:
onCreateViewHolder() – Tạo ViewHolder và trả về View.
onBindViewHolder() – Bind dữ liệu với ViewHolder đã tạo.
getItemCount() – Trả về kích thước danh sách.
MyViewHolder class – Inner class ViewHolder kế thừa RecyclerView.ViewHolder.
Để đặt background ngẫu nhiên cho item RecyclerView, chúng ta tạo màu ngẫu nhiên dùng Random class (class có sẵn trong Android) và gán màu cho parent của view item như dưới:
Random rnd = new Random(); int currentColor = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)); viewHolder.parent.setBackgroundColor(currentColor);
Bước 6
Nội dung file xml res/layout/student_list_row.xml:
<?xml version = "1.0" encoding = "utf-8"?> <android.support.v7.widget.CardView xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:card_view = "https://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" card_view:cardCornerRadius = "4dp" android:id = "@+id/card_view" android:layout_margin = "10dp" android:layout_height = "200dp"> <LinearLayout android:id = "@+id/parent" android:layout_gravity = "center" android:layout_width = "match_parent" android:orientation = "vertical" android:gravity = "center" android:layout_height = "match_parent"> <TextView android:id = "@+id/name" android:layout_width = "wrap_content" android:gravity = "center" android:textSize = "25sp" android:textColor = "#FFF" android:layout_height = "wrap_content" /> <TextView android:id = "@+id/age" android:layout_width = "wrap_content" android:gravity = "center" android:textSize = "25sp" android:textColor = "#FFF" android:layout_height = "wrap_content" /> </LinearLayout> </android.support.v7.widget.CardView>
Trong view item trên, chúng ta tạo 2 TextView cho name và age bên trong CardView. CardView có sẵn corner radius và shadow. Vì vậy chúng ta dùng corner radius với CardView.
Bước 7
Nội dung file src/studentData.java:
package com.example.andy.tutorialspoint; class studentData { String name; int age; public studentData(String name, int age) { this.name = name; this.age = age; } }Mã trên mô tả object student data. Hãy thử chạy ứng dụng. Giả sử bạn đã kết nối thiết bị Android thực tế với máy tính. Để chạy ứng dụng từ Android Studio, mở một file activity của dự án và nhấn biểu tượng Run từ thanh công cụ. Chọn thiết bị di động của bạn làm tùy chọn và kiểm tra thiết bị sẽ hiển thị màn hình mặc định:
Ban đầu phần tử cuối là "sai raj" tuổi 25. Thêm 2 phần tử như hình dưới:
Xóa tất cả phần tử, kết quả như hình:
