Android verwendet RecyclerView, um die Produktliste zu implementieren

Umsetzungsschritte:

1. Erstellen Sie ein Datenmodell. Erstellen Sie eine Klasse, die das Produkt darstellt, z. B. ProductInfo
2. Erstellen Sie einen Adapter. Erstellen Sie eine Adapterklasse, die von RecyclerView.Adapter erbt, um Daten und Ansichten in RecyclerView zu verarbeiten
3. Fügen Sie RecyclerView zur Hauptseitenlayoutdatei hinzu
4. Erstellen Sie eine Artikellayoutdatei
5. Initialisieren Sie in Ihrer Aktivität oder Ihrem Fragment die RecyclerView und den Adapter und übergeben Sie Daten an den Adapter:

---

• Erstellen Sie ein Datenmodell. Erstellen Sie eine Klasse, die das Produkt darstellt, z. B. 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;
    }
}

• Erstellen Sie einen Adapter. Erstellen Sie eine Adapterklasse, die von RecyclerView.Adapter erbt, um Daten und Ansichten in RecyclerView zu verarbeiten

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);

        }
    }
}

• Fügen Sie RecyclerView zur Hauptseitenlayoutdatei hinzu

<?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>

• Erstellen Sie eine Artikellayoutdatei

<?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>

• Initialisieren Sie in Ihrer Aktivität oder Ihrem Fragment die RecyclerView und den Adapter und übergeben Sie Daten an den Adapter:

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));
    }
}

• Darstellungen