首页 分享 基于Android Studio如何实现 购物商城 案例(简单易上手)

基于Android Studio如何实现 购物商城 案例(简单易上手)

来源:花匠小妙招 时间:2024-12-02 13:59

点击传送 :网络资源模板--基于 Android Studio 实现的水果商城App

目录

项目视频介绍

一、项目概述

1、构成以及功能设计

二、开发环境

三、准备工具

四、详细设计

1、新建工程

2、搭建启动页面

3、搭建注册、登陆界面

4、搭建主页界面

5、搭建购物车界面 

6、搭建我的页面

五、项目运行

1.图片演示

六、项目总结

Get 项目模板源码

  这是一个使用Android Studio和Java开发的购物商城应用。该应用旨在提供用户一个方便、快捷的购物体验。通过该应用,用户可以浏览不同类别的商品,并将其添加到购物车中。用户可以查看商品的详细信息,包括价格等。购物商城应用还提供了用户注册和登录功能,以便用户可以保存个人信息。该应用还支持商品搜索功能,帮助用户快速找到所需商品。购物商城应用的界面简洁、直观,操作易于上手,为用户提供了一个愉快的购物体验。

项目视频介绍

Android studio期末设计大作业~购物商城App

一、项目概述

1、构成以及功能设计

①启动页

②.用户登录/注册功能

③主页面功能

    - 顶部轮播图功能

    - 搜索功能

    - 商品目录

    - 商品列表

    -点击商品列表进入详情页

④ 购物车功能

    - 商品数量的增加减少

    - 商品支付购买

⑤ 我的页面

    - 修改用户密码

⑥详情页面

   - 显示商品详情信息

二、开发环境

        我的开发环境如下,大家的AS版本不需要和我相同,只要是近两年从官网下载的版本,都是比4.0.0高的,是可以满足运行和开发要求的。

三、准备工具

准备商品详情内容

四、详细设计

1、新建工程

首先打开Android Studio,并新建一个工程,File——>New——>New Project——>Empty Project,工程名称叫做NewShop,可以根据自己喜好设置名称。

包名自己随意设定,这里博主用的是com.example,一般是com.example;工程文件的保存路径要修改一下,不要放在C盘,我这里选择的是放在H盘,养成项目统一放在英文路径下的好习惯。

最后选择API 24:Android 7.0,因为这样它就拥有了96.3%的跨平台性(兼容性非常好),因为它版本很低,基本上模拟器API版本都是高于20的,所以这个软件可以运行其他各种设备上。点击Finish完成创建。

2、搭建启动页面

  我们来看一下activity_start布局文件。

        启动页面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="match_parent"

android:background="#ead6b6"

tools:context=".Start.StartActivity">

<ImageView

android:id="@+id/imageView"

android:layout_width="300dp"

android:layout_height="300dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:srcCompat="@drawable/logo" />

</androidx.constraintlayout.widget.ConstraintLayout>

         然后回到我们的Activity文件。首先创建一个ImageView控件 然后进行页面背景颜色修改。

启动页面代码如下:

package com.android.newshop.Start;

import android.content.Intent;

import android.os.Bundle;

import android.os.CountDownTimer;

import android.os.Handler;

import android.widget.Button;

import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

import com.android.newshop.Login.LoginActivity;

import com.android.newshop.R;

public class StartActivity extends AppCompatActivity {

private ImageView imageView2;

private Button button;

private Runnable runnable = new Runnable() {

@Override

public void run() {

tomainActive();

}

};

private void tomainActive() {

startActivity(new Intent(this, LoginActivity.class));

finish();

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_start);

}

class TimeCount extends CountDownTimer {

public TimeCount(long millisInFuture, long countDownInterval) {

super(millisInFuture, countDownInterval);

}

@Override

public void onTick(long l) {

}

@Override

public void onFinish() {

}

}

}

3、搭建注册、登陆界面

        主要实现用户数据的存储,实现用户使用注册的账号进行登陆。

注册页面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="match_parent"

android:background="#ead6b6"

tools:context=".Register.RegisterActivity">

<ImageView

android:id="@+id/imageView3"

android:layout_width="200dp"

android:layout_height="150dp"

