Android 使用RecyclerView实现商品列表

慈云数据 2024-05-28 技术支持 50 0

实现步骤

  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 {
          private List mProductInfos =new ArrayList();
          public ProductListAdapter(List 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
        
            
            
        
        
        • 创建Item 布局文件
          
              
                  
                  
                      
                      
                      
                      
                  
              
          
          
          • 在你的Activity或Fragment中,初始化RecyclerView和适配器 ,并将数据传递给适配器:
            public class ProductActivity extends AppCompatActivity {
                private RecyclerView recyclerView;
                private List 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));
                }
            }
            
微信扫一扫加客服

微信扫一扫加客服

点击启动AI问答
Draggable Icon