Android实现类淘宝多图评价

问题：最近一个项目中需要实现下面的效果。

解决：
整个评论列表我是用的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);
        }

刚开始写博客，很多地方还表述不清，请谅解。。。有问题请留言。