android:layout_marginTop="40dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:srcCompat="@drawable/logo" />

<View

android:id="@+id/view2"

android:layout_width="0dp"

android:layout_height="300dp"

android:background="@drawable/login_view"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/guideline4"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toStartOf="@+id/guideline"

app:layout_constraintTop_toTopOf="@+id/imageView3"

app:layout_constraintVertical_bias="0.501" />

<View

android:id="@+id/view3"

android:layout_width="250dp"

android:layout_height="45dp"

android:layout_marginTop="32dp"

android:background="@drawable/login_count"

app:layout_constraintEnd_toStartOf="@+id/guideline4"

app:layout_constraintStart_toStartOf="@+id/view2"

app:layout_constraintTop_toTopOf="@+id/view2" />

<View

android:id="@+id/view4"

android:layout_width="0dp"

android:layout_height="45dp"

android:layout_marginTop="32dp"

android:background="@drawable/login_count"

app:layout_constraintEnd_toEndOf="@+id/view3"

app:layout_constraintStart_toStartOf="@+id/view3"

app:layout_constraintTop_toBottomOf="@+id/view3" />

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintGuide_percent="0.1" />

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintGuide_percent="0.9" />

<ImageView

android:id="@+id/imageView"

android:layout_width="20dp"

android:layout_height="20dp"

android:layout_marginStart="8dp"

app:layout_constraintBottom_toBottomOf="@+id/view3"

app:layout_constraintStart_toStartOf="@+id/view3"

app:layout_constraintTop_toTopOf="@+id/view3"

app:srcCompat="@drawable/mima" />

<ImageView

android:id="@+id/imageView4"

android:layout_width="20dp"

android:layout_height="20dp"

app:layout_constraintBottom_toBottomOf="@+id/view4"

app:layout_constraintStart_toStartOf="@+id/imageView"

app:layout_constraintTop_toTopOf="@+id/view4"

app:srcCompat="@drawable/zhanghao" />

<Button

android:id="@+id/register_button"

android:layout_width="250dp"

android:layout_height="55dp"

android:layout_marginBottom="32dp"

android:background="@drawable/login"

android:text="立 即 注 册"

app:layout_constraintBottom_toBottomOf="@+id/view2"

app:layout_constraintEnd_toEndOf="@+id/view2"

app:layout_constraintHorizontal_bias="0.506"

app:layout_constraintStart_toStartOf="@+id/view2" />

<EditText

android:id="@+id/username_edittext"

android:layout_width="190dp"

android:layout_height="0dp"

android:layout_marginStart="5dp"

android:background="#eff4f2"

android:ems="10"

android:hint="请输入账号"

android:inputType="textPersonName"

app:layout_constraintBottom_toBottomOf="@+id/view3"

app:layout_constraintStart_toEndOf="@+id/imageView"

app:layout_constraintTop_toTopOf="@+id/view3" />

<EditText

android:id="@+id/password_edittext"

android:layout_width="190dp"

android:layout_height="0dp"

android:layout_marginStart="5dp"

android:background="#eff4f2"

android:ems="10"

android:hint="请输入密码"

android:inputType="textPassword"

app:layout_constraintBottom_toBottomOf="@+id/view4"

app:layout_constraintStart_toEndOf="@+id/imageView4"

app:layout_constraintTop_toTopOf="@+id/view4" />

<TextView

android:id="@+id/tv_login"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="8dp"

android:text="已有账号,立即登录"

app:layout_constraintBottom_toTopOf="@+id/register_button"

app:layout_constraintEnd_toEndOf="@+id/view4"

app:layout_constraintTop_toBottomOf="@+id/view4" />

</androidx.constraintlayout.widget.ConstraintLayout>

登陆页面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="match_parent"

android:background="#ead6b6"

tools:context=".Login.LoginActivity">

<ImageView

android:id="@+id/imageView3"

android:layout_width="200dp"

android:layout_height="150dp"

android:layout_marginTop="24dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:srcCompat="@drawable/logo" />

<View

android:id="@+id/view2"

android:layout_width="0dp"

android:layout_height="320dp"

android:layout_marginTop="24dp"

android:background="@drawable/login_view"

app:layout_constraintEnd_toStartOf="@+id/guideline2"

