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目录

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