仿微博或微信的文章多图显示（自定义MultiImageView）

• 按照一般的规矩，先上张图来供大伙看看
  
  如果大致是大伙们需要实现的功能，不烦一观

• 自定义MultiImageView

/**
 * 类似朋友圈或者微博的图片显示（分三种情况：1  2,4   3和其它）
 *
 * @author cgq
 * @since 2018-12-20
 */
public class MultiImageView extends LinearLayout {

    public static int MAX_WIDTH = 0;
    /**
     * 照片的Url列表
     */
    private List<String> imagesList;

    //长度 单位为Pixel

    /**
     * 单张图最大允许宽高
     */
    private int pxOneMaxWandH;
    /**
     * 多张图的宽高
     */
    private int pxMoreWandH = 0;
    /**
     * 两张或者四张的宽高
     */
    private int pxTwoWandH = 0;

    public void setPxImagePadding(int pxImagePadding) {
        this.pxImagePadding = pxImagePadding;
    }

    /**
     * 图片间的间距
     */
    private int pxImagePadding = DensityUtil.dp2px(3);//可以使用自己的工具类
    /**
     * 每行显示最大数
     */
    private int MAX_PER_ROW_COUNT = 3;

    private LayoutParams twoPara, twoParaColumnFirst;

    private LayoutParams morePara, moreParaColumnFirst;
    private LayoutParams rowPara;