app:layout_constraintStart_toStartOf="@+id/guideline3"

app:layout_constraintTop_toBottomOf="@+id/imageView3" />

<Button

android:id="@+id/login_button"

android:layout_width="250dp"

android:layout_height="55dp"

android:layout_marginBottom="32dp"

android:background="@drawable/login"

android:text="立 即 登 录 "

android:textColor="#fff"

android:textSize="24sp"

app:layout_constraintBottom_toBottomOf="@+id/view2"

app:layout_constraintEnd_toStartOf="@+id/guideline2"

app:layout_constraintStart_toStartOf="@+id/view2" />

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintGuide_percent="0.9" />

<androidx.constraintlayout.widget.Guideline

android:id="@+id/guideline3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintGuide_percent="0.1" />

<View

android:id="@+id/view3"

android:layout_width="0dp"

android:layout_height="45dp"

android:layout_marginTop="40dp"

android:background="@drawable/login_count"

app:layout_constraintEnd_toEndOf="@+id/login_button"

app:layout_constraintStart_toStartOf="@+id/login_button"

app:layout_constraintTop_toTopOf="@+id/view2" />

<View

android:id="@+id/view4"

android:layout_width="0dp"

android:layout_height="45dp"

android:layout_marginTop="24dp"

android:background="@drawable/login_count"

app:layout_constraintEnd_toEndOf="@+id/login_button"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toStartOf="@+id/login_button"

app:layout_constraintTop_toBottomOf="@+id/view3" />

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="24dp"

android:text="忘 记 密 码"

app:layout_constraintStart_toStartOf="@+id/view4"

app:layout_constraintTop_toBottomOf="@+id/view4" />

<TextView

android:id="@+id/login_register"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="立 即 注 册"

app:layout_constraintBottom_toBottomOf="@+id/textView"

app:layout_constraintEnd_toEndOf="@+id/view4"

app:layout_constraintTop_toTopOf="@+id/textView" />

<ImageView

android:id="@+id/imageView"

android:layout_width="20dp"

android:layout_height="20dp"

app:layout_constraintBottom_toBottomOf="@+id/view4"

app:layout_constraintEnd_toEndOf="@+id/imageView4"

app:layout_constraintTop_toTopOf="@+id/view4"

app:srcCompat="@drawable/mima" />

<ImageView

android:id="@+id/imageView4"

android:layout_width="20dp"

android:layout_height="20dp"

android:layout_marginStart="16dp"

app:layout_constraintBottom_toBottomOf="@+id/view3"

app:layout_constraintStart_toStartOf="@+id/view3"

app:layout_constraintTop_toTopOf="@+id/view3"

app:srcCompat="@drawable/zhanghao" />

<View

android:id="@+id/view5"

android:layout_width="100dp"

android:layout_height="1dp"

android:layout_marginTop="40dp"

android:background="#fff"

app:layout_constraintStart_toStartOf="@+id/guideline3"

app:layout_constraintTop_toBottomOf="@+id/view2" />

<View

android:id="@+id/view6"

android:layout_width="100dp"

android:layout_height="1dp"

android:background="#fff"

app:layout_constraintEnd_toStartOf="@+id/guideline2"

app:layout_constraintTop_toTopOf="@+id/view5" />

<TextView

android:id="@+id/textView3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="其它方式登陆"

android:textColor="#fff"

app:layout_constraintBottom_toBottomOf="@+id/view5"

app:layout_constraintEnd_toStartOf="@+id/view6"

app:layout_constraintStart_toEndOf="@+id/view5"

app:layout_constraintTop_toTopOf="@+id/view5" />

<ImageView

android:id="@+id/imageView6"

android:layout_width="30dp"

android:layout_height="30dp"

app:layout_constraintBottom_toBottomOf="@+id/imageView5"

app:layout_constraintEnd_toStartOf="@+id/imageView7"

app:layout_constraintStart_toEndOf="@+id/imageView5"

app:layout_constraintTop_toTopOf="@+id/imageView5"

app:srcCompat="@drawable/qq" />

<ImageView

android:id="@+id/imageView5"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_marginStart="70dp"

android:layout_marginTop="24dp"

app:layout_constraintStart_toStartOf="@+id/guideline3"

