Question

如何使用内容对角切割布局（LinearLayout或RelativeLayout）？

模型看起来像那样：

我尝试使用像https://github.com/florent37/DiagonalLayout这样的对角线布局库，但我似乎无法在图像的右侧和第二个布局的左侧使用库或自定义视图进行此剪切。

任何帮助都将不胜感激。

Answer 1

您可以自己绘制每个ViewGroup的背景。

此解决方案中有一些关键点：

您需要扩展所需的ViewGroup：

public class DiagonalLayout extends LinearLayout

覆盖功能：

protected void dispatchDraw(Canvas canvas)

填写上述方法。以下是示例代码：

@Override
protected void dispatchDraw(Canvas canvas) {
    int height = canvas.getHeight();
    int width = canvas.getWidth();
    Path path = new Path();
    path.moveTo(0, 0);
    path.lineTo(width / 3 + width / 10, 0);
    path.lineTo(width / 3 - width / 10, height);
    path.lineTo(0, height);
    path.close();
    canvas.save();
    canvas.clipPath(path, Region.Op.INTERSECT);
    canvas.drawColor(ContextCompat.getColor(getContext(), android.R.color.holo_red_dark));
    canvas.restore();
    path = new Path();
    path.moveTo(width / 3 + width / 10 + width / 10, 0);
    path.lineTo(width, 0);
    path.lineTo(width, height);
    path.lineTo(width / 3, height);
    path.close();
    canvas.save();
    canvas.clipPath(path, Region.Op.INTERSECT);
    Paint paint = new Paint();
    paint.setStrokeWidth(8);
    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(ContextCompat.getColor(getContext(), android.R.color.black));
    canvas.drawPath(path, paint);
    canvas.restore();
    super.dispatchDraw(canvas);
}

上述代码的效果是：

上面的代码是：

在左侧绘制多边形。
保存Canvas状态，将Canvas剪辑到多边形并用颜色填充
将Canvas恢复为原始尺寸，绘制第二个多边形

要绘制位图，请使用drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint)方法，而不是用红色填充。

Answer 2

似乎切割方向和角度是用xml属性指定的：

diagonal:diagonal_angle=""
diagonal:diagonal_gravity=""

你需要使用 diagonal：diagonal_gravity 才能创建剪辑，我刚看到一些例子，但我认为有了它，你可以决定在哪里剪切。

例如：您的左侧区块应该diagonal:diagonal_gravity="right|top"，应该使用diagonal:diagonal_angle中指定的角度从右上方剪切。

您需要同时编写两个块，因此您需要使用LinearLayout和两个DiagonalLayout

让我知道这样的事情是否可行：

<!-- above this there's an outer Layout block  -->
<!-- This LinearLayout block is to create a container for the images -->
<LinearLayout           
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="orizontal">

    <!-- Left image block -->
    <com.github.florent37.diagonallayout.DiagonalLayout
        android:layout_width="what-you-need"
        android:layout_height="what-you-need"
        app:diagonal_angle="choose"
        app:diagonal_gravity="right|top">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="image" />
    </com.github.florent37.diagonallayout.DiagonalLayout>

    <!-- Right image block -->
    <com.github.florent37.diagonallayout.DiagonalLayout
        android:layout_width="what-you-need"
        android:layout_height="what-you-need"
        app:diagonal_angle="choose"
        app:diagonal_gravity="left|bottom">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="image" />
    </com.github.florent37.diagonallayout.DiagonalLayout>

</LinearLayout>

Android布局对角线切割

2 个答案: