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 item.
Ví dụ này minh họa cách cuộn lên đầu RecyclerView với LinearLayoutManager bằng cách tạo ứng dụng hồ sơ sinh viên 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"?> <android.support.design.widget.CoordinatorLayout 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" android:fitsSystemWindows = "true" tools:context = ".MainActivity"> <android.support.v7.widget.RecyclerView android:id = "@+id/recycler_view" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:scrollbars = "horizontal" /> <android.support.design.widget.FloatingActionButton android:id = "@+id/top" app:backgroundTint = "#FFFF00" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "bottom|end" android:src = "@android:drawable/arrow_up_float" /> </android.support.design.widget.CoordinatorLayout >
Trong mã trên, chúng ta thêm RecyclerView vào Window Manager làm RelativeLayout cha và thêm FloatingActionButton. FloatingActionButton hỗ trợ CoordinatorLayout. Vì vậy chúng ta dùng CoordinatorLayout làm cha. Khi click vào FloatingActionButton, nó sẽ cuộn lên vị trí top.
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.design.widget.FloatingActionButton; 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); FloatingActionButton moveTop = findViewById(R.id.top); 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(); moveTop.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { recyclerView.smoothScrollToPosition(0); } }); } @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 dùng smoothScrollToPosition() để cuộn đến vị trí 0, có thể gán vị trí bất kỳ theo yêu cầu. Trong ví dụ này, nó cuộn về vị trí 0 (top) như dưới:
moveTop.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { recyclerView.smoothScrollToPosition(0); } });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 { List studentDataList; public StudentAdapter(List 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 với ViewHolder đã tạo.
getItemCount() – Chứa kích thước list.
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 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:
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:
Bây giờ click nút vàng cuộn lên đầu RecyclerView, kết quả như hình dưới:
