在fragment中使用CardView实现一个商品列表页面

1. 首先，在布局文件中添加一个RecyclerView：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp" />

2. 在Fragment中，定义一个变量来保存RecyclerView的实例：

private RecyclerView recyclerView;

3. 在Fragment的onCreateView方法中，初始化RecyclerView：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_product_list, container, false);
    recyclerView = view.findViewById(R.id.recyclerView);
    recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
    recyclerView.setAdapter(new ProductListAdapter(getProductList()));
    return view;
}

这里我们使用LinearLayoutManager来实现垂直方向的列表布局，并将适配器设置为ProductListAdapter，该适配器需要传入一个商品列表的数据源。

4. 创建一个ProductListAdapter类来实现RecyclerView的适配器：

public class ProductListAdapter extends RecyclerView.Adapter<ProductListAdapter.ViewHolder> {

    private List<Product> productList;

    public ProductListAdapter(List<Product> productList) {
        this.productList = productList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_product, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Product product = productList.get(position);
        holder.productName.setText(product.getName());
        holder.productPrice.setText(product.getPrice());
        holder.productImage.setImageResource(product.getImageResource());
    }

    @Override
    public int getItemCount() {
        return productList.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        private CardView cardView;
        private ImageView productImage;
        private TextView productName;
        private TextView productPrice;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            cardView = itemView.findViewById(R.id.cardView);
            productImage = itemView.findViewById(R.id.productImage);
            productName = itemView.findViewById(R.id.productName);
            productPrice = itemView.findViewById(R.id.productPrice);
        }
    }
}

在ProductListAdapter中，我们需要实现三个方法：

- onCreateViewHolder：创建ViewHolder实例，并将item_product布局文件作为其视图。
- onBindViewHolder：将数据绑定到ViewHolder实例上。在这里，我们将商品名称、价格和图像资源绑定到ViewHolder的各个控件上。
- getItemCount：返回商品列表的大小。

5. 在item_product布局文件中，添加一个CardView来显示商品信息：

<androidx.cardview.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="8dp">

        <ImageView
            android:id="@+id/productImage"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center_vertical"
            android:scaleType="centerCrop" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/productName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/productPrice"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="14sp" />

        </LinearLayout>

    </LinearLayout>

</androidx.cardview.widget.CardView>

在CardView中，我们使用了LinearLayout来实现水平方向的布局，并在其中添加了一个ImageView和两个TextView来显示商品图像、名称和价格。在CardView中，我们还设置了圆角半径和阴影效果。

6. 最后，定义一个Product类来保存商品信息：

public class Product {

    private String name;
    private String price;
    private int imageResource;

    public Product(String name, String price, int imageResource) {
        this.name = name;
        this.price = price;
        this.imageResource = imageResource;
    }

    public String getName() {
        return name;
    }

    public String getPrice() {
        return price;
    }

    public int getImageResource() {
        return imageResource;
    }
}

在这个类中，我们定义了商品名称、价格和图像资源三个属性，并提供了对应的get方法。

这样，一个使用CardView实现商品列表的Fragment就完成了。