如何在保持图片宽高比的ImageView上叠加覆盖整个区域的参考网格

我来给你几个实用的解决方案，都是实际开发中验证过的思路，完美解决你的需求：

方案一：用FrameLayout包裹ImageView和自定义网格View #

这个思路最直观，利用FrameLayout的层叠特性，让网格View直接覆盖在ImageView上方，完全不影响ImageView原本的图片缩放和居中逻辑。

具体步骤： #

• 把原来LinearLayout里的ImageView放到FrameLayout中，FrameLayout的尺寸和你原来ImageView的设置保持一致（比如match_parent或者固定宽高）
• 给FrameLayout添加一个自定义的GridOverlayView，设置它的布局参数为match_parent，这样它就会占满整个FrameLayout区域，自然覆盖ImageView的全部范围（包括图片周围的空白背景）
• 在自定义View的onDraw方法中绘制网格，网格会自动适配整个区域大小

自定义网格View代码示例： #

public class GridOverlayView extends View {
    private Paint gridPaint;
    private int gridRows = 10; // 默认10行
    private int gridColumns = 10; // 默认10列

    public GridOverlayView(Context context) {
        super(context);
        init();
    }

    public GridOverlayView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 可选：从xml属性读取自定义配置
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.GridOverlayView);
        gridRows = ta.getInt(R.styleable.GridOverlayView_gridRows, 10);
        gridColumns = ta.getInt(R.styleable.GridOverlayView_gridColumns, 10);
        init();
        ta.recycle();
    }

    private void init() {
        gridPaint = new Paint();
        gridPaint.setColor(Color.BLACK);
        gridPaint.setStrokeWidth(2f);
        gridPaint.setAlpha(128); // 半透明，避免完全遮挡图片
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int viewWidth = getWidth();
        int viewHeight = getHeight();

        // 绘制横向网格线
        float rowInterval = (float) viewHeight / gridRows;
        for (int i = 1; i < gridRows; i++) {
            float yPos = rowInterval * i;
            canvas.drawLine(0, yPos, viewWidth, yPos, gridPaint);
        }

        // 绘制纵向网格线
        float colInterval = (float) viewWidth / gridColumns;
        for (int i = 1; i < gridColumns; i++) {
            float xPos = colInterval * i;
            canvas.drawLine(xPos, 0, xPos, viewHeight, gridPaint);
        }
    }
}

布局文件示例： #

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/photoImageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerInside"
            android:background="#cccccc"/>

        <com.yourpackage.GridOverlayView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:gridRows="8"
            app:gridColumns="8"
            app:gridColor="#FF0000"
            app:gridLineWidth="1dp"/>

    </FrameLayout>
</LinearLayout>

方案二：自定义ImageView，直接在图片上绘制网格 #

如果你不想多套一层布局，可以直接自定义ImageView，重写onDraw方法，先让ImageView正常绘制图片（保持CENTER_INSIDE的效果），然后在同一个Canvas上绘制网格。

自定义ImageView代码示例： #

public class GridImageView extends ImageView {
    private Paint gridPaint;
    private int gridRows = 10;
    private int gridColumns = 10;

    public GridImageView(Context context) {
        super(context);
        init();
    }

    public GridImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.GridOverlayView);
        gridRows = ta.getInt(R.styleable.GridOverlayView_gridRows, 10);
        gridColumns = ta.getInt(R.styleable.GridOverlayView_gridColumns, 10);
        init();
        ta.recycle();
    }

    private void init() {
        gridPaint = new Paint();
        gridPaint.setColor(Color.BLACK);
        gridPaint.setStrokeWidth(2f);
        gridPaint.setAlpha(128);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas); // 先绘制图片，保持原来的CENTER_INSIDE逻辑
        int viewWidth = getWidth();
        int viewHeight = getHeight();

        // 绘制横向网格线
        float rowInterval = (float) viewHeight / gridRows;
        for (int i = 1; i < gridRows; i++) {
            float yPos = rowInterval * i;
            canvas.drawLine(0, yPos, viewWidth, yPos, gridPaint);
        }

        // 绘制纵向网格线
        float colInterval = (float) viewWidth / gridColumns;
        for (int i = 1; i < gridColumns; i++) {
            float xPos = colInterval * i;
            canvas.drawLine(xPos, 0, xPos, viewHeight, gridPaint);
        }
    }
}

布局中直接使用这个自定义ImageView： #

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.yourpackage.GridImageView
        android:id="@+id/gridImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerInside"
        android:background="#cccccc"
        app:gridRows="10"
        app:gridColumns="10"/>

</LinearLayout>

这两个方案都能完美实现你的需求：既保留了图片的宽高比和居中显示，又让网格覆盖整个ImageView的全部区域，包括图片周围的空白背景。你还可以根据需求调整网格的行列数、颜色、线宽和透明度，非常灵活。

备注：内容来源于stack exchange，提问作者user3594510