实现步骤:
- 创建数据模型 创建一个表示商品的类,例如ProductInfo
- 创建适配器 创建一个继承自RecyclerView.Adapter的适配器类,用于处理RecyclerView中的数据和视图
- 在主页面布局文件中添加RecyclerView
- 创建Item 布局文件
- 在你的Activity或Fragment中,初始化RecyclerView和适配器 ,并将数据传递给适配器:
- 创建数据模型 创建一个表示商品的类,例如ProductInfo
public class ProductInfo {
private int _id;
private int product_img;
private String product_title;
private String product_style;
private String product_size;
private String product_price;
public ProductInfo(int _id,int product_img, String product_title, String product_style, String product_size, String product_price) {
this._id = _id;
this.product_title = product_title;
this.product_style = product_style;
this.product_size = product_size;
this.product_price = product_price;
this.product_img = product_img;
}
public int getProduct_img() {
return product_img;
}
public void setProduct_img(int product_img) {
this.product_img = product_img;
}
public int get_id() {
return _id;
}
public void set_id(int _id) {
this._id = _id;
}
public String getProduct_title() {
return product_title;
}
public void setProduct_title(String product_title) {
this.product_title = product_title;
}
public String getProduct_style() {
return product_style;
}
public void setProduct_style(String product_style) {
this.product_style = product_style;
}
public String getProduct_size() {
return product_size;
}
public void setProduct_size(String product_size) {
this.product_size = product_size;
}
public String getProduct_price() {
return product_price;
}
public void setProduct_price(String product_price) {
this.product_price = product_price;
}
}
- 创建适配器 创建一个继承自RecyclerView.Adapter的适配器类,用于处理RecyclerView中的数据和视图
public class ProductListAdapter extends RecyclerView.Adapter<ProductListAdapter.MyHolder> {
private List<ProductInfo> mProductInfos =new ArrayList<>();
public ProductListAdapter(List<ProductInfo> list){
this.mProductInfos =list;
}
@NonNull
@Override
public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.product_item, null);
return new MyHolder(view);
}
@Override
public void onBindViewHolder(@NonNull MyHolder holder, int position) {
//绑定数据
ProductInfo productInfo = mProductInfos.get(position);
//设置数据
holder.tv_title.setText(productInfo.getProduct_title());
holder.tv_style.setText("风格:"+productInfo.getProduct_style());
holder.tv_size.setText("尺寸:"+productInfo.getProduct_size());
holder.tv_price.setText("¥ "+ productInfo.getProduct_price());
holder.img_product.setImageResource(productInfo.getProduct_img());
}
@Override
public int getItemCount() {
return mProductInfos.size();
}
static class MyHolder extends RecyclerView.ViewHolder{
TextView tv_title;
TextView tv_style;
TextView tv_size;
TextView tv_price;
ImageView img_product;
public MyHolder(@NonNull View itemView) {
super(itemView);
//初始化控件
tv_title =itemView.findViewById(R.id.tv_title);
tv_style =itemView.findViewById(R.id.tv_style);
tv_size =itemView.findViewById(R.id.tv_size);
tv_price =itemView.findViewById(R.id.tv_price);
img_product =itemView.findViewById(R.id.img_product);
}
}
}
- 在主页面布局文件中添加RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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"
android:orientation="vertical"
tools:context=".activity.ProductActivity">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/teal_200"
app:title="商品列表"
app:titleTextColor="@color/white" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
tools:listitem="@layout/product_item"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
android:layout_height="match_parent"/>
</androidx.appcompat.widget.LinearLayoutCompat>
- 创建Item 布局文件
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<ImageView
android:id="@+id/img_product"
android:layout_width="90dp"
android:layout_height="110dp"
android:scaleType="centerCrop"
android:src="@mipmap/img_product_1" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣"
android:textColor="#333333"
android:textStyle="bold" />
<TextView
android:id="@+id/tv_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="风格: 韩版"
android:textSize="12dp" />
<TextView
android:id="@+id/tv_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:text="尺寸: M"
android:textSize="12dp" />
<TextView
android:id="@+id/tv_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="¥180.90"
android:textColor="#E53935"
android:textSize="17dp" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
- 在你的Activity或Fragment中,初始化RecyclerView和适配器 ,并将数据传递给适配器:
public class ProductActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private List<ProductInfo> mProductInfoList = new ArrayList<>();
private ProductListAdapter productListAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_product);
//初始化控件
recyclerView = findViewById(R.id.recyclerView);
//模拟数据
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.img_product_1,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
mProductInfoList.add(new ProductInfo(0,R.mipmap.ic_launcher,"First Ring 灰色/棕色V领修身针织马甲背心复古叠穿百搭马夹上衣","韩版","M","180.90"));
//创建适配器
productListAdapter = new ProductListAdapter(mProductInfoList);
//设置适配器
recyclerView.setAdapter(productListAdapter);
//如果不在xml中设置app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager",就需要在代码中设置
// recyclerView.setLayoutManager(new LinearLayoutManager(ProductActivity.this));
}
}
- 效果图