直播購物源碼仿朋友圈圖片顯示

很多項目都會有一個功能，就是仿朋友圈一樣的動態顯示，但這個裏面有個問題就是圖片的擺放是怎樣的呢？用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" />