app:layout_constraintTop_toBottomOf="@+id/view5"

app:srcCompat="@drawable/weixin" />

<ImageView

android:id="@+id/imageView7"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_marginEnd="70dp"

app:layout_constraintBottom_toBottomOf="@+id/imageView6"

app:layout_constraintEnd_toStartOf="@+id/guideline2"

app:layout_constraintTop_toTopOf="@+id/imageView6"

app:srcCompat="@drawable/weibo" />

<EditText

android:id="@+id/user"

android:layout_width="190dp"

android:layout_height="0dp"

android:layout_marginStart="5dp"

android:background="#eff4f2"

android:ems="10"

android:hint="请输入账号"

android:inputType="textPersonName"

app:layout_constraintBottom_toBottomOf="@+id/view3"

app:layout_constraintStart_toEndOf="@+id/imageView4"

app:layout_constraintTop_toTopOf="@+id/view3" />

<EditText

android:id="@+id/pass"

android:layout_width="190dp"

android:layout_height="0dp"

android:layout_marginStart="5dp"

android:background="#eff4f2"

android:ems="10"

android:hint="请输入密码"

android:inputType="textPassword"

app:layout_constraintBottom_toBottomOf="@+id/view4"

app:layout_constraintStart_toEndOf="@+id/imageView"

app:layout_constraintTop_toTopOf="@+id/view4"

app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

注册页面JAVA代码如下所示:

package com.android.newshop.Register;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.android.newshop.Data.DatabaseHelper;

import com.android.newshop.Login.LoginActivity;

import com.android.newshop.R;

import org.w3c.dom.Text;

public class RegisterActivity extends AppCompatActivity {

private EditText mUserNameEditText;

private EditText mPasswordEditText;

private TextView tvLogin;

private DatabaseHelper mDatabaseHelper;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_register);

mDatabaseHelper = new DatabaseHelper(this);

mUserNameEditText = findViewById(R.id.username_edittext);

mPasswordEditText = findViewById(R.id.password_edittext);

tvLogin = findViewById(R.id.tv_login);

tvLogin.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

finish();

}

});

Button registerButton = findViewById(R.id.register_button);

registerButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String username = mUserNameEditText.getText().toString().trim();

String password = mPasswordEditText.getText().toString().trim();

if (username.isEmpty() || password.isEmpty()) {

Toast.makeText(getApplicationContext(), "请输入账号或密码", Toast.LENGTH_SHORT).show();

return;

}

boolean result = mDatabaseHelper.insertData(username, password);

if (result) {

Toast.makeText(getApplicationContext(), "注册成功", Toast.LENGTH_SHORT).show();

Intent intent = new Intent(RegisterActivity.this, LoginActivity.class);

startActivity(intent);

finish();

} else {

Toast.makeText(getApplicationContext(), "注册失败", Toast.LENGTH_SHORT).show();

}

}

});

}

}

登陆页面xml代码如下所示:

package com.android.newshop.Login;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.android.newshop.Data.DatabaseHelper;

import com.android.newshop.MainActivity;

import com.android.newshop.R;

import com.android.newshop.Register.RegisterActivity;

public class LoginActivity extends AppCompatActivity {

private TextView loginRegister;

private EditText user;

private EditText pass;

private Button mLoginButton;

private DatabaseHelper mDatabaseHelper;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_login);

user = findViewById(R.id.user);

pass = findViewById(R.id.pass);

mLoginButton = findViewById(R.id.login_button);

loginRegister = findViewById(R.id.login_register);

mDatabaseHelper = new DatabaseHelper(this);

loginRegister.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Intent intent = new Intent(LoginActivity.this, RegisterActivity.class);

startActivity(intent);

}

});

mLoginButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String username = user.getText().toString().trim();

String password = pass.getText().toString().trim();

if (username.isEmpty() || password.isEmpty()) {

Toast.makeText(getApplicationContext(), "请输入账号或密码", Toast.LENGTH_SHORT).show();

return;

}

boolean result = mDatabaseHelper.checkUser(username, password);

