Android는 RecyclerView를 사용하여 제품 목록을 구현합니다.

구현 단계:

1. 데이터 모델 생성 ProductInfo와 같이 제품을 나타내는 클래스 생성
2. 어댑터 만들기 RecyclerView.Adapter에서 상속되는 어댑터 클래스를 만들어 RecyclerView에서 데이터와 보기를 처리합니다.
3. 기본 페이지 레이아웃 파일에 RecyclerView 추가
4. 항목 레이아웃 파일 생성
5. 활동 또는 프래그먼트에서 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>

• 항목 레이아웃 파일 생성

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

• 활동 또는 프래그먼트에서 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));
    }
}

• 렌더링