仿朋友圈图片显示

很多项目都会有一个功能，就是仿朋友圈一样的动态显示，但这个里面有个问题就是图片的摆放是怎样的呢？用recycleView ,用GrideView?在实际过程中，根据不同项目要求不一样的，以上两种有些时候是不太方便做好图片摆放的，因此需要自定义一个，下面就来看看我的SuperGridLayout是如何处理不同张数图片，然后不同显示的吧。

首先是模拟数据，给列表添加的数据，一个HashMap，piece显示的是textview,picUrls是一个集合，存放图片地址的集合。我这里放的为aaaaaaaa,因为我后面用Glide加载图片有error方法，加载失败显示自定义的一个图片，仅仅只是给看个效果展示的。

private void initDatas() {
        for (int i = 0; i < 6; i++) {
            HashMap<String, Object> hashMap = new HashMap<>();
            hashMap.put("piece", "共" + (i + 1) + "张");
            List<String> list = new ArrayList<>();
            for (int j = 0; j <= i; j++) {
                list.add("aaaaaaaa" + i);
            }
            hashMap.put("picUrls", list);
            listDatas.add(hashMap);
        }
        testAdapter.setDatas(listDatas);
        testAdapter.notifyDataSetChanged();
    }

  private void initView() {
        mlistview = (ListView) findViewById(R.id.mlistview);
        testAdapter = new TestAdapter(MainActivity.this);
        testAdapter.setDatas(new ArrayList<HashMap<String, Object>>());
        mlistview.setAdapter(testAdapter);
    }

跟普通listview添加adapter一样的写法，没任何特别。

接下来就开始看自定义的SuperGridLayout。其实就是计算好尺寸，然后对每一张图片设置好尺寸，然后由于我的SuperGridLayout是继承RelativeLayout，也就是继承ViewGoup了，因此通过addView()方法给它添加自己的child,每一个child就是new ImageView()得来。child的位置也就是通过LayoutParams来设置margin值，主要就是top和left两个方位

 LayoutParams params1 = new LayoutParams((int) unitWidth * 3 / 2 - 2 * px, (int) (unitWidth * 3 / 2));
                params1.topMargin = 0;
                params1.leftMargin = 0;
                ImageView imageView1 = new ImageView(getContext());
                imageView1.setLayoutParams(params1);
                imgs.add(imageView1);
                imageView1.setScaleType(ImageView.ScaleType.CENTER_CROP);

                Glide.with(context)
                        .load(data.get(0))
                        /*.placeholder(R.drawable.gridview_addpic)*/
                        .crossFade()
                        .diskCacheStrategy(DiskCacheStrategy.ALL) // 设置本地缓存,缓存源文件和目标图像
                        .error(R.mipmap.ic_launcher)
                        .placeholder(R.mipmap.ic_launcher)
                        .into(imageView1);

                imageView1.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (onItemClickListener != null) {
                            onItemClickListener.onItemClick(data, 0);
                        }
                    }
                });

                LayoutParams params2 = new LayoutParams((int) unitWidth * 3 / 2 - 2 * px, (int) (unitWidth * 3 / 2));
                params2.topMargin = 0;
                params2.leftMargin = (int) unitWidth * 3 / 2;
                ImageView imageView2 = new ImageView(getContext());
                imageView2.setLayoutParams(params2);
                imgs.add(imageView2);
                imageView2.setScaleType(ImageView.ScaleType.CENTER_CROP);

                Glide.with(context)
                        .load(data.get(1))
                        /*.placeholder(R.drawable.gridview_addpic)*/
                        .crossFade()
                        .diskCacheStrategy(DiskCacheStrategy.ALL) // 设置本地缓存,缓存源文件和目标图像
                        .error(R.mipmap.ic_launcher)
                        .placeholder(R.mipmap.ic_launcher)
                        .into(imageView2);

                imageView2.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (onItemClickListener != null) {
                            onItemClickListener.onItemClick(data, 1);
                        }
                    }
                });

                LayoutParams params3 = new LayoutParams((int) unitWidth * 3 / 2 - 2 * px, (int) (unitWidth * 3 / 2));
                params3.topMargin = (int) unitWidth * 3 / 2 + 2 * px;
                params3.leftMargin = 0;
                ImageView imageView3 = new ImageView(getContext());
                imageView3.setLayoutParams(params3);
                imgs.add(imageView3);
                imageView3.setScaleType(ImageView.ScaleType.CENTER_CROP);

                Glide.with(context)
                        .load(data.get(2))
                        /*.placeholder(R.drawable.gridview_addpic)*/
                        .crossFade()
                        .diskCacheStrategy(DiskCacheStrategy.ALL) // 设置本地缓存,缓存源文件和目标图像
                        .error(R.mipmap.ic_launcher)
                        .placeholder(R.mipmap.ic_launcher)
                        .into(imageView3);

                imageView3.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (onItemClickListener != null) {
                            onItemClickListener.onItemClick(data, 2);
                        }
                    }
                });

下面是一个接口回调，处理点击事件，点击时候返回listview的item对应的imags，是个集合，另外position是你点击images里面的第几张

  private OnItemClickListener onItemClickListener;

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    /**
     * 定义接口
     */
    public interface OnItemClickListener {
        void onItemClick(ArrayList<String> images, int position);
    }

最后就来看一下布局，布局就和普通的RelativeLayout一样，

  <com.leo.supergridlayoutdemo.SuperGridLayout
            android:id="@+id/superlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:visibility="visible" />

最后看看效果吧，哈哈，

下面是完整demo地址，还不太明白可以下载看看，

http://download.csdn.net/detail/greatdaocaoren/9916687

仿朋友圈图片显示

猜你喜欢