if (result) {

Toast.makeText(getApplicationContext(), "登陆成功", Toast.LENGTH_SHORT).show();

Intent intent = new Intent(LoginActivity.this, MainActivity.class);

startActivity(intent);

finish();

} else {

Toast.makeText(getApplicationContext(), "账号或密码错误", Toast.LENGTH_SHORT).show();

}

}

});

}

}

4、搭建主页界面

主页面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="match_parent"

tools:context=".Fragment.HomeFragment">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginStart="24dp"

android:layout_marginTop="3dp"

android:layout_marginEnd="24dp"

android:layout_marginBottom="3dp"

android:orientation="vertical"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

<com.youth.banner.Banner

android:id="@+id/banner"

android:layout_width="match_parent"

android:layout_height="140dp" />

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="10dp">

<View

android:id="@+id/view"

android:layout_width="230dp"

android:layout_height="35dp"

android:background="@drawable/home_sousuo"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<Button

android:id="@+id/btn_search"

android:layout_width="79dp"

android:layout_height="38dp"

android:layout_marginLeft="5dp"

android:layout_marginRight="5dp"

android:background="@drawable/home_btn"

android:text="搜 索"

android:textColor="#fff"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@+id/view"

app:layout_constraintTop_toTopOf="parent"

tools:textSize="15sp" />

<ImageView

android:id="@+id/imageView8"

android:layout_width="30dp"

android:layout_height="35dp"

android:layout_marginStart="8dp"

android:src="@drawable/sousuo"

app:layout_constraintBottom_toBottomOf="@+id/view"

app:layout_constraintStart_toStartOf="@+id/view"

app:layout_constraintTop_toTopOf="@+id/view" />

<EditText

android:id="@+id/et_search"

android:layout_width="170dp"

android:layout_height="26dp"

android:layout_marginStart="3dp"

android:background="#fff"

android:ems="10"

android:inputType="textPersonName"

app:layout_constraintBottom_toBottomOf="@+id/view"

app:layout_constraintStart_toEndOf="@+id/imageView8"

app:layout_constraintTop_toTopOf="@+id/view" />

</androidx.constraintlayout.widget.ConstraintLayout>

<com.google.android.material.tabs.TabLayout

android:id="@+id/tabLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

app:layout_constraintStart_toStartOf="@+id/guideline5">

<com.google.android.material.tabs.TabItem

android:id="@+id/tab_layout"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Monday" />

<com.google.android.material.tabs.TabItem

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tuesday" />

<com.google.android.material.tabs.TabItem

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Wednesday" />

</com.google.android.material.tabs.TabLayout>

<ListView

android:id="@+id/lv_list"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="10dp"

android:scrollbars="none" />

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

在onCreateView方法中,通过调用initView方法初始化视图控件,包括Banner、搜索按钮、搜索框、TabLayout和ListView等。在sousuo方法中,设置了搜索按钮的点击事件,根据用户输入的关键词搜索相关商品并展示。在initListView方法中,初始化ListView,并加载商品数据。通过读取json数据文件,将商品数据解析为Shop对象列表,并将所有商品数据存储在dataAll列表中。然后将dataAll列表中的商品添加到shopList列表中,并使用ShopAdapter作为ListView的适配器。同时,根据商品数据中的shoptype字段,动态创建TabLayout的Tab,并设置TabLayout的选择事件监听器,以根据选择的商品类别展示相应的商品列表。在ListView的点击事件监听器中,根据点击的商品位置,将对应的Shop对象传递给DetailsActivity,并启动该活动。通过调用initView方法,将视图控件与布局文件中的对应控件进行绑定。

        接下来是对应java文件代码:

package com.android.newshop.Fragment;

import android.content.Context;

import android.content.Intent;

import android.graphics.Outline;

import android.os.Bundle;

import android.text.TextUtils;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewOutlineProvider;

import android.widget.AdapterView;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ImageView;

import android.widget.ListView;

import android.widget.TextView;

import android.widget.Toast;

import androidx.constraintlayout.widget.Guideline;

import androidx.fragment.app.Fragment;

import com.android.newshop.Adapter.ShopAdapter;

import com.android.newshop.Bean.Shop;

import com.android.newshop.Details.DetailsActivity;

import com.android.newshop.MainActivity;

import com.android.newshop.R;

import com.google.android.material.tabs.TabLayout;

