Androidレイアウト対角線カット

Question

コンテンツを内側に斜めにレイアウト（LinearLayoutまたはRelativeLayout）をカットするにはどうすればよいですか？

モックアップは、以下のようになります。

私はhttps://github.com/florent37/DiagonalLayoutのような斜めのレイアウトライブラリを使用してみましたが、私は画像の右側にととの第2のレイアウトの左側に、このカットを得るように見えるカントライブラリまたはカスタムビュー。

ご協力いただければ幸いです。

Answer 1

あなたは、すべてのViewGroupの背景を描くことができます自分で。

public class DiagonalLayout extends LinearLayout 

オーバーライド機能：

protected void dispatchDraw(Canvas canvas)

1. あなたはViewGroup希望を拡張する必要があります。

   いくつかの重要なこの溶液中のポイントがあります。メトを埋める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と描画、元のサイズにCanvasを復元色
3. でそれを埋める第二のポリゴン

、ビットマップを描画する代わりに、赤色でそれを充填する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と2 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>