Android 多商品订单多图评价功能实现(类似淘宝,可自定义可上传图片数量)

公司的商城类项目,需要对一份订单的里面多个商品进行分别评价(图片,文字内容,星级),为了方便使用抽时间实现了这个功能,整体来说还是比较简单的。下面是ui效果图

​​

Android 多商品订单多图评价功能实现(类似淘宝,可自定义可上传图片数量)_第1张图片

项目要求最多上传5张图片,这就涉及到换行的问题。最终找到了一个完美的结决方法。利用recycleView嵌套了一个流式布局

FlowTagLayout解决了动态添加复用的问题。

1、 主要布局文件 activity_comments.xml 


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:id="@+id/lv_comments"

android:layout_width="match_parent"

android:layout_height="match_parent">

1.1 、item的布局

item_comment.xml


android:orientation="vertical"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:background="#ffffff"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingLeft="15dp"

android:paddingTop="8dp"

android:paddingBottom="8dp"

android:orientation="horizontal">

android:id="@+id/iv_goods_image"

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_gravity="center_vertical"

android:background="@mipmap/ic_default"/>

android:id="@+id/rat_comment"

style="?android:attr/ratingBarStyleSmall"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_marginLeft="10dp"

android:isIndicator="false"

android:numStars="5"

android:progressTint="@color/yellow"

android:rating="0"

android:stepSize="0.1" />

android:layout_width="match_parent"

android:layout_height="1dp"

android:background="@color/line_bg"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingTop="15dp"

android:paddingBottom="15dp"

android:orientation="vertical">

android:id="@+id/et_comment"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@null"

android:paddingLeft="15dp"

android:paddingRight="15dp"

android:hint="请填写您的评价"

android:gravity="top"

android:textSize="14dp"

android:textCursorDrawable="@null"

android:textColorHint="#999999"

android:minLines="5"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:id="@+id/fl_comment"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:focusable="true"

android:focusableInTouchMode="true"

android:layout_margin="10dp">

android:layout_width="match_parent"

android:layout_height="5dp"

android:background="@color/activity_gray"/>

1.2、流式布局的item文件tag_item2.xml


android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ffffff" >

android:id="@+id/iv_comment_image"

android:layout_width="70dp"

android:layout_height="70dp"

android:layout_marginTop="10dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="5dp"

android:layout_marginRight="5dp"

android:background="@mipmap/iv_up_image"/>

2、CommentsInfo 评论内容的model类

public class CommentsInfo {

private int ProductId;

private String CommentContent;

public List CommentImgs;

private double StarCount;

public int getProductId() {

return ProductId;

}

public void setProductId(int productId) {

ProductId = productId;

}

public String getCommentContent() {

return CommentContent;

}

public void setCommentContent(String commentContent) {

CommentContent = commentContent;

}

public List getCommentImgs() {

return CommentImgs;

}

public void setCommentImgs(List commentImgs) {

CommentImgs = commentImgs;

}

public double getStarCount() {

return StarCount;

}

public void setStarCount(double starCount) {

StarCount = starCount;

}

}

2.1、下面是用到的adapter

recycleView 的adapter类 CommentAdapter

public class CommentAdapter extends RecyclerView.Adapter {

private ArrayList list;

private Context context;

private OnStatusListener onStatusListener;

public CommentAdapter(ArrayList list, Context context) {

this.list = list;

this.context = context;

}

public void setOnStatusListener(OnStatusListener onStatusListener) {

this.onStatusListener = onStatusListener;

}

@Override

public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {

ViewHolder viewHolder = new ViewHolder(LayoutInflater.from(context).inflate(R.layout.item_comment, viewGroup, false));

return viewHolder;

}

@Override

public void onBindViewHolder(ViewHolder viewHolder, final int i) {

viewHolder.flComment

.setTagCheckedMode(FlowTagLayout.FLOW_TAG_CHECKED_SINGLE);

TagAdapter1 mSizeTagAdapter1 = new TagAdapter1<>(context);

viewHolder.flComment.setAdapter(mSizeTagAdapter1);

mSizeTagAdapter1.onlyAddAll(list.get(i).getCommentImgs());

viewHolder.flComment.setOnTagSelectListener(new OnTagSelectListener() {

@Override

public void onItemSelect(FlowTagLayout parent, List selectedList) {

if(list.get(i).getCommentImgs().get(selectedList.get(0)).equals("")){

onStatusListener.onSetStatusListener(i);

}else{

onStatusListener.onDeleteListener(i,selectedList.get(0));

}

}

});

}

@Override

public long getItemId(int i) {

return i;

}

@Override

public int getItemCount() {

return list.size();

}

class ViewHolder extends RecyclerView.ViewHolder{

FlowTagLayout flComment;

public ViewHolder(View itemView) {

super(itemView);

flComment = itemView.findViewById(R.id.fl_comment);

}

}

public interface OnStatusListener {

void onSetStatusListener(int pos);

void onDeleteListener(int pos, int tagPos);

}

}

