Android Studio 實現商品列表和詳情界面{學習記錄3}

1,以KFC為例,實現如下界面

 

2,要求:

2.1使用SimpleAdapter適配器，完成對產品列表數據的填充。並為ListView控件綁定所創建的適配器。

2.2點擊產品列表中的產品項，跳轉到產品詳細界面，並顯示所點擊的產品。

2.3在產品詳細界面中，點擊“返回”按鈕，關閉產品詳細界面。

 

3,實現產品列表功能：

3.1在layout目錄下創建productlist.xml

此界面為產品列表，使用ListView控件

代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:id="@+id/tv_dis"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        android:textColor="#DD2C00" />

    <ListView
        android:id="@+id/lv_kfc"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
</LinearLayout>

3.2在layout目錄下創建list_item.xml

此界面為列表里顯示的內容，使用ImageView控件和TextView控件

代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="90dp">

    <ImageView
        android:id="@+id/list_iv"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/aokaochi" />

    <TextView
        android:id="@+id/list.tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:layout_gravity="center_vertical"
        android:text="TextView" />
</LinearLayout>

3.3在Java目錄中建立ListActivity.java實現以下功能

3.3.1使用SimpleAdapter適配器，完成對產品列表數據的填充

3.3.2為ListView控件綁定所創建的適配器

3.3.3點擊產品列表中的產品項，跳轉到產品詳細界面，並顯示所點擊的產品

代碼如下：

package com.example.listviewdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class ListActivity extends AppCompatActivity {
    TextView tv;
    ListView lv;
    SimpleAdapter sa;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.productlist);
        tv = findViewById(R.id.tv_dis);
        lv = findViewById(R.id.lv_kfc);
        sa = new SimpleAdapter(this,getData(), R.layout.list_item,new String[]{"img","name"},new int[]{R.id.list_iv,R.id.list_tv_name});
        lv.setAdapter(sa);
        lv.setOnItemClickListener((adapterView, view, i, l)-> {
                Map<String,Object> clickmap=(Map<String, Object>) adapterView.getItemAtPosition(i);//注意:adapterView.getItem(沒有ID)AtPosition(i)
                String name=clickmap.get("name").toString();
                int img=(int)clickmap.get("img");
                tv.setText(name);
                Intent intent=new Intent(ListActivity.this,DetailActivity.class);
                intent.putExtra("name",name);
                intent.putExtra("img",img);
                startActivity(intent);
        });
    }

    private List<Map<String,Object>> getData() {
        List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("img",R.mipmap.aokaochi);
        map.put("name","新奧爾良烤翅");
        list.add(map);

        map=new HashMap<String,Object>();
        map.put("img",R.mipmap.bafenbao);
        map.put("name","脆雞八分堡");
        list.add(map);

        map=new HashMap<String,Object>();
        map.put("img",R.mipmap.bafentao);
        map.put("name","脆雞八分堡套餐");
        list.add(map);

        map=new HashMap<String,Object>();
        map.put("img",R.mipmap.tong);
        map.put("name","超值全家桶");
        list.add(map);

        map=new HashMap<String,Object>();
        map.put("img",R.mipmap.xiangbao);
        map.put("name","香辣雞腿堡");
        list.add(map);

        map=new HashMap<String,Object>();
        map.put("img",R.mipmap.xiangchi);
        map.put("name","香辣雞翅");
        list.add(map);

        map=new HashMap<String,Object>();
        map.put("img",R.mipmap.xiangtao);
        map.put("name","香辣雞腿堡套餐");
        list.add(map);

        map=new HashMap<String,Object>();
        map.put("img",R.mipmap.yunzhi);
        map.put("name","" +"吮指原味雞");
        list.add(map);
        return list;
    }
}

4,實現詳情界面功能

4.1,在layout目錄下創建activity_detail.xml

實現詳情界面使用了TextView,ImageView,Button三個控件，分別顯示產品名，產品圖片和返回按鈕

代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_d_dis"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textColor="#ff0000"
        android:gravity="center"
        android:text="TextView" />

    <ImageView
        android:id="@+id/iv_d_chanpin"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:srcCompat="@mipmap/tong" />

    <Button
        android:id="@+id/btn_d_back"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="返回" />

</LinearLayout>

4.2,實現點擊詳情頁返回按鈕返回產品列表界面

在Java目錄下創建DetailActivity.java

代碼如下：

package com.example.listviewdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class DetailActivity extends AppCompatActivity {
ImageView iv;
TextView tv_dis;
Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);
        tv_dis=findViewById(R.id.tv_d_dis);
        iv=findViewById(R.id.iv_d_chanpin);
        btn=findViewById(R.id.btn_d_back);
        Intent intent=getIntent();
        tv_dis.setText(intent.getStringExtra("name"));
        iv.setImageResource(intent.getIntExtra("img",R.mipmap.aokaochi));
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
    }
}

 

注:產品信息為圖片形式，故需要提前將相關圖片放入mipmap目錄

圖片名需分別與對應項目代碼里的名稱相同，可自行修改