问题:最近一个项目中需要实现下面的效果。
解决:
整个评论列表我是用的recyclerview,评论中的每个item的图片的数量是不一定的,对于这个问题我主要是用的是动态生成控件的方法。
下面是图片布局和图片外层布局(这里只贴出了两层布局,后面使用到的也主要是这两个布局。)
<LinearLayout
android:id="@+id/ll_comment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:orientation="vertical">
<TextView
android:id="@+id/tvCommentContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="东西还行,就是卖家态度不怎么滴~" />
<LinearLayout
android:id="@+id/ll_comment_pics"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
下面的是recyclerview的adapter方法,主要实现也是在adapter方法中实现。
/**
* Created by 江南 on 2016/3/5.
*/
public class WaitCommentAdapter extends RecyclerView.Adapter<WaitCommentAdapter.WaitCommentViewHolder> {
private Context context;
private List<BuyerCommentModel> mDatas;
private List<LinearLayout> lsLinearLayout = new ArrayList<>();
private List<ImageView> lsImageView = new ArrayList<>();
private static int LINE_NUMBERS = 4;
public WaitCommentAdapter(Context context, List<BuyerCommentModel> mDatas) {
this.mDatas = mDatas;
this.context = context;
}
@Override
public WaitCommentViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
WaitCommentViewHolder holder = new WaitCommentViewHolder(LayoutInflater.from(context)
.inflate(R.layout.item_buyer_comment, parent, false));
return holder;
}
@Override
public void onBindViewHolder(WaitCommentViewHolder holder, int position) {
holder.tvBuyerNumber.setText(mDatas.get(position).getBuyerNumber());
holder.tvTime.setText(mDatas.get(position).getTime());
holder.tvCommentContent.setText(mDatas.get(position).getCommentContent());
holder.tvGoodsName.setText(mDatas.get(position).getGoodsName());
holder.tvPrice.setText(mDatas.get(position).getPrice());
int total = mDatas.get(position).getCommentPics().size() / LINE_NUMBERS;
int extal = mDatas.get(position).getCommentPics().size() % LINE_NUMBERS;
if (total != 0) {
if (holder.llComment.getTag() == null) {
for (int n = 0; n < total; n++) {
LinearLayout ll = new LinearLayout(context);
LinearLayout.LayoutParams lp2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
ll.setLayoutParams(lp2);
for (int j = 0; j < LINE_NUMBERS; j++) {
ImageView iv = new ImageView(context);
iv.setImageResource(R.mipmap.ic_launcher);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
lp.leftMargin = 10;
iv.setLayoutParams(lp);
ll.addView(iv);
}
lsLinearLayout.add(ll);
holder.llComment.addView(ll);
}
if(extal != 0){
LinearLayout ll2 = new LinearLayout(context);
LinearLayout.LayoutParams lp3 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
ll2.setLayoutParams(lp3);
for(int m = 0 ; m < extal ; m++){
ImageView iv = new ImageView(context);
iv.setImageResource(R.mipmap.ic_launcher);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
lp.leftMargin = 10;
iv.setLayoutParams(lp);
ll2.addView(iv);
}
holder.llComment.addView(ll2);
}
holder.llComment.setTag(lsLinearLayout);
} else {
}
} else if(holder.llCommentPics.getTag() == null){
for(int i = 0 ; i < mDatas.get(position).getCommentPics().size() ; i++) {
ImageView iv = new ImageView(context);
iv.setImageResource(R.mipmap.ic_launcher);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
lp.leftMargin = 10;
iv.setLayoutParams(lp);
holder.llCommentPics.addView(iv);
lsImageView.add(iv);
}
holder.llCommentPics.setTag(lsImageView);
}
}
@Override
public int getItemCount() {
return mDatas.size();
}
public class WaitCommentViewHolder extends RecyclerView.ViewHolder {
TextView tvGoodsName;//商品姓名
TextView tvPrice;//商品价格
RatingBar rbCommentLevel;//好评or中评or差评
TextView tvTime;//时间
TextView tvCommentContent;//评价内容
RoundImageView buyerPhoto;//买家头像
TextView tvBuyerNumber;//买家账号
RatingBar rbBuyerLevel;//买家等级
Button btnCommentBuyer;//评论买家
LinearLayout llCommentPics;//评论的图片列表
LinearLayout llComment;//评论
public WaitCommentViewHolder(View itemView) {
super(itemView);
tvGoodsName = (TextView) itemView.findViewById(R.id.tvGoodsName);
tvPrice = (TextView) itemView.findViewById(R.id.tv_goods_price);
rbCommentLevel = (RatingBar) itemView.findViewById(R.id.rbCommentLevel);
tvTime = (TextView) itemView.findViewById(R.id.tvTime);
tvCommentContent = (TextView) itemView.findViewById(R.id.tvCommentContent);
buyerPhoto = (RoundImageView) itemView.findViewById(R.id.riv_buyer_photo);
tvBuyerNumber = (TextView) itemView.findViewById(R.id.tvBuyerNumber);
rbBuyerLevel = (RatingBar) itemView.findViewById(R.id.rbBuyerLevel);
btnCommentBuyer = (Button) itemView.findViewById(R.id.btnCommentBuyer);
llCommentPics = (LinearLayout) itemView.findViewById(R.id.ll_comment_pics);
llComment = (LinearLayout) itemView.findViewById(R.id.ll_comment);
}
}
}
下面是解析。
private List<BuyerCommentModel> mDatas;//数据源
private List<LinearLayout> lsLinearLayout = new ArrayList<>();//用来存放动态生成的LinearLayout
private List<ImageView> lsImageView = new ArrayList<>();//用来存放动态生成的ImageView,这里的ImageView只会用来存放多出的图片。所谓多出,就是比如总共有9张图片,每行显示4张,则还有一张是多出的,需要额外一行进行显示。不足4张的图片与一般的处理方式不同,后面会有。
private static int LINE_NUMBERS = 4;//设置评论列表中每行显示的图片数目。
在继承的ViewHolder类中,声明了图片列表所在的LinearLayolut和图片列表外层的LinearLayout。
LinearLayout llCommentPics;//评论的图片列表
LinearLayout llComment;//评论
然后是onBindViewHolder方法。
int total = mDatas.get(position).getCommentPics().size() / LINE_NUMBERS;//得到需要显示的行数(奇数则加1行)
int extal = mDatas.get(position).getCommentPics().size() % LINE_NUMBERS;//取余得到不足一行的图片的数目
if (total != 0) {
//必须使用setTag来复用View,否则会造成View重复生成
if (holder.llComment.getTag() == null) {
//通过得到的行数循环生成布局,每一次循环生成一个LinearLayout,即一行
for (int n = 0; n < total; n++) {
LinearLayout ll = new LinearLayout(context);
LinearLayout.LayoutParams lp2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
ll.setLayoutParams(lp2);
//通过设定的每行显示的图片的数目进行循环,每次循环生成一个ImageView并加入外层循环生成的LinearLayout中
for (int j = 0; j < LINE_NUMBERS; j++) {
ImageView iv = new ImageView(context);
iv.setImageResource(R.mipmap.ic_launcher);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
lp.leftMargin = 10;
iv.setLayoutParams(lp);
ll.addView(iv);
}
lsLinearLayout.add(ll);//将每次生成的LinearLayout添加到List中
holder.llComment.addView(ll);
}
//如果是奇数,则会有不足一行的图片,即extal会大于0
if(extal != 0){
//生成一个LinearLayout
LinearLayout ll2 = new LinearLayout(context);
LinearLayout.LayoutParams lp3 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
ll2.setLayoutParams(lp3);
//有多少个额外的ImageView就循环多少次
for(int m = 0 ; m < extal ; m++){
ImageView iv = new ImageView(context);
iv.setImageResource(R.mipmap.ic_launcher);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
lp.leftMargin = 10;
iv.setLayoutParams(lp);
ll2.addView(iv);
}
holder.llComment.addView(ll2);
}
holder.llComment.setTag(lsLinearLayout);
} else {
}
} else if(holder.llCommentPics.getTag() == null){
for(int i = 0 ; i < mDatas.get(position).getCommentPics().size() ; i++) {
ImageView iv = new ImageView(context);
iv.setImageResource(R.mipmap.ic_launcher);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
lp.leftMargin = 10;
iv.setLayoutParams(lp);
//这里使用图片内层的LinearLayout添加ImageView
holder.llCommentPics.addView(iv);
lsImageView.add(iv);
}
holder.llCommentPics.setTag(lsImageView);
}
刚开始写博客,很多地方还表述不清,请谅解。。。有问题请留言。