Android布局对角线切割

Question

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

的样机看起来像这样：

我试图用对角布局库，例如https://github.com/florent37/DiagonalLayout但我不能似乎得到的图像的右侧和第二布局与左此切图书馆或自定义视图。

任何帮助，将不胜感激。

Answer 1

可以绘制每一个ViewGroup的背景由你自己。

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

1. 您需要扩展所需ViewGroup：

   public class DiagonalLayout extends LinearLayout 
   

2. 覆盖功能：

   protected void dispatchDraw(Canvas canvas)

3. 填写方法d以上。下面是示例代码：

   @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); 
   } 
   

代码上面的效果是：

什么上面的代码的作用是：

1. 上绘制多边形左边。
2. 保存Canvas状态，夹Canvas到多边形，并用彩色
3. 填充它还原Canvas到原始大小，绘制第二多边形

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

Answer 2

似乎切口方向和角度与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>