Android实现带跨图对角线的双图片布局问题求助

云原生阿岚

2026-6-17

期望效果

我想要创建如图所示的布局：包含两张图片，且有一条对角线贯穿这两张图片。以下是我的XML布局代码：

<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_marginVertical="@dimen/margin_100">

    <FrameLayout
        android:id="@+id/frame_first_image"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@drawable/frame_border_selector"
        app:layout_constraintBottom_toTopOf="@+id/frame_second_image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <io.github.florent37.shapeofview.shapes.DiagonalView
            android:id="@+id/diagonalView_top"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginHorizontal="@dimen/margin_10"
            android:background="@color/white"
            app:shape_diagonal_angle="1"
            app:shape_diagonal_position="bottom">

            <com.jsibbold.zoomage.ZoomageView
                android:id="@+id/img_first_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginHorizontal="@dimen/margin_2"
                android:layout_marginVertical="@dimen/margin_2"
                android:contentDescription="@null"
                android:scaleType="matrix"
                android:src="@color/black"
                app:zoomage_animateOnReset="true"
                app:zoomage_autoCenter="true"
                app:zoomage_autoResetMode="UNDER"
                app:zoomage_maxScale="8"
                app:zoomage_minScale="0.6"
                app:zoomage_restrictBounds="false"
                app:zoomage_translatable="true"
                app:zoomage_zoomable="true" />
        </io.github.florent37.shapeofview.shapes.DiagonalView>

    </FrameLayout>

    <FrameLayout
        android:id="@+id/frame_second_image"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@drawable/frame_border_selector"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/frame_first_image">

        <io.github.florent37.shapeofview.shapes.DiagonalView
            android:id="@+id/diagonalView_bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginHorizontal="@dimen/margin_10"
            android:background="@color/white"
            app:shape_diagonal_angle="-1"
            app:shape_diagonal_position="top">

            <com.jsibbold.zoomage.ZoomageView
                android:id="@+id/img_second_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginHorizontal="@dimen/margin_2"
                android:layout_marginVertical="@dimen/margin_2"
                android:contentDescription="@null"
                android:scaleType="matrix"
                android:src="@color/black"
                app:zoomage_animateOnReset="true"
                app:zoomage_autoCenter="true"
                app:zoomage_autoResetMode="UNDER"
                app:zoomage_maxScale="8"
                app:zoomage_minScale="0.6"
                app:zoomage_restrictBounds="false"
                app:zoomage_translatable="true"
                app:zoomage_zoomable="true" />
        </io.github.florent37.shapeofview.shapes.DiagonalView>

    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

我尝试使用第三方库DiagonalView，但对角线角度不符合预期：当前对角线仅从图片右下延伸至图中位置，而我需要让对角线从右下延伸至左下（贯穿两张图片）。请问有什么解决方案？

解决方案

问题根源

你设置的shape_diagonal_angle="1"和shape_diagonal_angle="-1"角度值过小（单位是度数），导致对角线几乎呈水平状态，无法形成贯穿两张图片的斜向切割效果。

方案1：调整角度参数实现对齐对角线

根据布局的宽高比例，设置合适的倾斜角度，确保上下两个DiagonalView的对角线完全对齐：

修改后的核心代码片段：

<!-- 顶部图片的DiagonalView -->
<io.github.florent37.shapeofview.shapes.DiagonalView
    android:id="@+id/diagonalView_top"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginHorizontal="@dimen/margin_10"
    android:background="@color/white"
    app:shape_diagonal_angle="-45" <!-- 调整为-45度，对应从右上到左下的对角线 -->
    app:shape_diagonal_position="bottom">

    <!-- 内部ZoomageView保持不变 -->
</io.github.florent37.shapeofview.shapes.DiagonalView>

<!-- 底部图片的DiagonalView -->
<io.github.florent37.shapeofview.shapes.DiagonalView
    android:id="@+id/diagonalView_bottom"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginHorizontal="@dimen/margin_10"
    android:background="@color/white"
    app:shape_diagonal_angle="-45" <!-- 和顶部保持相同角度，确保对角线对齐 -->
    app:shape_diagonal_position="top">

    <!-- 内部ZoomageView保持不变 -->
</io.github.florent37.shapeofview.shapes.DiagonalView>

如果45度不符合你的布局比例，可以根据布局宽高计算实际角度：例如布局宽度为W、单张图片高度为H，角度应为arctan(H/W)，转换成度数后设置即可。

方案2：用长度参数替代角度，强制对角线横跨布局

如果不想计算角度，直接设置shape_diagonal_length为布局宽度，让对角线横跨整个容器：

<!-- 顶部DiagonalView -->
app:shape_diagonal_length="match_parent"
app:shape_diagonal_position="bottom"
app:shape_diagonal_direction="left" <!-- 指定对角线从右下指向左下 -->

<!-- 底部DiagonalView -->
app:shape_diagonal_length="match_parent"
app:shape_diagonal_position="top"
app:shape_diagonal_direction="left"

方案3：自定义裁剪（无需第三方库）

若不想依赖第三方库，可通过ClipPath实现自定义裁剪，代码示例：

// 顶部图片容器的裁剪逻辑
val topPath = Path().apply {
    moveTo(0f, 0f)
    lineTo(topView.width.toFloat(), 0f)
    lineTo(topView.width.toFloat(), topView.height.toFloat())
    lineTo(0f, topView.height.toFloat() - 120) // 120为裁剪偏移量，按需调整
    close()
}
topView.clipPath = topPath

// 底部图片容器的裁剪逻辑
val bottomPath = Path().apply {
    moveTo(0f, 120f)
    lineTo(bottomView.width.toFloat(), 0f)
    lineTo(bottomView.width.toFloat(), bottomView.height.toFloat())
    lineTo(0f, bottomView.height.toFloat())
    close()
}
bottomView.clipPath = bottomPath

注意事项

确保上下两个裁剪区域的参数完全对齐，避免对角线错位
若使用固定角度，建议在代码中动态计算（根据实际布局尺寸），提升多屏幕适配性

内容的提问来源于stack exchange，提问作者Ngọc Hưng