android多圖顯示，多出圖片以文字提示 1 需要用到的知識 2 問題 3 完全代碼

可以控制最多顯示多少個，多餘最大數量則在最後一行以文字提示，通過控制maxSize大小來控制最多顯示圖片數量。效果如下圖所示

• app:maxSize="2"

  
  

• app:maxSize="5"

  
  

• app:maxSize="9"

  
  

只有一行顯示圖片，多出來的圖在最後一張圖上顯示圖片總數量。

1 需要用到的知識

• MeasureSpec.getSize(widthMeasureSpec)
  指的是總寬度，包含padding的值
• setMeasuredDimension(width, height)
  設置測量的尺寸。重寫onMeasure後需要調用該方法，否則自定義的控件不會顯示。
• generateDefaultLayoutParams()
  使用默認的佈局參數，寬高都是wrap_content
• textView.bringToFront()
  將視圖圖層放在最上層顯示
• textView.setBackgroundColor(0x80000000)
  設置背景半透明
• FontMetrics
  FontMetrics爲字體度量，指對於指定字號的某種字體，在度量方面的各種屬性，其描述參數包括：

• baseline：字符基線
• ascent：字符最高點到baseline的推薦距離
• top：字符最高點到baseline的最大距離
• descent：字符最低點到baseline的推薦距離
• bottom：字符最低點到baseline的最大距離
• leading：行間距，即前一行的descent與下一行的ascent之間的距離

參考圖片

• getTextBounds
  獲取文本內容矩形

2 問題

1. 文本沒有居中，使用textView.setGravity(Gravity.CENTER)只能水平居中顯示。
   解決方法：

                    //設置文字位置
                    // 1.用FontMetrics對象計算高度
                    Paint.FontMetricsInt fontMetricsInt = textView.getPaint().getFontMetricsInt();
                    int textHeight = fontMetricsInt.bottom - fontMetricsInt.top;//文本高度
                    int paddingTop = (mImageSize - textHeight) / 2;
                    //方法一：設置居中,setGravity(Gravity.CENTER)只顯示爲水平居中，所以需要設置padding
                    textView.setPadding(0, paddingTop, 0, paddingTop);
                    textView.setGravity(Gravity.CENTER);

                   //方法二:設置居中
//                    Rect bounds = new Rect();
//                    textView.getPaint().getTextBounds(text, 0, text.length(), bounds);
//                    int textWidth = bounds.right - bounds.left;
//                    int paddingLeft = (mImageSize - textWidth) / 2;
//                    textView.setPadding(paddingLeft, paddingTop, 0, 0);

3 完全代碼

ThreeImageView.java

package com.yds.jianshulib.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.yds.jianshulib.R;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by yds
 * on 2020/3/11.
 */
public class ThreeImageView<T> extends ViewGroup {
    private Context mContext;
    private int mGap;//圖片間距
    private int mSingleImgSize;//單張圖片尺寸
    private int mMaxSize = 3;//最大圖片數
    private List<ImageView> mImageViewList = new ArrayList<>();
    private List<T> mImgDataList;
    private int mImageSize;//圖片大小
    private int mRowCount;//行數，用於後續擴展
    private int mColumnCount;//列數
    private TextView textView;

    public ThreeImageView(Context context) {
        this(context, null);
    }

