Android实现购物车App(ListView和GridView的使用)

1.ListView的使用

运行效果

点击商品跳转到商品详细信息

在Layout布局文件下创建item.xml文件,这里的item.xml文件就是上图中每一个item

创建item.xml

item.xml布局文件代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="150dp">

    <ImageView
        android:id="@+id/item_displayimage"
        android:layout_width="100dip"
        android:layout_height="150dip"
        android:layout_centerVertical="true"
        android:layout_marginEnd="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/item_title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/iphone8" />

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:text="Apple iPhone 8"
        android:textColor="#000000"
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@+id/item_displayimage"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/item_size"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:text="4.7英寸"
        android:textColor="#000000"
        android:textSize="15sp"
        app:layout_constraintStart_toEndOf="@+id/item_displayimage"
        app:layout_constraintTop_toBottomOf="@+id/item_title" />

    <TextView
        android:id="@+id/item_money"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:text="@string/money"
        android:textColor="#F44336"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/item_displayimage"
        app:layout_constraintTop_toBottomOf="@+id/item_size" />

    <TextView
        android:id="@+id/item_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="3dp"
        android:text="自营    214563条评价    98%好评"
        android:textColor="#000000"
        android:textSize="15sp"
        app:layout_constraintStart_toEndOf="@+id/item_displayimage"
        app:layout_constraintTop_toBottomOf="@+id/item_money" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="86dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="0dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

在activity_main.xml中使用ListView控件

详细代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/list_main"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="1dp"
        android:layout_marginEnd="1dp"
        android:layout_marginBottom="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_gridview" />

    <Button
        android:id="@+id/btn_gridview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:onClick="btnonclick"
        android:text="GridView视图显示"
        app:layout_constraintBottom_toTopOf="@+id/list_main"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

在MainActivity中给List绑定数据适配器及设置点击事件:

详细代码:

package com.example.project8;

import static android.widget.Toast.LENGTH_SHORT;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import data.ViewData;

public class MainActivity extends AppCompatActivity {
    
    
    private ListView listview_main;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         initView();
    }


    // 初始化
    private void initView() {
    
    
        listview_main = findViewById(R.id.list_main);
        // 数据适配器
        SimpleAdapter mSimpleAdapter = new SimpleAdapter(this,ViewData.data, R.layout.item,
                new String[] {
    
    "item_displayimage","item_title", "item_size","item_money","item_info"},
                new int[] {
    
    R.id.item_displayimage,R.id.item_title,R.id.item_size,R.id.item_money,R.id.item_info});
        listview_main.setAdapter(mSimpleAdapter);
        // item上的点击事件
        listview_main.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    
    

            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
    
    
                TextView item_title = view.findViewById(R.id.item_title);
                Bundle bundle = ViewData.getBundle(item_title.getText().toString());
                if (bundle !=null){
    
    
                    // 将当前Map商品信息传递到另一个界面
                    Intent intent = new Intent(MainActivity.this, PhoneInfoActivity.class);
                    //意图放置bundle变量
                    intent.putExtras(bundle);
                    startActivity(intent);
                }else {
    
    
                    Toast.makeText(MainActivity.this,"错误啦,快联系工作人员吧!",LENGTH_SHORT).show();
                }
            }
        });
    }




    public void btnonclick(View view) {
    
    
        Intent intent =new Intent(this,GridviewActivity.class);
        startActivity(intent);
    }
}

适配器部分代码讲解:

• 第一个参数 Context ,这里的this指的就是MainActivity.class
• 第二个参数 List<? extends Map<String, ?>>data 就是数据源
• 第三个参数 int resource 就是item布局文件
• 第四个参数 String[] from 就是item中需要进行数据绑定的控件id字符串值
• 第五个参数 int[] to 就是item中对应控件id的R文件中的id值

上面的数据源就是通过ViewData.data获取数据

上文中说到的控件id字符串值如下

listView通过setOnItemClickListener设置监听事件

在方法中可以通过view获取单个item中的内容,如item中商品的title

  TextView item_title = view.findViewById(R.id.item_title);

获取到商品的标签后,就可以通过标签获取商品详细信息,并将信息放到Bundle中,通过意图传递到其他页面进行展示:

  Bundle bundle = ViewData.getBundle(item_title.getText().toString());

上文中通过商品标签获取商品信息,并返回Bundle对象是通过调用ViewData.getBundle()方法具体实现如下:

2.GridView的使用

运行效果:
点击GRIDVIEW视图显示按钮

这里就通过GridView进行展示

点击任一商品展示详细信息

实现过程:
在MainActivity中,通过按钮的点击事件实现意图跳转到GridviewActivity中去


GridviewActivity对应一个activity_gridview.xml布局该布局通过GridView展示商品数据如下

GridviewActivity中适配器的操作和前面的ListView基本一致

但是GridviewActivity使用的适配器是自定义适配器 new MyGridViewAdater(GridviewActivity.this)

自定义适配器代码如下( 自定义适配器需要继承BaseAdapter类,并重写里面的方法 ):

package com.example.project8;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.HashMap;
import java.util.List;

import data.ViewData;


public class MyGridViewAdater extends BaseAdapter {
    
    
    private Context mContext;
    private LayoutInflater mlayoutInflater;

    public MyGridViewAdater(Context mContext) {
    
    
        this.mContext = mContext;
        mlayoutInflater = LayoutInflater.from(mContext);
    }

    @Override
    public int getCount() {
    
    
        return 8;
    }

    @Override
    public Object getItem(int i) {
    
    
        return null;
    }

    @Override
    public long getItemId(int i) {
    
    
        return 0;
    }


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
    
    
        ViewHolder holder = null;
        if(convertView == null){
    
    
            //填写ListView的图标和标题等控件的来源，来自于layout_list_item这个布局文件
            //把控件所在的布局文件加载到当前类中
            convertView = mlayoutInflater.inflate(R.layout.item,null);
            //生成一个ViewHolder的对象
            holder = new ViewHolder();
            //获取控件对象
            holder.imageView_Display=convertView.findViewById(R.id.item_displayimage);
            holder.item_title=convertView.findViewById(R.id.item_title);
            holder.item_size=convertView.findViewById(R.id.item_size);
            holder.item_money=convertView.findViewById(R.id.item_money);
            holder.item_info=convertView.findViewById(R.id.item_info);
            convertView.setTag(holder);

        }else{
    
    
            holder = (ViewHolder) convertView.getTag();
        }

        //  初始化数据
        List<HashMap<String,Object>> data = ViewData.addData();
            holder.imageView_Display.setImageResource((int) data.get(position).get("item_displayimage"));
            holder.item_title.setText(data.get(position).get("item_title").toString());
            holder.item_money.setText(data.get(position).get("item_money").toString());
            holder.item_info.setText(data.get(position).get("item_info").toString());
            holder.item_size.setText(data.get(position).get("item_size").toString());
        return convertView;
    }

    static class ViewHolder{
    
    
        private ImageView imageView_Display;
        private TextView item_title, item_size,item_money,item_info;
    }
}

3.源码下载

微信公众号搜索程序员孤夜(或扫描下方二维码),后台回复 安卓源码 获取项目总文件(projects),在总文件下的Project8就是本篇博文对应的源码!