Android开发小技巧之商品属性筛选与商品筛选-阿里云开发者社区

开发者社区> 技术小能手> 正文

Android开发小技巧之商品属性筛选与商品筛选

简介:
+关注继续查看

前言

这次为大家带来的是一个完整的商品属性筛选与商品筛选。什么意思?都见过淘宝、京东等爱啪啪吧,里面有个商品详情,可以选择商品的属性,然后筛选出这个商品的具体型号,这样应该知道了吧?不知道也没关系,下面会有展示图。

6ab364a25198305f89289beb1310332886003f6c

关于商品筛选是有两种方式(至少我只见到两种):


第一种: 将所有的商品的所有属性及详情返回给客户端,由客户端进行筛选。
淘宝用的就是这种。
第二种: 将所有的属性返回给客户端,客户选择完成属性后将属性发送给后台
,再由后台根据属性筛选出具体商品返回给客户端。
京东就是这样搞的。。

两种方式各有各的好处:

第一种:体验性特别好,用户感觉不到延迟,立即选中立即就筛选出了详情。就是客户端比较费劲。。。

第二种:客户端比较省时间,但是体验性太差了,你想想,在网络不是很通畅的时候,你选择一个商品还得等老半天。

因为当时我没有参加到这个接口的设计,导致一直在变化。。我才不会告诉不是后台不给力,筛选不出来才一股脑的将所有锅甩给客户端。

技术点

流式布局


商品的属性并不是一样长的,所以需要自动适应内容的一个控件。
推荐hongyang的博客。我就是照着那个搞的。

RxJava


不要问我,我不知道,我也是新手,我就是用它做出了效果,至于有没有
用对,那我就不知道了。反正目的是达到了。

Json解析???

准备

FlowLayout

RxJava

xml布局

这个部分的布局不是很难,只是代码量较多,咱们就省略吧,直接看效果吧

7a742cd867ab8ae14d21be66c5182e061b130c83

可以看到机身颜色、内存、版本下面都是空的,因为我们还没有将属性筛选出来。

数据分析

先看看整体的数据结构是怎么样的

cd2983e3e14c41fcff75cf51fd14c9bbffe80854

每一个商品都有一个父类,仅作标识,不参与计算,比如数据中的华为P9就是一个商品的类目,在这下面有着各种属性组成的商品子类,这才是真正的商品。

而一个详细的商品是有三个基础属性所组成:


1. 版本
2. 内存
3. 制式

如上图中一个具体的商品的名称:"华为 P9全网通 3GB+32GB版 流光金 移动联通电信4G手机 双卡双待"

7b8740668a3e8dacaf864bfd0e4a13877cecea81

所以,要获得一个具体的商品是非常的简单,只需要客户选中的三个属性与上图中所对应的属性完全相同,就能得到这个商品。其中最关键的还是将所有的商品属性筛选出来。

筛选出所有属性及图片

本文中使用的数据是直接从Assets目录中直接读取的。

筛选出该商品的所有属性,怎么做呢?其实也是很简单的,直接for所有商品的所有属性,然后存储起来,去除重复的属性,那么最后剩下的就是该商品的属性了