    private OnItemClickListener mOnItemClickListener;

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        mOnItemClickListener = onItemClickListener;
    }

    public MultiImageView(Context context) {
        super(context);
    }

    public MultiImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setList(List<String> lists) throws IllegalArgumentException {
        if (lists == null) {
            throw new IllegalArgumentException("imageList is null...");
        }
        imagesList = lists;
        if (MAX_WIDTH > 0) {
            //解决右侧图片和内容对不齐问题
            pxMoreWandH = (MAX_WIDTH - pxImagePadding * 2) / 3;
            pxTwoWandH = (MAX_WIDTH - pxImagePadding) / 2;
            pxOneMaxWandH = MAX_WIDTH * 5 / 7;
            initImageLayoutParams();
        }
        initView();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (MAX_WIDTH == 0) {
            int width = measureWidth(widthMeasureSpec);
            if (width > 0) {
                MAX_WIDTH = width;
                if (imagesList != null && imagesList.size() > 0) {
                    setList(imagesList);
                }
            }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * Determines the width of this view
     *
     * @param measureSpec A measureSpec packed into an int
     * @return The width of the view, honoring constraints from measureSpec
     */
    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text
            // result = (int) mTextPaint.measureText(mText) + getPaddingLeft()
            // + getPaddingRight();
            if (specMode == MeasureSpec.AT_MOST) {
                // Respect AT_MOST value if that was what is called for by
                // measureSpec
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    private void initImageLayoutParams() {
        int wrap = LayoutParams.WRAP_CONTENT;
        int match = LayoutParams.MATCH_PARENT;

        twoParaColumnFirst = new LayoutParams(pxTwoWandH, pxTwoWandH);
        twoPara = new LayoutParams(pxTwoWandH, pxTwoWandH);
        twoPara.setMargins(pxImagePadding, 0, 0, 0);

        moreParaColumnFirst = new LayoutParams(pxMoreWandH, pxMoreWandH);
        morePara = new LayoutParams(pxMoreWandH, pxMoreWandH);
        morePara.setMargins(pxImagePadding, 0, 0, 0);

        rowPara = new LayoutParams(match, wrap);
    }

    /**
     * 根据imageView的数量初始化不同的View布局,还要为每一个View作点击效果
     */
    private void initView() {
        this.setOrientation(VERTICAL);
        this.removeAllViews();
        if (MAX_WIDTH == 0) {
            //为了触发onMeasure()来测量MultiImageView的最大宽度，MultiImageView的宽设置为match_parent
            addView(new View(getContext()));
            return;
        }

        if (imagesList == null || imagesList.size() == 0) {
            return;
        }

        if (imagesList.size() == 1) {
            addView(createImageView(0, false));
        } else {
            int allCount = imagesList.size();
            if (4 == allCount || 2 == allCount) {
                MAX_PER_ROW_COUNT = 2;
            } else {
                MAX_PER_ROW_COUNT = 3;
            }
            // 行数
            int rowCount = allCount / MAX_PER_ROW_COUNT
                    + (allCount % MAX_PER_ROW_COUNT > 0 ? 1 : 0);
            for (int rowCursor = 0; rowCursor < rowCount; rowCursor++) {
                LinearLayout rowLayout = new LinearLayout(getContext());
                rowLayout.setOrientation(LinearLayout.HORIZONTAL);

                rowLayout.setLayoutParams(rowPara);
                if (rowCursor != 0) {
                    rowLayout.setPadding(0, pxImagePadding, 0, 0);
                }
                //每行的列数
                int columnCount = allCount % MAX_PER_ROW_COUNT == 0 ? MAX_PER_ROW_COUNT
                        : allCount % MAX_PER_ROW_COUNT;
                if (rowCursor != rowCount - 1) {
                    columnCount = MAX_PER_ROW_COUNT;
                }
                addView(rowLayout);
                // 行偏移
                int rowOffset = rowCursor * MAX_PER_ROW_COUNT;
                for (int columnCursor = 0; columnCursor < columnCount; columnCursor++) {
                    int position = columnCursor + rowOffset;
                    rowLayout.addView(createImageView(position, true));
                }
            }
        }
    }

    private ImageView createImageView(int position, final boolean isMultiImage) {
        ImageView imageView = new ImageView(getContext());
        if (isMultiImage) {
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            if (2 == MAX_PER_ROW_COUNT) {
                //2张或者4张图的情况
                imageView.setLayoutParams(0 == position % MAX_PER_ROW_COUNT ? twoParaColumnFirst : twoPara);
            } else {
                imageView.setLayoutParams(0 == position % MAX_PER_ROW_COUNT ? moreParaColumnFirst : morePara);
            }

        } else {
            imageView.setAdjustViewBounds(true);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setLayoutParams(new LayoutParams(pxOneMaxWandH, pxOneMaxWandH));
        }

        imageView.setId(imagesList.get(position).hashCode());
        imageView.setOnClickListener(new ImageOnClickListener(position));
        
		//使用glide加载图片
        Glide.with(getContext())
                .asBitmap()
                .load(imagesList.get(position))
                .into(imageView);


        return imageView;
    }

    private class ImageOnClickListener implements View.OnClickListener {

        private int position;

        public ImageOnClickListener(int position) {
            this.position = position;
        }

        @Override
        public void onClick(View view) {
            if (mOnItemClickListener != null) {
                mOnItemClickListener.onItemClick(view, position);
            }
        }
    }

    public interface OnItemClickListener {
        /**
         * 点击图片
         *
         * @param view
         * @param position
         */
        void onItemClick(View view, int position);
    }
}

• 工具类

import android.content.res.Resources;
import android.util.TypedValue;

public class DensityUtil {
    /**
     * dp转px
     */
    public static int dp2px(float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, Resources.getSystem().getDisplayMetrics());
    }

    /**
     * sp转px
     */
    public static int sp2px(float spVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, Resources.getSystem().getDisplayMetrics());
    }

    /**
     * px转dp
     */
    public static float px2dp(float pxVal) {
        final float scale = Resources.getSystem().getDisplayMetrics().density;
        return (pxVal / scale);
    }

    /**
     * px转sp
     */
    public static float px2sp(float pxVal) {
        return (pxVal / Resources.getSystem().getDisplayMetrics().scaledDensity);
    }

}

• 具体使用
• app.gradle中添加依赖 implementation 'com.github.bumptech.glide:glide:4.8.0'
• AndroidManifest.xml中配置联网权限 <uses-permission android:name="android.permission.INTERNET" />
• 使用方式：

        multiImageView.setPxImagePadding(DensityUtil.dp2px(11));
        multiImageView.setList(imgs = getImgList());//getImgList返回图片url数据集
        multiImageView.setOnItemClickListener(new MultiImageView.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(MainActivity.this, "click -> " + position, Toast.LENGTH_SHORT).show();
            }
        });

• 熊猫图片url

  private static final String IMG_URL = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549879555024&di=6c201a99f1633ebf2f688e6c9c7972d2&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F214%2Fw580h434%2F20180920%2F-cZ4-hhuhism4329679.jpg";

• Thank you for watching. If you have any suggestions, please point them out！