import com.google.gson.Gson;

import com.google.gson.reflect.TypeToken;

import com.youth.banner.Banner;

import com.youth.banner.loader.ImageLoader;

import java.io.IOException;

import java.io.InputStream;

import java.nio.charset.StandardCharsets;

import java.util.ArrayList;

import java.util.HashSet;

import java.util.List;

import java.util.Set;

public class HomeFragment extends Fragment {

private EditText etSearch;

private Button btnSearch;

private ListView listView;

private ShopAdapter shopAdapter;

private List<Shop> shopList = new ArrayList<>();

private List<Shop> dataAll = new ArrayList<>();

private String selectedType;

private Banner banner;

private TabLayout tabLayout;

public HomeFragment() {

}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

if (getArguments() != null) {

}

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_home, container, false);

initView(view);

banner();

initListView();

sousuo();

return view;

}

private void sousuo() {

btnSearch.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String searchText = etSearch.getText().toString().trim();

if (TextUtils.isEmpty(searchText)) {

shopList.clear();

shopList.addAll(dataAll);

shopAdapter.notifyDataSetChanged();

Toast.makeText(getActivity(), "请输入搜索内容!", Toast.LENGTH_SHORT).show();

} else {

shopList.clear();

for (Shop shop : dataAll) {

if (shop.getTitle().contains(searchText)) {

shopList.add(shop);

}

}

shopAdapter.notifyDataSetChanged();

}

}

});

}

private void initListView() {

if (!"".equals(loadJSONFromAsset())) {

dataAll = new Gson().fromJson(loadJSONFromAsset(), new TypeToken<List<Shop>>() {

}.getType());

shopList.addAll(dataAll);

}

shopAdapter = new ShopAdapter(getContext(), shopList);

listView.setAdapter(shopAdapter);

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

Intent intent = new Intent(getActivity(), DetailsActivity.class);

intent.putExtra("data", shopList.get(position));

startActivity(intent);

}

});

Set<String> tt = new HashSet<>();

for (Shop newsBean : dataAll) {

tt.add(newsBean.getShoptype());

}

tabLayout.removeAllTabs();

for (String s : tt) {

TabLayout.Tab tab = tabLayout.newTab();

tab.setText(s);

tabLayout.addTab(tab);

}

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

@Override

public void onTabSelected(TabLayout.Tab tab) {

selectedType = tab.getText().toString();

shopList.clear();

List<Shop> filteredList = new ArrayList<>();

for (int i = 0; i < dataAll.size(); i++) {

Shop newsBean = dataAll.get(i);

if (newsBean.getShoptype().equals(selectedType)) {

shopList.add(newsBean);

}

}

shopAdapter.notifyDataSetChanged();

}

@Override

public void onTabUnselected(TabLayout.Tab tab) {

}

@Override

public void onTabReselected(TabLayout.Tab tab) {

}

});

}

private void initView(View view) {

banner = (Banner) view.findViewById(R.id.banner);

btnSearch = (Button) view.findViewById(R.id.btn_search);

etSearch = (EditText) view.findViewById(R.id.et_search);

tabLayout = (TabLayout) view.findViewById(R.id.tabLayout);

listView = (ListView) view.findViewById(R.id.lv_list);

tabLayout = view.findViewById(R.id.tabLayout);

}

}

5、搭建购物车界面 

购物车页面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="match_parent"

tools:context=".Fragment.CartFragment">

<ListView

android:id="@+id/lv_cart"

android:layout_width="0dp"

android:layout_height="0dp"

app:layout_constraintBottom_toTopOf="@+id/view10"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="1.0"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/view13" />

<View

android:id="@+id/view10"

android:layout_width="0dp"

android:layout_height="50dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent" />

<TextView

android:id="@+id/tv_total"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:text="合计:¥00.00"

android:textColor="#000"

android:textSize="16sp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/btn_pay"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/lv_cart" />

<Button

android:id="@+id/btn_pay"

android:layout_width="100dp"

android:layout_height="0dp"

android:layout_marginTop="5dp"

android:layout_marginEnd="8dp"

android:layout_marginBottom="5dp"

android:background="@drawable/cart_item"

android:text="去结算"

