Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
Sử dụng RecyclerView trong Android
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




