Android 使用RecyclerView实现商品列表

实现步骤：

1. 创建数据模型 创建一个表示商品的类，例如ProductInfo
2. 创建适配器 创建一个继承自RecyclerView.Adapter的适配器类，用于处理RecyclerView中的数据和视图
3. 在主页面布局文件中添加RecyclerView
4. 创建Item 布局文件
5. 在你的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));
    }
}

• 效果图