Ví dụ hoàn chỉnh
Sự khác biệt thực sự duy nhất giữa chiều dọc RecyclerViewvà chiều ngang là cách bạn thiết lập LinearLayoutManager. Đây là đoạn mã. Ví dụ đầy đủ dưới đây.
LinearLayoutManager horizontalLayoutManagaer = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(horizontalLayoutManagaer);
Ví dụ đầy đủ này được mô phỏng theo RecyclerViewcâu trả lời dọc của tôi .
Cập nhật phụ thuộc Gradle
Đảm bảo các phụ thuộc sau có trong gradle.buildtệp ứng dụng của bạn :
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:recyclerview-v7:27.1.1'
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 .
Tạo bố cục hoạt động
Thêm vào RecyclerViewbố 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 vật phẩm
Mỗi mục trong chúng ta RecyclerViewsẽ có một màu duy nhất Viewtrên a TextView. Tạo một tệp tài nguyên bố cục mới.
recyclerview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<View
android:id="@+id/colorView"
android:layout_width="100dp"
android:layout_height="100dp"/>
<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 RecyclerViewcần một bộ chuyển đổi để cư quan điểm trong mỗi hàng (item ngang) 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<Integer> mViewColors;
private List<String> mAnimals;
private LayoutInflater mInflater;
private ItemClickListener mClickListener;
// data is passed into the constructor
MyRecyclerViewAdapter(Context context, List<Integer> colors, List<String> animals) {
this.mInflater = LayoutInflater.from(context);
this.mViewColors = colors;
this.mAnimals = animals;
}
// inflates the row layout from xml when needed
@Override
@NonNull
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
return new ViewHolder(view);
}
// binds the data to the view and textview in each row
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
int color = mViewColors.get(position);
String animal = mAnimals.get(position);
holder.myView.setBackgroundColor(color);
holder.myTextView.setText(animal);
}
// total number of rows
@Override
public int getItemCount() {
return mAnimals.size();
}
// stores and recycles views as they are scrolled off screen
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
View myView;
TextView myTextView;
ViewHolder(View itemView) {
super(itemView);
myView = itemView.findViewById(R.id.colorView);
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
public String getItem(int id) {
return mAnimals.get(id);
}
// allows clicks events to be caught
public 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 vào các mục. Điều này đã có sẵn trong cái cũ
ListViewsvà 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 {
private MyRecyclerViewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// data to populate the RecyclerView with
ArrayList<Integer> viewColors = new ArrayList<>();
viewColors.add(Color.BLUE);
viewColors.add(Color.YELLOW);
viewColors.add(Color.MAGENTA);
viewColors.add(Color.RED);
viewColors.add(Color.BLACK);
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);
LinearLayoutManager horizontalLayoutManager
= new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(horizontalLayoutManager);
adapter = new MyRecyclerViewAdapter(this, viewColors, animalNames);
adapter.setClickListener(this);
recyclerView.setAdapter(adapter);
}
@Override
public void onItemClick(View view, int position) {
Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on item position " + position, Toast.LENGTH_SHORT).show();
}
}
Ghi chú
- Lưu ý rằng hoạt động thực hiện
ItemClickListenermà 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 bấm vào mục 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.
Ghi chú
- Các khung nhìn màu trong ví dụ của tôi tất nhiên có thể được thay thế bằng hình ảnh trong một dự án thực tế.
- Ví dụ RecyclerView dọc
LinearLayoutManagervới định hướng được đặt thànhHORIZONTAL.