概述
商城项目开发过程中，当用户购买商品完成后，需要用户对买入的商品进行打星评分，这在开发过程中似乎这个需求是必须的，每个app设计得不一样，所以评分系统也不一样，但站在技术的角度来看，其实都大同小异，只是每个公司的需要不同而已，话不多说，直接开整吧。
实现流程
- 效果图
20200701173347209.gif
- 添加依赖
implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.jakewharton:butterknife:5.1.1'
implementation 'com.google.code.gson:gson:2.3.1'
implementation 'com.github.bumptech.glide:glide:4.5.0'
- 模拟用户购买成功商品数据
//模拟数据
String response = "{\n" +
" \"datas\": {\n" +
" \"page\": {\n" +
" \"page\": \"1\",\n" +
" \"pageCount\": 1,\n" +
" \"perPage\": 5,\n" +
" \"totalCount\": 3\n" +
" },\n" +
" \"rows\": [\n" +
" {\n" +
" \"headimg\": \"/userInfoHead/201805/97ad9a393dd242cca8b076205a2297cf.jpg\",\n" +
" \"items\": [\n" +
" {\n" +
" \"disItemId\": \"5814203\",\n" +
" \"icon\": \"/newImage/product/202005/0e5edcc278eb4c8ea1ef476dab15c5ee.jpg\",\n" +
" \"itemName\": \"酸系列\",\n" +
" \"itemPrice\": \"8.80\",\n" +
" \"massId\": \"267\",\n" +
" \"num\": \"8\",\n" +
" \"productId\": \"3768\",\n" +
" \"skuId\": \"25241\"\n" +
" },\n" +
" {\n" +
" \"disItemId\": \"5814204\",\n" +
" \"icon\": \"/newImage/product/202005/0e5edcc278eb4c8ea1ef476dab15c5ee.jpg\",\n" +
" \"itemName\": \"甜系列\",\n" +
" \"itemPrice\": \"8.80\",\n" +
" \"massId\": \"267\",\n" +
" \"num\": \"2\",\n" +
" \"productId\": \"3768\",\n" +
" \"skuId\": \"25241\"\n" +
" },\n" +
" {\n" +
" \"disItemId\": \"5814205\",\n" +
" \"icon\": \"/newImage/product/202005/ff50bdcbcf7e4f4d852184336f88171f.jpg\",\n" +
" \"itemName\": \"苦系列\",\n" +
" \"itemPrice\": \"6.80\",\n" +
" \"massId\": \"267\",\n" +
" \"num\": \"4\",\n" +
" \"productId\": \"3768\",\n" +
" \"skuId\": \"25240\"\n" +
" },\n" +
" {\n" +
" \"disItemId\": \"5814206\",\n" +
" \"icon\": \"/newImage/product/202005/ff50bdcbcf7e4f4d852184336f88171f.jpg\",\n" +
" \"itemName\": \"辣系列\",\n" +
" \"itemPrice\": \"6.80\",\n" +
" \"massId\": \"267\",\n" +
" \"num\": \"2\",\n" +
" \"productId\": \"3768\",\n" +
" \"skuId\": \"25240\"\n" +
" },\n" +
" {\n" +
" \"disItemId\": \"5814207\",\n" +
" \"icon\": \"/newImage/product/202005/ff50bdcbcf7e4f4d852184336f88171f.jpg\",\n" +
" \"itemName\": \"暗黑系\",\n" +
" \"itemPrice\": \"6.80\",\n" +
" \"massId\": \"267\",\n" +
" \"num\": \"4\",\n" +
" \"productId\": \"3768\",\n" +
" \"skuId\": \"25240\"\n" +
" },\n" +
" {\n" +
" \"disItemId\": \"5814208\",\n" +
" \"icon\": \"/newImage/product/202005/ff50bdcbcf7e4f4d852184336f88171f.jpg\",\n" +
" \"itemName\": \"雪白系\",\n" +
" \"itemPrice\": \"6.80\",\n" +
" \"massId\": \"267\",\n" +
" \"num\": \"2\",\n" +
" \"productId\": \"3768\",\n" +
" \"skuId\": \"25240\"\n" +
" },\n" +
" {\n" +
" \"disItemId\": \"5814209\",\n" +
" \"icon\": \"/newImage/product/202005/ff50bdcbcf7e4f4d852184336f88171f.jpg\",\n" +
" \"itemName\": \"粉嫩系\",\n" +
" \"itemPrice\": \"6.80\",\n" +
" \"massId\": \"267\",\n" +
" \"num\": \"2\",\n" +
" \"productId\": \"3768\",\n" +
" \"skuId\": \"25240\"\n" +
" }\n" +
" ],\n" +
" \"massId\": \"267\",\n" +
" \"nickname\": \"一叶知\",\n" +
" \"productId\": \"3768\"\n" +
" }\n" +
" ]\n" +
" },\n" +
" \"msg\": \"success!\",\n" +
" \"ret\": 0\n" +
"}";
-
用户购买成功后商品列表实现
(1) 效果图
QQ截图20200702094822.png
(2) 实现代码
//商品列表实现
//数据解析
WaitEvaluationReq delivergoodsReq = new Gson().fromJson(response, WaitEvaluationReq.class);
if (delivergoodsReq.getRet() == 0) {
List<WaitEvaluationReq.DatasBean.RowsBean> rowsBeanList = delivergoodsReq.getDatas().getRows();
if (rowsBeanList != null && rowsBeanList.size() != 0) {
//设置待评价的数据
waitEvaluationAdapter.setData(rowsBeanList);
mRecyclerView.setAdapter(waitEvaluationAdapter);
}
}
-
点击评价按钮进入评价打星页面
(1) 效果图
在这里插入图片描述
(2) 将数据传递到评分页面实现需要评价商品的列表
//设置需要评价的商品数据
commentSystemAdapter.setData(itemsBeanList, tv_titlebar_right);
recycler_view.setAdapter(commentSystemAdapter);
- 评分列表Adapter的实现
public class CommentSystemAdapter extends RecyclerView.Adapter<CommentSystemAdapter.ViewHolder> {
private final Context mContext;
private int currentStarCount;
private int currentImgStarCount;
private List<WaitEvaluationReq.DatasBean.RowsBean.ItemsBean> itemsBeanList;
private TextView tv_titlebar_right;
private OnTitlebarItemListener mDeleteListener;
public interface OnTitlebarItemListener {
void onClickItem(View v, List<WaitEvaluationReq.DatasBean.RowsBean.ItemsBean> itemsBeanList);
}
public void setOnTitlebarItemListener(OnTitlebarItemListener listener) {
mDeleteListener = listener;
}
public CommentSystemAdapter(Context context) {
this.mContext = context;
}
public void setData(List<WaitEvaluationReq.DatasBean.RowsBean.ItemsBean> itemsBeanList, TextView tv_titlebar_right) {
this.itemsBeanList = itemsBeanList;
this.tv_titlebar_right = tv_titlebar_right;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_comment_system_adapter, viewGroup, false);
ViewHolder viewHolder = new ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull final ViewHolder viewHolder, final int i) {
if (itemsBeanList != null && itemsBeanList.size() != 0) {
final WaitEvaluationReq.DatasBean.RowsBean.ItemsBean itemsBean = itemsBeanList.get(i);
if (TextUtils.isEmpty(itemsBean.getItemName())) {
viewHolder.text_content.setText("");
} else {
viewHolder.text_content.setText(itemsBean.getItemName());
}
//评星选择
viewHolder.iv_comment_star_1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentStarCount = 1;
setXin(viewHolder.starList, currentStarCount, 1, i);
}
});
viewHolder.iv_comment_star_2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentStarCount = 2;
setXin(viewHolder.starList, currentStarCount, 1, i);
}
});
viewHolder.iv_comment_star_3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentStarCount = 3;
setXin(viewHolder.starList, currentStarCount, 1, i);
}
});
viewHolder.iv_comment_star_4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentStarCount = 4;
setXin(viewHolder.starList, currentStarCount, 1, i);
}
});
viewHolder.iv_comment_star_5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentStarCount = 5;
setXin(viewHolder.starList, currentStarCount, 1, i);
}
});
viewHolder.iv_design_star_1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentImgStarCount = 1;
setXin(viewHolder.starImgList, currentImgStarCount, 2, i);
}
});
viewHolder.iv_design_star_2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentImgStarCount = 2;
setXin(viewHolder.starImgList, currentImgStarCount, 2, i);
}
});
viewHolder.iv_design_star_3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentImgStarCount = 3;
setXin(viewHolder.starImgList, currentImgStarCount, 2, i);
}
});
viewHolder.iv_design_star_4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentImgStarCount = 4;
setXin(viewHolder.starImgList, currentImgStarCount, 2, i);
}
});
viewHolder.iv_design_star_5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
currentImgStarCount = 5;
setXin(viewHolder.starImgList, currentImgStarCount, 2, i);
}
});
tv_titlebar_right.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mDeleteListener.onClickItem(v, itemsBeanList);
}
});
viewHolder.et_user_input.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
//保存留言信息
String inputContent = viewHolder.et_user_input.getText().toString();
itemsBean.setRemark(inputContent);
}
});
}
}
@Override
public int getItemCount() {
return itemsBeanList.size();
}
private void setXin(List<ImageView> starList, int currentStarCount, int type, int position) {
if (itemsBeanList != null && itemsBeanList.size() != 0) {
WaitEvaluationReq.DatasBean.RowsBean.ItemsBean itemsBean = itemsBeanList.get(position);
if (type == 1) {
//保存用户评价质量分数据
itemsBean.setQuality(currentStarCount);
} else if (type == 2) {
//保存用户评价创意分数据
itemsBean.setOriginality(currentStarCount);
}
}
for (int i = 0, len = starList.size(); i < len; i++) {
starList.get(i).setImageResource(i < currentStarCount ? R.drawable.grade_star_solid : R.drawable.grade_star_blank);
}
}
public static class ViewHolder extends RecyclerView.ViewHolder {
public List<ImageView> starList = new ArrayList<>();
public List<ImageView> starImgList = new ArrayList<>();
@InjectView(R.id.img_shopping)
ImageView img_shopping;
@InjectView(R.id.text_content)
TextView text_content;
@InjectView(R.id.et_user_input)
EditText et_user_input;
@InjectView(R.id.iv_comment_star_1)
ImageView iv_comment_star_1;
@InjectView(R.id.iv_comment_star_2)
ImageView iv_comment_star_2;
@InjectView(R.id.iv_comment_star_3)
ImageView iv_comment_star_3;
@InjectView(R.id.iv_comment_star_4)
ImageView iv_comment_star_4;
@InjectView(R.id.iv_comment_star_5)
ImageView iv_comment_star_5;
@InjectView(R.id.iv_design_star_1)
ImageView iv_design_star_1;
@InjectView(R.id.iv_design_star_2)
ImageView iv_design_star_2;
@InjectView(R.id.iv_design_star_3)
ImageView iv_design_star_3;
@InjectView(R.id.iv_design_star_4)
ImageView iv_design_star_4;
@InjectView(R.id.iv_design_star_5)
ImageView iv_design_star_5;
public ViewHolder(@NonNull View itemView) {
super(itemView);
ButterKnife.inject(this, itemView);
starList.add(iv_comment_star_1);
starList.add(iv_comment_star_2);
starList.add(iv_comment_star_3);
starList.add(iv_comment_star_4);
starList.add(iv_comment_star_5);
starImgList.add(iv_design_star_1);
starImgList.add(iv_design_star_2);
starImgList.add(iv_design_star_3);
starImgList.add(iv_design_star_4);
starImgList.add(iv_design_star_5);
}
}
}
- 用户评分打星后点击完成回调结果
//用户评价后的回调数据
commentSystemAdapter.setOnTitlebarItemListener(new CommentSystemAdapter.OnTitlebarItemListener() {
@Override
public void onClickItem(View v, List<WaitEvaluationReq.DatasBean.RowsBean.ItemsBean> itemsBeanList) {
if (itemsBeanList != null && itemsBeanList.size() != 0) {
//请求服务器接口发送用户评价的数据
double averageQuality = 0;
double averageOriginality = 0;
for (int i = 0; i < itemsBeanList.size(); i++) {
WaitEvaluationReq.DatasBean.RowsBean.ItemsBean itemsBean = itemsBeanList.get(i);
int quality = itemsBean.getQuality();
int originality = itemsBean.getOriginality();
averageQuality = averageQuality + quality;
averageOriginality = averageOriginality + originality;
}
//保留两位小数
DecimalFormat df = new DecimalFormat("######0.00");
//社团平均分的计算
String content = "该社团质量分：" + df.format((averageQuality / itemsBeanList.size())) +
", 创意分：" + df.format((averageOriginality / itemsBeanList.size()));
//模拟已评价成功
Toast.makeText(getApplicationContext(), content, Toast.LENGTH_SHORT).show();
finish();
}
}
});
总结
到这里已经把整个流程跑完了，整个过程并没有复杂的东西，都是大家平时经常写的，比较难得地方应该是在列表中需要完成多个商品的打星及用户留言数据的保存，我这里的处理是当用户打完星或者输入留言之后保存数据，整个流程还是比较简单的。
需要Demo的童鞋公众号回复：“评分系统”即可获取哦