/**
* 初始化商品信息
* <li>1. 提取所有的属性</li>
* <li>2. 提取所有颜色的照片</li>
*/
private void initGoodsInfo() {
//所有的颜色
mColors = new ArrayList<>();
//筛选过程中临时存放颜色
mTempColors = new ArrayList<>();
//所有的内存
mMonerys = new ArrayList<>();
//筛选过程中临时的内存
mTempMonerys = new ArrayList<>();
//所有的版本
mVersions = new ArrayList<>();
//筛选过程中的临时版本
mTempVersions = new ArrayList<>();
//获取到所有的商品
shopLists = responseDto.getMsg().getChilds();
callBack.refreshSuccess("¥" + responseDto.getPricemin() + " - " + responseDto.getPricemax(), responseDto.getMsg().getParent().getName());
callBack.parentName(responseDto.getMsg().getParent().getName());
//遍历商品
Observable.from(shopLists)
//转换对象 获取所有商品的属性集合
.flatMap(childsEntity -> Observable.from(childsEntity.getAttrinfo().getAttrs()))
.subscribe(attrsEntity -> {
//判断颜色
if (mActivity.getString(R.string.shop_color).equals(attrsEntity.getAttrname()) && !mTempColors.contains(attrsEntity.getAttrvalue())) {
mColors.add(new TagInfo(attrsEntity.getAttrvalue()));
mTempColors.add(attrsEntity.getAttrvalue());
}
//判断制式
if (mActivity.getString(R.string.shop_standard).equals(attrsEntity.getAttrname()) && !mTempVersions.contains(attrsEntity.getAttrvalue())) {
mVersions.add(new TagInfo(attrsEntity.getAttrvalue()));
mTempVersions.add(attrsEntity.getAttrvalue());
}
//判断内存
if (mActivity.getString(R.string.shop_monery).equals(attrsEntity.getAttrname()) && !mTempMonerys.contains(attrsEntity.getAttrvalue())) {
mMonerys.add(new TagInfo(attrsEntity.getAttrvalue()));
mTempMonerys.add(attrsEntity.getAttrvalue());
}
});

// 提取出 每种颜色的照片
tempImageColor = new ArrayList<>();
mImages = new ArrayList<>();
//遍历所有的商品列表
Observable.from(shopLists)
.subscribe(childsEntity -> {
String color = childsEntity.getAttrinfo().getAttrs().get(0).getAttrvalue();
if (!tempImageColor.contains(color)) {
mImages.add(childsEntity.getShowimg());
tempImageColor.add(color);
}
});
// 提取出 每种颜色的照片

//通知图片
callBack.changeData(mImages, "¥" + responseDto.getPricemin() + " - " + responseDto.getPricemax());
callBack.complete(null);
}

初始化属性列表

属性之间是有一些关系的,比如我这里是以颜色为初始第一项,那么我就得根据颜色筛选出这个颜色下的所有内存,然后根据内存筛选出所有的版本。同时,只要颜色、内存、版本三个都选择了,就得筛选出这个商品。

{颜色>内存>版本}>具体商品

颜色

初始化颜色,设置选择监听,一旦用户选择了某个颜色,那么需要获取这个颜色下的所有内存,并且要开始尝试获取商品详情。

1、初始化颜色


/**
* 初始化颜色
*
* @hint
*/
private void initShopColor() {
for (TagInfo mColor : mColors) {
//初始化所有的选项为未选择状态
mColor.setSelect(false);
}
tvColor.setText("\"未选择颜色\"");
mColors.get(colorPositon).setSelect(true);
colorAdapter = new ProperyTagAdapter(mActivity, mColors);
rlShopColor.setAdapter(colorAdapter);
colorAdapter.notifyDataSetChanged();
rlShopColor.setTagCheckedMode(FlowTagLayout.FLOW_TAG_CHECKED_SINGLE);
rlShopColor.setOnTagSelectListener((parent, selectedList) -> {
colorPositon = selectedList.get(0);
strColor = mColors.get(colorPositon).getText();
// L.e("选中颜色:" + strColor);
tvColor.setText("\"" + strColor + "\"");
//获取颜色照片
initColorShop();
//查询商品详情
iterationShop();
});
}

2、获取颜色下所有的内存和该颜色的照片