android:textColor="#fff"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toBottomOf="@+id/lv_cart" />

<View

android:id="@+id/view13"

android:layout_width="wrap_content"

android:layout_height="100dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<TextView

android:id="@+id/textView10"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:layout_marginTop="8dp"

android:text="购物车"

android:textColor="#000"

android:textSize="28sp"

android:textStyle="bold"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<LinearLayout

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_margin="10dp"

android:gravity="center"

android:orientation="vertical"

app:layout_constraintBottom_toTopOf="@+id/lv_cart"

app:layout_constraintEnd_toEndOf="@+id/view13"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/textView10">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<TextView

android:id="@+id/textView15"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="收货地址:"

android:textColor="#000"

android:textSize="20sp" />

<TextView

android:id="@+id/textView16"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="xxx省xxx市xxx区(县)xxx村" />

</LinearLayout>

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

        实现了加载购物车数据、显示购物车列表、支付功能的实现。

        在onCreateView方法中,它通过调用loadDataToListView方法来加载数据并将其设置到ListView上。然后,它设置了支付按钮的点击事件,当用户点击支付按钮时,会显示一个支付成功的Toast消息。

        在loadDataToListView方法中,它首先对购物车数据进行逆序排序,以便按照添加时间的逆序显示购物车列表。然后,它创建一个CartItemAdapter适配器,并将其设置到ListView上。

        对应的java编程代码:

package com.android.newshop.Fragment;

import android.content.Context;

import android.content.SharedPreferences;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.ListView;

import android.widget.TextView;

import android.widget.Toast;

import com.android.newshop.Adapter.CartItemAdapter;

import com.android.newshop.Bean.CartItem;

import com.android.newshop.R;

import java.util.ArrayList;

import java.util.Collections;

import java.util.Comparator;

import java.util.List;

import java.util.Map;

public class CartFragment extends Fragment {

private ListView listView;

private CartItemAdapter cartAdapter;

private Button pay;

private TextView zj;

public CartFragment() {

}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_cart, container, false);

listView = view.findViewById(R.id.lv_cart);

pay = view.findViewById(R.id.btn_pay);

zj = view.findViewById(R.id.tv_total);

loadDataToListView(listView);

pay.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getActivity(), "支付成功,购物车已清空!", Toast.LENGTH_SHORT).show();

}

});

return view;

}

Collections.sort(cartList, new Comparator<CartItem>() {

@Override

public int compare(CartItem item1, CartItem item2) {

return Long.compare(item2.getAddTime(), item1.getAddTime());

}

});

Collections.reverse(cartList);

CartItemAdapter adapter = new CartItemAdapter(getActivity(), cartList);

Log.d("Adapter", "Adapter set to ListView");

}

}

6、搭建我的页面

对应的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="match_parent"

tools:context=".Fragment.MineFragment">

<ImageView

android:id="@+id/imageView9"

android:layout_width="0dp"

android:layout_height="260dp"

android:scaleType="centerCrop"

android:src="@drawable/bclx"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<LinearLayout

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_marginStart="16dp"

android:layout_marginEnd="16dp"

android:orientation="vertical"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/imageView9">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<TextView

android:id="@+id/textView8"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="地址:"

android:textColor="#000"

android:textSize="18sp" />

<TextView

android:id="@+id/textView9"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:gravity="center|left"

android:text="xxx省xxx市xxx区(县)xxx村"

android:textSize="17sp" />

</LinearLayout>

<View

android:id="@+id/view11"

android:layout_width="match_parent"

android:layout_height="2dp"

android:layout_marginTop="5dp"

android:background="#ccc" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:orientation="horizontal">

<TextView

android:id="@+id/tv_modify"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="修改密码"

android:textColor="#000"

android:textSize="18sp" />

<ImageView

android:id="@+id/imageView10"

android:layout_width="15dp"

android:layout_height="match_parent"

android:src="@drawable/right" />

</LinearLayout>

<View

android:id="@+id/view15"

android:layout_width="match_parent"

android:layout_height="2dp"

android:layout_marginTop="5dp"

android:background="#ccc" />

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

实现java代码如下所示:

package com.android.newshop.Fragment;

import android.content.DialogInterface;

