Android Studio实现功能强大的购物商城APP
这里写目录标题[*]一、项目概述
[*]二、开发环境
[*]三、项目结构
[*]四、配置服务器
[*]五、项目演示
[*]五、项目总结
[*]六、源码获取
一、项目概述
本次项目是现在软件商店很流行的购物商城APP，现在万物互联的时代，网上shopping早已经是大家的习惯了。足不出户地选择自己想要的商品进行购买多么地方便，这就促使了这款购物商城APP的出现。它具有底部导航栏，有首页、分类、发现、购物车和个人中心五个底部导航栏，每个选项卡功能都很丰富，资源文件除了drawable文件夹中的图片外，其他都是放在Tomcat服务器中的，直接启动Tomcat调用就行。总体来说是非常好的综合项目。
二、开发环境
https://img-blog.csdnimg.cn/f64ea01f196a4bf59489139eff2add8e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
三、项目结构
1、将项目的压缩包解压，里面是两个压缩包，第一个是资源文件，第二个是源码。
https://img-blog.csdnimg.cn/f1611849059841ca8e66679b91ab7695.png
2、分别解压后，先来看下atguigu这个文件夹，其实img是加载商品详情页会用的商品图片文件，json是加载商品详情页用到的商品描述信息。
https://img-blog.csdnimg.cn/83d22c5ea9c44c3c8a469ff557411051.png
3、再来看下ShoppingMall文件夹，这就是我们的商城源码。我们在D盘或者E盘新建一个Project文件夹，然后把它复制进来。我们再用Android Studio打开这个ShoppingMall文件夹，此时打开图标变成Android小机器人的头像，说明这就是一个Android项目。
https://img-blog.csdnimg.cn/6fca7cd4d95040369fd718dc1e8f12b5.png
4、我们进行gradle配置和同步后，就构建好了项目，现在我们先不着急运行，来看下项目结构。
https://img-blog.csdnimg.cn/6672df4720aa4d73923c7decc379d0cd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_19,color_FFFFFF,t_70,g_se,x_16
任何一个新建的项目都会默认使用Android 模式的项目结构，但这并不是项目真实的目录结构，而是被Android Studio转换过的。但是这种项目结构简洁明了，适合进行快速开发。这里借用书中的介绍，可以给小白们很好的指引，如果很熟悉结构的可以跳过这几张图。
https://img-blog.csdnimg.cn/95ef3918ebe94b0fb7a402f32f37a871.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
https://img-blog.csdnimg.cn/c9825de607484877b33f8a14f2e32f87.png
https://img-blog.csdnimg.cn/ef8d1502c0fb4e249f4cb1869ba1cea7.png
这里面app就是我们的项目主目录，其他的加粗字体的文件夹都是导入的框架，是直接拿来用的，那么下面，我们就对app目录进行详细说明，app目录如下图所示：
https://img-blog.csdnimg.cn/6796077c915944de8d89327660bb6596.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
其他文件夹，还是补充介绍下，学习就是重复的过程嘛，上面这样分类就是非常好的习惯，有助于项目共同开发，目录结构一目了然。
https://img-blog.csdnimg.cn/2225adece79f4916b6a07a9ea00d7ef0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
四、配置服务器
1、修改IP地址
如果你是用Android Studio自带的模拟器就不需要改动ip地址；如果是用的第三方模拟器，比如夜神，就需要改成自己电脑的ip地址，就是IPV4地址；如果你想运行到真机上就让手机连上电脑共享的WiFi，注意要关闭电脑的防火墙。
修改的地方就是utils文件夹下的Constants文件，如下图所示：
https://img-blog.csdnimg.cn/5e7935558f2d44239c6a9d743cab093f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
2、放置资源文件
我们先花五分钟安装和配置好Tomcat服务器，对于没有使用过Tomcat的同学，可以看这里：
如何安装和配置Tomcat（全网最详）
我们的资源文件atguigu文件夹（img图片和json数据），要放在webapps目录下的ROOT目录中，这样只要启动Tomcat服务器，应用就能访问到这些数据了。就像下图红框所示这样：
https://img-blog.csdnimg.cn/26037f3f571f40ca87df61803368c551.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
3、修改图片内容
如果你想换掉商城里面的商品图片，可以将这三个文件夹里面想换的图片替换掉，你换的图片一定要文件名和后缀名与原先的图片一样。hdpi、xhpdi、xxhdpi就是Android常见分辨率，适用于各种尺寸的模拟器。每个文件夹的图片都是相互独立使用的。
https://img-blog.csdnimg.cn/efafd71a6df341ada2543ce338e892b5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_16,color_FFFFFF,t_70,g_se,x_16
举个栗子：
我想换掉这张图片
https://img-blog.csdnimg.cn/003d0cbda0e64f0e97141a07d56c8804.png
那么我打开这张图片看一下，发现它是PNG图像，分辨率是80X80
https://img-blog.csdnimg.cn/4eea597206204635839a51386e933432.png
然后从自己电脑里面选一张喜欢的图片，调整大小和它相同，重命名一下，然后复制到这个文件夹替换它就行了。
五、项目演示
1、启动AVD运行项目，可以看到此时只有界面，并没有任何图片图片显示，因为我们还没有开启服务器。
https://img-blog.csdnimg.cn/6f1a7124698340679a9af0ae89d302c5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
2、再启动Tomcat，退出应用再打开，可以看到资源文件都被加载进来了，很像某宝的首页，这里可以看到最上面的搜索框，下面是滚动播放的广告栏，中间是商品的分类区，下面又是一个可以滚动的图片栏，继续向下，是秒杀栏，可以左右滑动。
https://img-blog.csdnimg.cn/63de7c08691f415c9ba3b80362fe07cb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
3、我们向下滑动，这里是新品推荐，有图片和商品名称，还有价格，继续滑动向下都是首页展示的热卖商品。
https://img-blog.csdnimg.cn/893a328e38eb405fadb27eae823e0dd7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
4、点击右上角的消息，可以进入消息中心，查看以下信息。
https://img-blog.csdnimg.cn/b5c7f8e8d4a243ebb334aec2bb32548c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
5、选择【服饰】，我们可以看到服饰有关的商品，这里可以按综合排序或者价格递增递减排列，也可以进行筛选，因为功能很多，这里不一一展示。
https://img-blog.csdnimg.cn/a42635c10de349969dab5badac402eef.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
6、点击任意一个商品，可以看到它的详情，可以联系客服，还可以收藏加购，加购后我们会在购物车看到加入的商品。
https://img-blog.csdnimg.cn/6ecc35eba6354f31a7c895ba07c00280.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
7、我们在首页随便选择一个商品，进入都是不同的商品详情，我们将这件物品收藏加购。
https://img-blog.csdnimg.cn/92bb612b952044e3bd57a392d8a10e3a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
8、我们在【分类】中可以看到这里左侧有各种选项，然后右侧就是展示的商品，这里我们选择小裙子，可以看到右边先是【热卖推荐】，然后是【常用分类】，非常符合现在的购物软件。
https://img-blog.csdnimg.cn/2f17939d26f3489caa915847f793f5e7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
9、右滑选择一件商品，然后加购。
https://img-blog.csdnimg.cn/98d476ccb1794e1982640f2996f43952.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
10、在【标签】里面，可以看到有很多分类标签。
https://img-blog.csdnimg.cn/ec6ab84c9bbe40cd8150dc1a87b88443.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
11、点击【社区】，可以看到这里是给用户讨论的地方，每个用户发的帖子就在这里呈现，有赞有评论
https://img-blog.csdnimg.cn/69445b2a16ed42eba93f8b8dabb9f12e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
12、热帖也是如此，就相当于热榜，根据流量和热度来计算的帖子
https://img-blog.csdnimg.cn/a2feb2f04a824817bddf667886f2a9b6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
13、点击【购物车】，我们可以看到这里是刚刚加购的商品，我们可以选择数量，并且可以多选。
https://img-blog.csdnimg.cn/40db29cb9e6746d39951931c40155bfe.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
14、点击删除画板这件商品，可以看到画板被删除了。
https://img-blog.csdnimg.cn/e2b4b33d7c194d4ba987ad5cc4413906.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
15、点击【个人中心】，可以看到很多个人信息，包括地址、收藏和优惠券等等。
https://img-blog.csdnimg.cn/adeebf9f24694d0797f1aa195627f08d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
16、点击头像，进入到登录注册界面，当然这里登录注册功能只是展示。
https://img-blog.csdnimg.cn/6967cd517db74114b3be0aa648ae63bf.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oyv5Y2OT1BQTw==,size_20,color_FFFFFF,t_70,g_se,x_16
五、项目总结
本次项目主要是应用了适配器和帧布局的知识，加上跳转以及导入UI框架实现，整体难度中等偏难。可以说是对购物商城几乎所有的功能进行了复现，功能十分强大完整。大家也可以模仿着，自己去做一个属于自己的APP。光学习理论只学到了20%，实践才能学到60%，剩下20%需要自己总结和思考才行。
六、源码获取
点此下载源码：
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]