/**
* 初始化相应的颜色的商品 获得 图片
*/
private void initColorShop() {
//初始化 选项数据
Observable.from(mMonerys).subscribe(tagInfo -> {
tagInfo.setChecked(true);
});
L.e("开始筛选颜色下的内存----------------------------------------------------------------------------------");
final List<String> tempColorMemery = new ArrayList<>();
//筛选内存
Observable.from(shopLists)
.filter(childsEntity -> childsEntity.getAttrinfo().getAttrs().get(0).getAttrvalue().equals(strColor))
.flatMap(childsEntity -> Observable.from(childsEntity.getAttrinfo().getAttrs()))
.filter(attrsEntity -> mActivity.getString(R.string.shop_monery).equals(attrsEntity.getAttrname()))
.subscribe(attrsEntity -> {
tempColorMemery.add(attrsEntity.getAttrvalue());
// L.e("内存:"+attrsEntity.getAttrvalue());
});

Observable.from(mTempMonerys)
.filter(s -> !tempColorMemery.contains(s))
.subscribe(s -> {
L.e("没有的内存:" + s);
mMonerys.get(mTempMonerys.indexOf(s)).setChecked(false);
});
momeryAdapter.notifyDataSetChanged();
L.e("筛选颜色下的内存完成----------------------------------------------------------------------------------");

//获取颜色的照片
ImageHelper.loadImageFromGlide(mActivity, mImages.get(tempImageColor.indexOf(strColor)), ivShopPhoto);
}

3、根据选中的属性查询是否存在该商品


/**
* 迭代 选择商品属性
*/
private void iterationShop() {
// 选择的内存 选择的版本 选择的颜色
if (strMemory == null || strVersion == null || strColor == null)
return;
//隐藏购买按钮 显示为缺货
resetBuyButton(false);
Observable.from(shopLists)
.filter(childsEntity -> childsEntity.getAttrinfo().getAttrs().get(0).getAttrvalue().equals(strColor))
.filter(childsEntity -> childsEntity.getAttrinfo().getAttrs().get(1).getAttrvalue().equals(strVersion))
.filter(childsEntity -> childsEntity.getAttrinfo().getAttrs().get(2).getAttrvalue().equals(strMemory))
.subscribe(childsEntity -> {
L.e(childsEntity.getShopprice());
tvPrice.setText("¥" + childsEntity.getShopprice());
// ImageHelper.loadImageFromGlide(mActivity, Constant.IMAGE_URL + childsEntity.getShowimg(), ivShopPhoto);
L.e("已找到商品:" + childsEntity.getName() + " id:" + childsEntity.getPid());
selectGoods = childsEntity;
tvShopName.setText(childsEntity.getName());
//显示购买按钮
resetBuyButton(true);
initShopStagesCount++;
});
}

内存

通过前面一步,已经获取了所有的内存。这一步只需要展示该所有内存,设置选择监听,选择了某个内存后就根据 选择颜色>选择内存 获取所有的版本。并在在其中也是要iterationShop()查询商品的,万一你是往回点的时候呢?

1、初始化版本


/**
* 初始化内存
*/
private void initShopMomery() {
for (TagInfo mMonery : mMonerys) {
mMonery.setSelect(false);
Log.e(" ", "initShopMomery: " + mMonery.getText());
}
tvMomey.setText("\"未选择内存\"");
mMonerys.get(momeryPositon).setSelect(true);
//-----------------------------创建适配器
momeryAdapter = new ProperyTagAdapter(mActivity, mMonerys);
rlShopMomery.setAdapter(momeryAdapter);
rlShopMomery.setTagCheckedMode(FlowTagLayout.FLOW_TAG_CHECKED_SINGLE);
rlShopMomery.setOnTagSelectListener((parent, selectedList) -> {
momeryPositon = selectedList.get(0);
strMemory = mMonerys.get(momeryPositon).getText();
// L.e("选中内存:" + strMemory);
iterationShop();
tvMomey.setText("\"" + strMemory + "\"");
iterationVersion();
});
}

2、根据已选择的颜色和内存获取到版本


/**
* 迭代 获取版本信息
*/
private void iterationVersion() {
if (strColor == null || strMemory == null) {
return;
}
// L.e("开始迭代版本");
Observable.from(mVersions).subscribe(tagInfo -> {
tagInfo.setChecked(true);
});
final List<String> iterationTempVersion = new ArrayList<>();
//1. 遍历出 这个颜色下的所有手机
//2. 遍历出 这些手机的所有版本
Observable.from(shopLists)
.filter(childsEntity -> childsEntity.getAttrinfo().getAttrs().get(0).getAttrvalue().equals(strColor))
.filter(childsEntity -> childsEntity.getAttrinfo().getAttrs().get(2).getAttrvalue().equals(strMemory))
.flatMap(childsEntity -> Observable.from(childsEntity.getAttrinfo().getAttrs()))
.filter(attrsEntity -> attrsEntity.getAttrname().equals(mActivity.getString(R.string.shop_standard)))
.subscribe(attrsEntity -> {
iterationTempVersion.add(attrsEntity.getAttrvalue());
});

Observable.from(mTempVersions).filter(s -> !iterationTempVersion.contains(s)).subscribe(s -> {
mVersions.get(mTempVersions.indexOf(s)).setChecked(false);
});
versionAdapter.notifyDataSetChanged();
// L.e("迭代版本完成");
}

