公司的商城類項目，需要對一份訂單的里面多個商品進行分別評價（圖片，文字內容，星級），為了方便使用抽時間實現了這個功能，整體來說還是比較簡單的。下面是ui效果圖
??
項目要求最多上傳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下載路徑點擊打開鏈接