2.2、流式布局的adapter类 TagAdapter

public class TagAdapter extends BaseAdapter implements OnInitSelectedPosition {

private final Context mContext;

private final List mDataList;

public TagAdapter(Context context) {

this.mContext = context;

mDataList = new ArrayList();

}

@Override

public int getCount() {

return mDataList.size();

}

@Override

public Object getItem(int position) {

return mDataList.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)

@Override

public View getView(int position, View convertView, ViewGroup parent) {

View view = LayoutInflater.from(mContext).inflate(R.layout.tag_item2, null);

ImageView ivImage = (ImageView) view.findViewById(R.id.iv_comment_image);

T t = mDataList.get(position);

if (t instanceof String) {

if(t.equals("")){

ivImage.setBackground(mContext.getResources().getDrawable(R.mipmap.iv_up_image));

}else{

ImageLoader.getInstance().displayImage(t.toString(), ivImage);

}

}

return view;

}

public void onlyAddAll(List datas) {

mDataList.clear();

mDataList.addAll(datas);

notifyDataSetChanged();

}

public void clearAndAddAll(List datas) {

mDataList.clear();

onlyAddAll(datas);

}

@Override

public boolean isSelectedPosition(int position) {

if (position % 2 == 0) {

return true;

}

return false;

}

}

2.3、activity中的代码

public class CommentsActivity extends Activity implements CommentAdapter.OnStatusListener{

ArrayList list = new ArrayList<>();

CommentAdapter commentAdapter;

RecyclerView lvComment;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_comments);

findViews();

}

protected void findViews() {

lvComment = findViewById(R.id.lv_comments);

LinearLayoutManager layoutmanager = new LinearLayoutManager(this);

//设置RecyclerView 布局

layoutmanager.setOrientation(LinearLayoutManager.VERTICAL);

lvComment.setLayoutManager(layoutmanager);

for(int i=0;i<3;i++){

CommentsInfo commentsInfo = new CommentsInfo();

List commentImgs = new ArrayList<>();

commentImgs.add("");

commentsInfo.setCommentImgs(commentImgs);

list.add(commentsInfo);

}

commentAdapter = new CommentAdapter(list,this);

commentAdapter.setOnStatusListener(this);

lvComment.setAdapter(commentAdapter);

}

//这里可以处理点击添加图片  打开相册或相机功能 然后将图片的路径存到对应的model中 刷新列表

@Override

public void onSetStatusListener(int pos) {

if(list.get(pos).getCommentImgs().size()<5){

CommentsInfo commentsInfo = list.get(pos);

List commentImgs = commentsInfo.getCommentImgs();

commentImgs.add(0,"http://img.xsmore.com/cjyp/Product/2ef24a07-f3b0-4497-8549-2acc0f7ca4b0.jpg");

commentsInfo.setCommentImgs(commentImgs);

list.set(pos,commentsInfo);

commentAdapter.notifyItemChanged(pos);

}else if(list.get(pos).getCommentImgs().size()==5){

CommentsInfo commentsInfo = list.get(pos);

List commentImgs = commentsInfo.getCommentImgs();

commentImgs.set(commentImgs.size()-1,"http://img.xsmore.com/cjyp/Product/2ef24a07-f3b0-4497-8549-2acc0f7ca4b0.jpg");

commentsInfo.setCommentImgs(commentImgs);

list.set(pos,commentsInfo);

commentAdapter.notifyItemChanged(pos);

}

}

@Override

public void onDeleteListener(int pos,int tagPos) {

CommentsInfo commentsInfo = list.get(pos);

List commentImgs = commentsInfo.getCommentImgs();

if(!commentImgs.get(commentImgs.size()-1).equals("")){

commentImgs.add("");

}

commentImgs.remove(tagPos);

commentsInfo.setCommentImgs(commentImgs);

list.set(pos,commentsInfo);

commentAdapter.notifyItemChanged(pos);

}

}

demo下载路径点击打开链接

你可能感兴趣的:(Android 多商品订单多图评价功能实现(类似淘宝,可自定义可上传图片数量))