版本

其实到了这一步,已经算是完成了,只需要设置监听,获取选中的版本,然后开始查询商品。


/**
* 初始化版本
*/
private void initShopVersion() {
for (TagInfo mVersion : mVersions) {
mVersion.setSelect(false);
}
tvVersion.setText("\"未选择版本\"");
mVersions.get(versionPositon).setSelect(true);
//-----------------------------创建适配器
versionAdapter = new ProperyTagAdapter(mActivity, mVersions);
rlShopVersion.setAdapter(versionAdapter);
rlShopVersion.setTagCheckedMode(FlowTagLayout.FLOW_TAG_CHECKED_SINGLE);
rlShopVersion.setOnTagSelectListener((parent, selectedList) -> {
versionPositon = selectedList.get(0);
strVersion = mVersions.get(versionPositon).getText();
// L.e("选中版本:" + strVersion);
iterationShop();
tvVersion.setText("\"" + strVersion + "\"");
});
}

完成

最终效果图如下:

da9a7058372ef0c9dec8538d042b2a2237036afb

不要在意后面的轮播图,那其实很简单的。


原文发布时间为:2018-09-7
本文作者:aohanyao
本文来自云栖社区合作伙伴“安卓巴士Android开发者门户”,了解相关信息可以关注“安卓巴士Android开发者门户”。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SAP ABAP Development Tool 提高开发效率的十个小技巧
SAP ABAP Development Tool 提高开发效率的十个小技巧
10 0
UWP开发入门(十四)—— UserControl中Adaptive UI的小技巧
原文:UWP开发入门(十四)—— UserControl中Adaptive UI的小技巧   本篇我们通过绘制一个非常简单的UserControl控件,来分享一下对Adaptive UI的理解及一些图形绘制的技巧。
1351 0
GPS定位系统怎么定位监控,如何快速二次开发行业应用
GPS定位系统是一套可以监控管理智能定位终端的综合管理系统;一般都具有实时定位,轨迹回放,电子围栏,统计报表,报警提醒,指令控制等功能!那么这套系统是如何实现实时定位监控的呢,首先需要一个智能GPS北斗定位终端,终端将实时接收卫星信号并计算出相应的 经纬度数据速度时间方向等数据,更高级的终端会带有...
1418 0
Android小技巧之最快速简单的悬浮TAB
先看效果图吧 image 原理 其实实现这样的效果是十分的简单的,继承ScrollView,监听onScrollChanged,根据滑动的距离,不断的layout需要悬浮的tab的位置。
837 0
一起谈.NET技术,Silverlight 游戏开发小技巧:传说中的透视跑马灯
  昨夜元宵佳节,各种灯会热闹非凡,伴随烟火灿烂好不热闹,可惜一点也没看着T_T,那就写一个跑马灯吧,可是跑马灯并不稀奇,各位高手们已经写过而且都各有特点,所以,写也要写点有特色的才好,游戏中经常能看到一种带有透视的选人界面,上次写的是一个固定效果,那么这次带上点动画,结合一个Silverlight的MVC开发小技巧快速完成它。
727 0
Android小技巧之无限循环的ViewPager
前言 之所以会写着篇文章的原因是我现在项目用运用到了广告轮播(BannerView),当时在赶项目的时候在github上面找到了符合的开 源库 就直接引用了,但是该开源库稍微有点庞大,功能比较繁多。
823 0
+关注
技术小能手
云栖运营小编~
7208
文章
9
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载