公司的商城类项目，需要对一份订单的里面多个商品进行分别评价（图片，文字内容，星级），为了方便使用抽时间实现了这个功能，整体来说还是比较简单的。下面是ui效果图
项目要求最多上传5张图片，这就涉及到换行的问题。最终找到了一个完美的结决方法。利用recycleView嵌套了一个流式布局
FlowTagLayout解决了动态添加复用的问题。
1、 主要布局文件 activity_comments.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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.support.v7.widget.RecyclerView
android:id="@+id/lv_comments"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</LinearLayout>
1.1 、item的布局
item_comment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_goods_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/ic_default"/>
<RatingBar
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" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/line_bg"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:orientation="vertical">
<EditText
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"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.first.demo.flowtaglayout.FlowTagLayout
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">
</com.first.demo.flowtaglayout.FlowTagLayout>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="@color/activity_gray"/>
</LinearLayout>
1.2、流式布局的item文件tag_item2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff" >
<ImageView
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"/>
</LinearLayout>
2、CommentsInfo 评论内容的model类
public class CommentsInfo {
private int ProductId;
private String CommentContent;
public List<String> 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<String> getCommentImgs() {
return CommentImgs;
}
public void setCommentImgs(List<String> 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<CommentAdapter.ViewHolder> {
private ArrayList<CommentsInfo> list;
private Context context;
private OnStatusListener onStatusListener;
public CommentAdapter(ArrayList<CommentsInfo> 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<String> 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<Integer> 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<T> extends BaseAdapter implements OnInitSelectedPosition {
private final Context mContext;
private final List<T> mDataList;
public TagAdapter(Context context) {
this.mContext = context;
mDataList = new ArrayList<T>();
}
@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<T> datas) {
mDataList.clear();
mDataList.addAll(datas);
notifyDataSetChanged();
}
public void clearAndAddAll(List<T> 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<CommentsInfo> 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<String> 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<String> 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<String> 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<String> 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下载路径 点击打开链接