Android 布局对角线切割

Question

如何将布局（LinearLayout 或 RelativeLayout）剪切成对角线，内容在里面？

模型看起来像这样：

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

如有任何帮助，我们将不胜感激。

Answer 1

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

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

您需要处理 对角线: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>

Answer 2

您可以自己绘制每个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) 方法而不是用红色填充它。

Android 布局对角线切割

Android layout diagonal cut

android

android-layout

diagonal