Many projects will have a function, which is to imitate the dynamic display of the circle of friends, but there is a problem in this is how to put pictures? In the actual process, according to different project requirements, the above two are sometimes not easy to do a good job of picture placement, so you need to customize one. Now let's see how my SuperGridLayout handles different number of pictures, and then show them differently.

First of all, the simulation data, the data added to the list, a HashMap, piece shows the textview,picUrls is a collection, storage image address set. I put aaaaaaaa here, because I later used Glide to load pictures with error method, loading failed to show a custom picture, just to show an effect.

private void initDatas() {
        for (int i = 0; i < 6; i++) {
            HashMap<String, Object> hashMap = new HashMap<>();
            hashMap.put("piece", "common" + (i + 1) + "Zhang");
            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);
    }

There's nothing special about adding adapter s to normal listview.

Next, start looking at the custom SuperGrid Layout. In fact, it is to calculate the size, and then set the size for each picture, and because my SuperGridLayout inherits Relative Layout, that is, ViewGoup, it adds its own child through the addView() method, each child is a new ImageView(). The child's position is to set the margin value through LayoutParams, mainly the top and left directions.

 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) // Setting up local cache, caching source files and target images
                        .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) // Setting up local cache, caching source files and target images
                        .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) // Setting up local cache, caching source files and target images
                        .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);
                        }
                    }
                });

Here's an interface callback that handles click events and returns the image corresponding to the item of listview when clicking. It's a collection, and position is the number of images you click on.

  private OnItemClickListener onItemClickListener;

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

    /**
     * Define interfaces
     */
    public interface OnItemClickListener {
        void onItemClick(ArrayList<String> images, int position);
    }

Finally, let's look at the layout. The layout is the same as the ordinary Relative Layout.

  <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" />

Finally, let's see the effect. Ha-ha.

The following is the full demo address, which is not clear enough to download.

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