目录
这是一个使用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);
// 加载并设置数据到ListView
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); // 将ArrayList进行逆序排列
// 创建适配器并设置到ListView上
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;
/**
* A simple {@link Fragment} subclass.
* Use the {@link MineFragment#newInstance} factory method to
* create an instance of this fragment.
*/
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;
}
// 设置tvModify的点击修改密码事件
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 类的 updatePassword 方法来执行密码修改操作
DatabaseHelper dbHelper = new DatabaseHelper(getActivity());
return dbHelper.updatePassword(username, newPassword);
}
}
至此,完整的购物商城项目创建完成。
五、项目运行
1.图片演示
(1)运行app到模拟器上,显示启动面:
(2)登陆页面:
(3)点击注册跳转到注册页面:
(4)注册账号后进行登陆然乎进入首页:
(5)点击商品进入详情页:
(5)进入购车页面
(6)进入我的页面
运行效果和功能很完整,至此就完成了非常简单的购物车App。大家可以跟着动手做一下,放上自己喜欢的商品,还有头像!
六、项目总结
-
启动页:应用启动时显示的欢迎页面。
-
用户登录/注册功能:用户可以通过输入用户名和密码进行登录或注册新账户。
-
主页面功能:
- 顶部轮播图功能:展示热门商品或促销活动的轮播图。
- 搜索功能:允许用户根据关键字搜索商品。
- 商品目录:按照类别或标签分类展示商品。
- 商品列表:展示符合搜索条件或所选类别的商品列表。
- 点击商品列表进入详情页:用户可以点击商品列表中的商品,查看其详细信息。
-
购物车功能:
- 商品数量的增加减少:允许用户在购物车中增加或减少商品的数量。
- 商品支付购买:用户可以选择购买购物车中的商品,进行支付。
-
我的页面:
- 修改用户密码:允许用户修改已登录账户的密码。
-
详情页面:
- 显示商品详情信息:展示选定商品的详细信息,如价格、描述、评价等。
Get 项目模板源码
👇👇👇快捷获取方式👇👇👇