    public ThreeImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ThreeImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        this.mContext = context;
        //自定義xml屬性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ThreeImageView);
        this.mGap = (int) typedArray.getDimension(R.styleable.ThreeImageView_imgGap, 0);
        this.mSingleImgSize = typedArray.getDimensionPixelSize(R.styleable.ThreeImageView_singleImgSize, -1);
        this.mMaxSize = typedArray.getInteger(R.styleable.ThreeImageView_maxSize, 3);
        typedArray.recycle();
    }

    private void layoutChildrenView() {
        if (mImgDataList == null) return;
        int showChildrenCount = getNeedShowCount(mImgDataList.size());
        layoutMaxCountChildrenView(showChildrenCount);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        layoutChildrenView();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //獲取總寬度
        int width = MeasureSpec.getSize(widthMeasureSpec);
        //獲取總高度
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //控件內容的總寬度
        int totalWidth = width - getPaddingLeft() - getPaddingRight();
        if (mImgDataList != null && mImgDataList.size() > 0) {
            //如果圖片只有一個且單個圖片尺寸不爲-1
            if (mImgDataList.size() == 1 && mSingleImgSize != -1) {
                //圖片尺寸取總寬度與單個圖片寬度中的較小值
                mImageSize = mSingleImgSize > totalWidth ? totalWidth : mSingleImgSize;
            } else {
                //如果圖片不止有一個，則圖片尺寸爲（總寬度-圖片間總間距）/圖片數量
                mImageSize = (totalWidth - mGap * (mColumnCount - 1)) / mColumnCount;
            }
            //（圖片尺寸*行數）+總間距+上內邊距+下內邊距   設置行數是爲後續擴展
            height = mImageSize * mRowCount + mGap * (mRowCount - 1) + getPaddingTop() + getPaddingBottom();
        }
        //設置測量的尺寸
        setMeasuredDimension(width, height);
    }


    private void layoutMaxCountChildrenView(int childrenCount) {
        int left = 0, top = 0, right=0, bottom=0;
        for (int i = 0; i < childrenCount; i++) {
            ImageView childrenView = (ImageView) getChildAt(i);
            childrenView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            left = getPaddingLeft()+i%3*mImageSize+i%3*mGap;
            top = getPaddingTop()+i/3*mImageSize+i/3*mGap;
            right = left+mImageSize;
            bottom = top + mImageSize;
            childrenView.layout(left,top,right,bottom);
            Glide.with(mContext).load(mImgDataList.get(i)).into(childrenView);
        }
        showImageAndText(left,top,right,bottom);
    }

    private void showImageAndText(int left,int top,int right,int bottom){

        if (mImgDataList.size() > mMaxSize) {
            if (textView != null) {
                textView.bringToFront();
                //設置字體大小
                String text = "共" + mImgDataList.size() + "張圖";
                int textSize = px2sp(mContext, mImageSize / 6);
                textView.setTextSize(textSize);
                textView.setText(text);

                //設置文本顏色及背景半透明
                textView.setTextColor(Color.WHITE);
                textView.setBackgroundColor(0x80000000);

                //設置文字位置
                // 1.用FontMetrics對象計算高度
                Paint.FontMetricsInt fontMetricsInt = textView.getPaint().getFontMetricsInt();
                int textHeight = fontMetricsInt.bottom - fontMetricsInt.top;//文本高度
                int paddingTop = (mImageSize - textHeight) / 2;
                //方法一：設置居中,setGravity(Gravity.CENTER)只顯示爲水平居中，所以需要設置padding
                textView.setPadding(0, paddingTop, 0, paddingTop);
                textView.setGravity(Gravity.CENTER);

                //方法二:設置居中
//                    Rect bounds = new Rect();
//                    textView.getPaint().getTextBounds(text, 0, text.length(), bounds);
//                    int textWidth = bounds.right - bounds.left;
//                    int paddingLeft = (mImageSize - textWidth) / 2;
//                    textView.setPadding(paddingLeft, paddingTop, 0, 0);

                textView.layout(left, top, right, bottom);
                //這裏設置只會顯示水平居中，所以需要上面的padding

            }
        }
    }

    /**
     * 獲取需要顯示的數量
     *
     * @param size
     * @return
     */
    private int getNeedShowCount(int size) {
        //如果size大於最大顯示數量，則用最大顯示數量
        if (mMaxSize > 0 && size > mMaxSize) {
            return mMaxSize;
        } else {
            //如果size小於最大顯示數量，則用size顯示數量
            return size;
        }
    }

    /**
     * 設置圖片數據
     *
     * @param list
     */
    public void setImagesData(List<T> list) {
        mImgDataList = list;
        removeAllViews();
        if (list == null || list.size() == 0) {
            //如果圖片列表爲空，則隱藏控件
            this.setVisibility(GONE);
        } else {
            //如果圖片列表不爲空，則顯示
            this.setVisibility(VISIBLE);
        }
        //獲取需要顯示的數量
        int showCount = getNeedShowCount(list.size());
        //計算參數，根據需要顯示的數量計算行數和列數
        int[] params = calculateParam(showCount);
        mRowCount = params[0];//行數
        mColumnCount = params[1];//列數
        for (int i = 0; i < showCount; i++) {
            ImageView iv = getImageView(i);
            if (iv == null) {
                return;
            }
            addView(iv, generateDefaultLayoutParams());
            if (i == mMaxSize - 1 && list.size() > mMaxSize) {
                textView = new TextView(mContext);
                addView(textView, generateDefaultLayoutParams());
            }
        }
        requestLayout();
    }

    protected int[] calculateParam(int imageSize) {
        int[] params = new int[2];
        params[0] = imageSize / 3 + (imageSize % 3 == 0 ? 0 : 1);
        params[1] = 3;
        return params;
    }

    private ImageView getImageView(final int position) {
        if (position < mImageViewList.size()) {
            return mImageViewList.get(position);
        } else {
            ImageView imageView = new ImageView(mContext);
            mImageViewList.add(imageView);
            return imageView;
        }
    }

    public void setGap(int gap) {
        this.mGap = gap;
    }

    public int getGap() {
        return mGap;
    }

    /**
     * 設置只有一張圖片時的尺寸大小
     *
     * @param singleImgSize 單張圖片的尺寸大小
     */
    public void setSingleImgSize(int singleImgSize) {
        mSingleImgSize = singleImgSize;
    }

    /**
     * 設置最大圖片數
     *
     * @param maxSize 最大圖片數
     */
    public void setMaxSize(int maxSize) {
        mMaxSize = maxSize;
    }

    private int px2sp(Context context, float pxValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (pxValue / fontScale + 0.5f);
    }
}

res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ThreeImageView">
        <attr name="singleImgSize" format="dimension"/>
        <attr name="imgGap" format="dimension"/>
        <attr name="maxSize" format="integer"/>
    </declare-styleable>
</resources>

使用

    <com.yds.jianshulib.widget.ThreeImageView
        android:id="@+id/image_three"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:imgGap="10dp"
        app:maxSize="3"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        app:singleImgSize="50dp"
        android:paddingBottom="10dp"
        />

List<Integer> mList = new ArrayList<>();
mList.add(R.drawable.test01);
mList.add(R.drawable.test02);
mList.add(R.drawable.test03);
mList.add(R.drawable.test04);

mImageView = findViewById(R.id.image_three);
mImageView.setImagesData(mList);

源碼地址：https://github.com/Yedongsheng/Jianshu
源碼地址：https://github.com/ydslib/MultiImageView