import android.content.Intent;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.EditText;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

import androidx.appcompat.app.AlertDialog;

import androidx.fragment.app.Fragment;

import com.android.newshop.Data.DatabaseHelper;

import com.android.newshop.Login.LoginActivity;

import com.android.newshop.R;

public class MineFragment extends Fragment {

private ImageView imageView9;

private TextView textView8;

private TextView textView9;

private View view11;

private TextView tvModify;

private View view15;

public static MineFragment newInstance(String param1, String param2) {

MineFragment fragment = new MineFragment();

return fragment;

}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_mine, container, false);

tvModify = view.findViewById(R.id.tv_modify);

modify();

return view;

}

private void modify() {

tvModify.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

showDialog();

}

});

}

private void showDialog() {

AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

View dialogView = getLayoutInflater().inflate(R.layout.dialog_modify_password, null);

final EditText etUsername = dialogView.findViewById(R.id.et_username);

final EditText etNewPassword = dialogView.findViewById(R.id.et_new_password);

builder.setView(dialogView)

.setPositiveButton("确认", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

String username = etUsername.getText().toString();

String newPassword = etNewPassword.getText().toString();

boolean isPasswordUpdated = updatePassword(username, newPassword);

if (isPasswordUpdated) {

Toast.makeText(getActivity(), "密码修改成功!", Toast.LENGTH_SHORT).show();

Intent intent = new Intent(getActivity(), LoginActivity.class);

startActivity(intent);

getActivity().finish();

} else {

Toast.makeText(getActivity(), "密码修改失败!", Toast.LENGTH_SHORT).show();

}

}

})

.setNegativeButton("取消", null)

.create()

.show();

}

private boolean updatePassword(String username, String newPassword) {

DatabaseHelper dbHelper = new DatabaseHelper(getActivity());

return dbHelper.updatePassword(username, newPassword);

}

}

        至此,完整的购物商城项目创建完成。

五、项目运行

1.图片演示

(1)运行app到模拟器上,显示启动面:


(2)登陆页面:

(3)点击注册跳转到注册页面:

(4)注册账号后进行登陆然乎进入首页:

(5)点击商品进入详情页:

(5)进入购车页面

(6)进入我的页面

        运行效果和功能很完整,至此就完成了非常简单的购物车App。大家可以跟着动手做一下,放上自己喜欢的商品,还有头像!

六、项目总结

启动页:应用启动时显示的欢迎页面。

用户登录/注册功能:用户可以通过输入用户名和密码进行登录或注册新账户。

主页面功能:

顶部轮播图功能:展示热门商品或促销活动的轮播图。搜索功能:允许用户根据关键字搜索商品。商品目录:按照类别或标签分类展示商品。商品列表:展示符合搜索条件或所选类别的商品列表。点击商品列表进入详情页:用户可以点击商品列表中的商品,查看其详细信息。

购物车功能:

商品数量的增加减少:允许用户在购物车中增加或减少商品的数量。商品支付购买:用户可以选择购买购物车中的商品,进行支付。

我的页面:

修改用户密码:允许用户修改已登录账户的密码。

详情页面:

显示商品详情信息:展示选定商品的详细信息,如价格、描述、评价等。

Get 项目模板源码

快捷获取方式

相关知识

基于Android的鲜花购物商城设计与实
基于ASP.NET的网上花店购物商城网站的设计与实现(附源码 调试 文档)
基于SpringBoot+Vue网上购物商城的设计和实现(源码+文档+部署讲解)
基于vue.js花店鲜花购物商城系统设计与实现(uni
基于Springboot网上在线购物商城【附源码+文档】
分享课程——uniapp+vue3+云开发全栈开发同城配送鲜花小程序任意商城项目
基于Springboot网上购物商城系统设计与实现 开题报告参考
基于Android的鲜花预定软件的设计与实现
【开题报告】基于uniapp的鲜花预定APP的设计与实现
基于SSM的鲜花商城系统

网址: 基于Android Studio如何实现 购物商城 案例(简单易上手) https://www.huajiangbk.com/newsview820945.html

所属分类:花卉
上一篇: 积分当钱花!新天龙积分商城上线啦
下一篇: 020、网上商城项目开发流程

推荐分享