Sau đây là một ví dụ tối thiểu sẽ trông giống như hình ảnh sau đây.
Bắt đầu với một hoạt động trống rỗng. Bạn sẽ thực hiện các tác vụ sau để thêm RecyclerView. Tất cả bạn cần làm là sao chép và dán mã trong mỗi phần. Sau này bạn có thể tùy chỉnh nó để phù hợp với nhu cầu của bạn.
- Thêm phụ thuộc vào lớp
- Thêm tệp bố cục xml cho hoạt động và cho hàng RecyclerView
- Tạo bộ điều hợp RecyclerView
- Khởi tạo RecyclerView trong hoạt động của bạn
Cập nhật phụ thuộc Gradle
Đảm bảo các phụ thuộc sau có trong gradle.build
tệp ứng dụng của bạn :
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
Bạn có thể cập nhật số phiên bản thành bất cứ điều gì mới nhất . Sử dụng compile
thay vì implementation
nếu bạn vẫn đang sử dụng Android Studio 2.x.
Tạo bố cục hoạt động
Thêm vào RecyclerView
bố cục xml của bạn.
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvAnimals"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Tạo bố cục hàng
Mỗi hàng trong chúng tôi RecyclerView
sẽ chỉ có một TextView
. Tạo một tệp tài nguyên bố cục mới.
recyclerview_row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="@+id/tvAnimalName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>
</LinearLayout>
Tạo bộ chuyển đổi
Các RecyclerView
bộ điều hợp cần một bộ điều hợp để điền vào các khung nhìn trong mỗi hàng với dữ liệu của bạn. Tạo một tệp java mới.
MyRecyclerViewAd Module.java
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {
private List<String> mData;
private LayoutInflater mInflater;
private ItemClickListener mClickListener;
// data is passed into the constructor
MyRecyclerViewAdapter(Context context, List<String> data) {
this.mInflater = LayoutInflater.from(context);
this.mData = data;
}
// inflates the row layout from xml when needed
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = mInflater.inflate(R.layout.recyclerview_row, parent, false);
return new ViewHolder(view);
}
// binds the data to the TextView in each row
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
String animal = mData.get(position);
holder.myTextView.setText(animal);
}
// total number of rows
@Override
public int getItemCount() {
return mData.size();
}
// stores and recycles views as they are scrolled off screen
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
TextView myTextView;
ViewHolder(View itemView) {
super(itemView);
myTextView = itemView.findViewById(R.id.tvAnimalName);
itemView.setOnClickListener(this);
}
@Override
public void onClick(View view) {
if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
}
}
// convenience method for getting data at click position
String getItem(int id) {
return mData.get(id);
}
// allows clicks events to be caught
void setClickListener(ItemClickListener itemClickListener) {
this.mClickListener = itemClickListener;
}
// parent activity will implement this method to respond to click events
public interface ItemClickListener {
void onItemClick(View view, int position);
}
}
Ghi chú
- Mặc dù không thực sự cần thiết, tôi đã bao gồm các chức năng để nghe các sự kiện nhấp chuột trên các hàng. Điều này đã có sẵn trong cái cũ
ListViews
và là một nhu cầu phổ biến. Bạn có thể xóa mã này nếu bạn không cần nó.
Khởi tạo RecyclerView trong Activity
Thêm mã sau vào hoạt động chính của bạn.
MainActivity.java
public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {
MyRecyclerViewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// data to populate the RecyclerView with
ArrayList<String> animalNames = new ArrayList<>();
animalNames.add("Horse");
animalNames.add("Cow");
animalNames.add("Camel");
animalNames.add("Sheep");
animalNames.add("Goat");
// set up the RecyclerView
RecyclerView recyclerView = findViewById(R.id.rvAnimals);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
adapter = new MyRecyclerViewAdapter(this, animalNames);
adapter.setClickListener(this);
recyclerView.setAdapter(adapter);
}
@Override
public void onItemClick(View view, int position) {
Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on row number " + position, Toast.LENGTH_SHORT).show();
}
}
Ghi chú
- Lưu ý rằng hoạt động thực hiện
ItemClickListener
mà chúng tôi đã xác định trong bộ điều hợp của chúng tôi. Điều này cho phép chúng tôi xử lý các sự kiện nhấp vào hàng trong onItemClick
.
Đã kết thúc
Đó là nó. Bạn sẽ có thể chạy dự án của bạn bây giờ và nhận được một cái gì đó tương tự như hình ảnh ở trên cùng.
Đang xảy ra
Thêm một dải phân cách giữa các hàng
Bạn có thể thêm một dải phân cách đơn giản như thế này
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);
Nếu bạn muốn một cái gì đó phức tạp hơn một chút, hãy xem các câu trả lời sau:
Thay đổi màu hàng khi nhấp
Xem câu trả lời này để biết cách thay đổi màu nền và thêm Hiệu ứng Ripple khi nhấp vào một hàng.
Cập nhật hàng
Xem câu trả lời này để biết cách thêm, xóa và cập nhật hàng.
đọc thêm