Android 多商品訂單評價（類似淘寶）
阿新 • • 發佈：2019-01-25
前幾日一商城類專案，有一需求，需要對一份訂單的裡面幾個商品進行分別評價（圖片，文字內容，星級）；以前都是對一份訂單所有商品一起評價，那種簡單的多；
後來，承蒙老大細心指導，終於弄出來個看起來還算湊活的，還是先貼一下效果圖吧。。。
抖動的有點卡，gif圖的問題
圖片的相關操作展示.gif
具體評價實現
*上面這張圖是訂單列表，可以看到有幾個商品，要對這幾個商品進行分條評價；
*這個gif圖是具體的對每一個商品進行上傳圖片，內容，星級評價操作
好了，下面就來分析一下怎麼寫出這玩意，先從佈局開始：
佈局很好寫，一看就可看出是一個listview，外加一個提交評論的按鈕，給listview設定layout_weight屬性，固定一下提交按鈕的位置。
android:layout_weight="1"然後就是listview的item,主要說下上傳圖片那一塊，我添了三個imgview，比較low，做了一些判斷，選擇圖片的控制元件是單選的，只好一個一個選，這樣也好，比較簡單清楚。
畫了張草圖，大家可以看一下，方便理解；
評價示意圖.png
著重說一下程式碼實現：
1，首先，從上個訂單頁面傳過來每個商品的id,圖片，圖片用於顯示，商品id用來判定評價的是哪個商品，id 和圖片用兩個陣列存起來；
//demo中在Mainactivity.java private List<String> img = new ArrayList<>(); private List<String> ids = new ArrayList<>();
2，要給listview 填充資料，和獲得item裡面的每條資料，我們就先建一個實體類GoodsAssessBean.java，資料是下面幾個，裡面有幾個方法，列出來（因為這是每條item的資料，所以，拿到相應的東西和方法相對好實現）；
private String id;//商品id private String icon;//商品圖片 private String content ="";//商品評價內容 private ArrayList<String> imgList = new ArrayList<>();//七牛返回的圖片url private ArrayList<Bitmap> bitmapList = new ArrayList<>();//本地的bitmap private String starts="0";//商品星級評定 /** * 新增或更換圖片 * @param bitmap 本地 bitmap * @param index 圖片的二級位置 0 或 1 或 2；初始值為0 需要加1與 bitmapList.size()比較 * @param url 七牛返回的圖片地址 */ public void addOrSetImage(Bitmap bitmap, int index, String url){ //如果小於等於證明需要更換圖片； if(index + 1 <= bitmapList.size()){ imgList.set(index, url); bitmapList.set(index, bitmap); }else{ //大於的話新增圖片； addBitMap(bitmap); save(url); } } /** * 新增Bitmap * @param bitmap */ public void addBitMap(Bitmap bitmap){ if(bitmapList.size()<3){ bitmapList.add(bitmap); } } /** * * @param url 每個item裡面的URL */ public void save(String url){ imgList.add(url); } /** * 這個方法是把七牛返回的圖片地址進行拼接，用“;”隔開 * @return */ public String getItemUrl(){ String urls=""; if(imgList.size() > 0){ for(int i=0;i<imgList.size();i++){ urls+= imgList.get(i)+";"; } return urls.substring(0,urls.length()-1); }else { return " "; } } /** * 刪除第幾張圖片 * @param index 第二層位置 */ public void deleteImg(int index){ if(imgList.size()>index){ imgList.remove(index); bitmapList.remove(index); } } /** * 把每個 item（每個商品）的評價內容，星級，圖片等轉成json格式； * @return */ public String toSString(){ String str = ""; ReturnBean rb = new ReturnBean(); rb.setContent(getContent()); rb.setComment_img(getItemUrl()); rb.setGoods_num(getStarts()); rb.setOrdergoods_id(getId()); try { str = JsonUtil.toJsonString(rb); } catch (IOException e) { e.printStackTrace(); } return str; } public ReturnBean getReturnBean(){ ReturnBean rb = new ReturnBean(); rb.setContent(getContent()); rb.setComment_img(getItemUrl()); rb.setGoods_num(getStarts()); rb.setOrdergoods_id(getId()); return rb; }
3，在自己寫一個圖片幫助類AssessImgHelp。在這個類裡，我們把寫一個方法，把拿到的商品id，和商品圖片存到實體類裡，在這裡面也有些方法，列出來。
public ArrayList<GoodsAssessBean> mBeanList = new ArrayList<>();
public AssessImgHelp(List<String> ids,List<String> icon){
for(int i=0;i<ids.size();i++){
mBeanList.add(new GoodsAssessBean(ids.get(i), icon.get(i)));
}
}
public ArrayList<GoodsAssessBean> getBeanList(){
return mBeanList;
}·
/**
*
* @param outIndex item的位置 相當於position
* @param bitmap bitmap用於本地顯士
* @param url 七牛返回地址
* @param inIndex 圖片位置
*/
public void doQiNiuDone(int outIndex, Bitmap bitmap, String url,int inIndex){
//哪個item呼叫GoodsAssessBean.java裡的方法，也就是新增更換圖片
mBeanList.get(outIndex).addOrSetImage(BitmapUtils.compressImage(bitmap), inIndex, url);
}
//長按刪除圖片
public void longDelete(int outIndex,int inIndex){
//呼叫GoodsAssessBean.java裡的刪除方法
mBeanList.get(outIndex).deleteImg(inIndex);
}
//生成json串
public String jsonSString(){
String str="";
ArrayList<ReturnBean> beanList = new ArrayList<>();
for(int i=0; i< getBeanList().size(); i++){
str += getBeanList().get(i).toSString();
beanList.add(getBeanList().get(i).getReturnBean());
}
Log.e("123", "beanList" + JsonUtil.object2JSON(beanList));
return JsonUtil.object2JSON(beanList);
}4，最後一個幫助類AssessBeanUtils.java;存入list的position和每個item裡面圖片的位置，貼一下；
private int outIndex;
private int inIndex;
public void setBean(int outIndex,int inIndex){
this.outIndex = outIndex;
this.inIndex = inIndex;
}
public int getOutIndex() {
return outIndex;
}
public int getInIndex() {
return inIndex;
}5，好的，現在到目前為止，我們所有的資料都能拿的到，還有一些圖片的刪除，更換，新增等等方法全部準備完畢，剩下的只是在MainActivity中呼叫即可（demo中的ＭainActivity），著重看幾個地方；
//list之外的星級判定，物流，描述等獲取可以用setOnRatingBarChangeListener（）方法；
mRatingBarMiaoshu.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
miaoshu = rating + "";
}
});
/*
* 填充資料
* */
private void showData() {
//長按圖片抖動效果
final Animation anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.myanim);
mAdapter = new CommonAdapter<GoodsAssessBean>(MainActivity.this, assessImgHelp.getBeanList(), R.layout.item_assess) {
@Override
public void convert(ViewHolder helper, final GoodsAssessBean item, final int position) {
//載入商品圖片
ImageLoad.loadImgDefault(MainActivity.this, (ImageView) helper.getView(R.id.m_assess), item.getIcon());
//獲取商品星級評價
((RatingBar) helper.getView(R.id.m_ratingBar_shop)).setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
item.setStarts(rating + "");
}
});
//獲取評價內容
((EditText) helper.getView(R.id.m_assess_edt)).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) {
item.setContent(s + "");
}
});
//三個imageView和三個刪除按鈕
final ImageView img1 = helper.getView(R.id.m_menmian1_icon);
final ImageView img2 = helper.getView(R.id.m_menmian2_icon);
final ImageView img3 = helper.getView(R.id.m_menmian3_icon);
final ImageView imgclose1 = helper.getView(R.id.m_image_one);
final ImageView imgclose2 = helper.getView(R.id.m_image_two);
final ImageView imgclose3 = helper.getView(R.id.m_image_three);
img1.setScaleType(ImageView.ScaleType.CENTER_CROP);//CENTER_CROP FIT_XY
img2.setScaleType(ImageView.ScaleType.CENTER_CROP);//CENTER_CROP FIT_XY
img3.setScaleType(ImageView.ScaleType.CENTER_CROP);//CENTER_CROP FIT_XY
//獲取本地圖片數量。分別對應相應的顯示
int size = item.getBitMapListSize();
if (size == 0) {
setImageViewVisibility(img1, true, img2, false, img3, false);
img1.setImageResource(R.mipmap.pj_tj);//預設圖片
} else if (size == 1) {
setImageViewVisibility(img1, true, img2, true, img3, false);
img1.setImageBitmap(item.getBitmapList().get(0));
img2.setImageResource(R.mipmap.pj_tj);
} else if (size == 2) {
setImageViewVisibility(img1, true, img2, true, img3, true);
img1.setImageBitmap(item.getBitmapList().get(0));
img2.setImageBitmap(item.getBitmapList().get(1));
img3.setImageResource(R.mipmap.pj_tj);
} else if (size == 3) {
setImageViewVisibility(img1, true, img2, true, img3, true);
img1.setImageBitmap(item.getBitmapList().get(0));
img2.setImageBitmap(item.getBitmapList().get(1));
img3.setImageBitmap(item.getBitmapList().get(2));
}
//點選事件
img1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.e("123", "img: " + img1.getId());
mAssessBean.setBean(position, 0);//儲存一級二級位置
new PopupWindows(MainActivity.this);//彈出選擇頭像，相簿
}
});
img2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mAssessBean.setBean(position, 1);
new PopupWindows(MainActivity.this);
}
});
img3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mAssessBean.setBean(position, 2);
new PopupWindows(MainActivity.this);
}
});
img1.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
//一些小細節判斷，如果第一張沒有圖片，長按提示請選擇圖片
if (assessImgHelp.getBeanList().get(position).getImgListSize() > 0) {
img1.startAnimation(anim);//抖動效果
imgclose1.setVisibility(View.VISIBLE);//顯示刪除按鈕
} else {
toast("請新增圖片");
}
return true;
}
});
//刪除按鈕點選事件
imgclose1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
assessImgHelp.longDelete(position, 0);//呼叫刪除方法
mAdapter.notifyDataSetChanged();
imgclose1.setVisibility(View.GONE);
toast("刪除成功");
}
});
img2.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if (assessImgHelp.getBeanList().get(position).getImgListSize() > 1) {
img2.startAnimation(anim);
imgclose2.setVisibility(View.VISIBLE);
} else {
toast("請新增圖片");
}
return true;
}
});
imgclose2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
assessImgHelp.longDelete(position, 1);
mAdapter.notifyDataSetChanged();
imgclose2.setVisibility(View.GONE);
toast("刪除成功");
}
});
img3.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if (assessImgHelp.getBeanList().get(position).getImgListSize() > 2) {
img3.startAnimation(anim);
imgclose3.setVisibility(View.VISIBLE);
} else {
toast("請新增圖片");
}
return true;
}
});
imgclose3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
assessImgHelp.longDelete(position, 2);
mAdapter.notifyDataSetChanged();
imgclose3.setVisibility(View.GONE);
toast("刪除成功");
}
});
}
};
mAssessList.setAdapter(mAdapter);
}
//圖片的顯示與隱藏
public void setImageViewVisibility(ImageView img1, boolean boo1, ImageView img2, boolean boo2, ImageView img3, boolean boo3) {
img1.setVisibility(boo1 ? View.VISIBLE : View.GONE);
img2.setVisibility(boo2 ? View.VISIBLE : View.GONE);
img3.setVisibility(boo3 ? View.VISIBLE : View.GONE);
}後面的就是一些呼叫相簿，相機，選取圖片，上傳七牛，還有就是6.0許可權問題也有判斷。
七牛上傳成功之後，調這個方法：
//第一個是position，第三個是七牛返回的圖片地址，第四個是圖片位置；
assessImgHelp.doQiNiuDone(mAssessBean.getOutIndex(), bitmap, key, mAssessBean.getInIndex());具體看Demo吧，足夠詳細，絕對能看懂，以上；
PS:圖片提示失敗是應為七牛Token介面失效了，需要換成自己專案裡的。
)O~L_77}]{%K01FU6_6Q$0K.png