Android Studio 實現商品列表和詳情介面{學習記錄3}
阿新 • • 發佈：2022-03-29
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目錄
圖片名需分別與對應專案程式碼裡的名稱相同，可自行修改