Android Studio 实现商品列表和详情界面{学习记录3}

1,以KFC为例,实现如下界面

 

2,要求:

2.1使用SimpleAdapter适配器，完成对产品列表数据的填充。并为ListView控件绑定所创建的适配器。

2.2点击产品列表中的产品项，跳转到产品详细界面，并显示所点击的产品。

2.3在产品详细界面中，点击“返回”按钮，关闭产品详细界面。

 

3,实现产品列表功能：

3.1在layout目录下创建productlist.xml

此界面为产品列表，使用ListView控件

代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     android:padding="10dp">
 7 
 8     <TextView
 9         android:id="@+id/tv_dis"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:text="HelloWorld"
13         android:textColor="#DD2C00" />
14 
15     <ListView
16         android:id="@+id/lv_kfc"
17         android:layout_width="match_parent"
18         android:layout_height="match_parent"
19         android:layout_weight="1" />
20 </LinearLayout>

3.2在layout目录下创建list_item.xml

此界面为列表里显示的内容，使用ImageView控件和TextView控件

代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_width="match_parent"
 5     android:layout_height="90dp">
 6 
 7     <ImageView
 8         android:id="@+id/list_iv"
 9         android:layout_width="80dp"
10         android:layout_height="wrap_content"
11         app:srcCompat="@mipmap/aokaochi" />
12 
13     <TextView
14         android:id="@+id/list.tv_name"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         android:layout_marginLeft="3dp"
18         android:layout_gravity="center_vertical"
19         android:text="TextView" />
20 </LinearLayout>

3.3在Java目录中建立ListActivity.java实现以下功能

3.3.1使用SimpleAdapter适配器，完成对产品列表数据的填充

3.3.2为ListView控件绑定所创建的适配器

3.3.3点击产品列表中的产品项，跳转到产品详细界面，并显示所点击的产品

代码如下：

 1 package com.example.listviewdemo;
 2 
 3 import androidx.appcompat.app.AppCompatActivity;
 4 
 5 import android.content.Intent;
 6 import android.os.Bundle;
 7 import android.widget.ListView;
 8 import android.widget.SimpleAdapter;
 9 import android.widget.TextView;
10 import java.util.ArrayList;
11 import java.util.HashMap;
12 import java.util.List;
13 import java.util.Map;
14 public class ListActivity extends AppCompatActivity {
15     TextView tv;
16     ListView lv;
17     SimpleAdapter sa;
18     @Override
19     protected void onCreate(Bundle savedInstanceState) {
20         super.onCreate(savedInstanceState);
21         setContentView(R.layout.productlist);
22         tv = findViewById(R.id.tv_dis);
23         lv = findViewById(R.id.lv_kfc);
24         sa = new SimpleAdapter(this,getData(), R.layout.list_item,new String[]{"img","name"},new int[]{R.id.list_iv,R.id.list_tv_name});
25         lv.setAdapter(sa);
26         lv.setOnItemClickListener((adapterView, view, i, l)-> {
27                 Map<String,Object> clickmap=(Map<String, Object>) adapterView.getItemAtPosition(i);//注意:adapterView.getItem(没有ID)AtPosition(i)
28                 String name=clickmap.get("name").toString();
29                 int img=(int)clickmap.get("img");
30                 tv.setText(name);
31                 Intent intent=new Intent(ListActivity.this,DetailActivity.class);
32                 intent.putExtra("name",name);
33                 intent.putExtra("img",img);
34                 startActivity(intent);
35         });
36     }
37 
38     private List<Map<String,Object>> getData() {
39         List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
40         Map<String,Object> map=new HashMap<String,Object>();
41         map.put("img",R.mipmap.aokaochi);
42         map.put("name","新奥尔良烤翅");
43         list.add(map);
44 
45         map=new HashMap<String,Object>();
46         map.put("img",R.mipmap.bafenbao);
47         map.put("name","脆鸡八分堡");
48         list.add(map);
49 
50         map=new HashMap<String,Object>();
51         map.put("img",R.mipmap.bafentao);
52         map.put("name","脆鸡八分堡套餐");
53         list.add(map);
54 
55         map=new HashMap<String,Object>();
56         map.put("img",R.mipmap.tong);
57         map.put("name","超值全家桶");
58         list.add(map);
59 
60         map=new HashMap<String,Object>();
61         map.put("img",R.mipmap.xiangbao);
62         map.put("name","香辣鸡腿堡");
63         list.add(map);
64 
65         map=new HashMap<String,Object>();
66         map.put("img",R.mipmap.xiangchi);
67         map.put("name","香辣鸡翅");
68         list.add(map);
69 
70         map=new HashMap<String,Object>();
71         map.put("img",R.mipmap.xiangtao);
72         map.put("name","香辣鸡腿堡套餐");
73         list.add(map);
74 
75         map=new HashMap<String,Object>();
76         map.put("img",R.mipmap.yunzhi);
77         map.put("name","" +"吮指原味鸡");
78         list.add(map);
79         return list;
80     }
81 }

4,实现详情界面功能

4.1,在layout目录下创建activity_detail.xml

实现详情界面使用了TextView,ImageView,Button三个控件，分别显示产品名，产品图片和返回按钮

代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical">
 7 
 8     <TextView
 9         android:id="@+id/tv_d_dis"
10         android:layout_width="match_parent"
11         android:layout_height="50dp"
12         android:textColor="#ff0000"
13         android:gravity="center"
14         android:text="TextView" />
15 
16     <ImageView
17         android:id="@+id/iv_d_chanpin"
18         android:layout_width="match_parent"
19         android:layout_height="300dp"
20         app:srcCompat="@mipmap/tong" />
21 
22     <Button
23         android:id="@+id/btn_d_back"
24         android:layout_width="match_parent"
25         android:layout_height="50dp"
26         android:text="返回" />
27 
28 </LinearLayout>

4.2,实现点击详情页返回按钮返回产品列表界面

在Java目录下创建DetailActivity.java

代码如下：

 1 package com.example.listviewdemo;
 2 
 3 import androidx.appcompat.app.AppCompatActivity;
 4 
 5 import android.content.Intent;
 6 import android.media.Image;
 7 import android.os.Bundle;
 8 import android.view.View;
 9 import android.widget.Button;
10 import android.widget.ImageView;
11 import android.widget.TextView;
12 
13 public class DetailActivity extends AppCompatActivity {
14 ImageView iv;
15 TextView tv_dis;
16 Button btn;
17 
18     @Override
19     protected void onCreate(Bundle savedInstanceState) {
20         super.onCreate(savedInstanceState);
21         setContentView(R.layout.activity_detail);
22         tv_dis=findViewById(R.id.tv_d_dis);
23         iv=findViewById(R.id.iv_d_chanpin);
24         btn=findViewById(R.id.btn_d_back);
25         Intent intent=getIntent();
26         tv_dis.setText(intent.getStringExtra("name"));
27         iv.setImageResource(intent.getIntExtra("img",R.mipmap.aokaochi));
28         btn.setOnClickListener(new View.OnClickListener() {
29             @Override
30             public void onClick(View view) {
31                 finish();
32             }
33         });
34     }
35 }

 

注:产品信息为图片形式，故需要提前将相关图片放入mipmap目录

图片名需分别与对应项目代码里的名称相同，可自行修改

 

posted @ 2022-03-29 18:16  ILEQ  阅读(4820)  评论(0)  编辑  收藏  举报