如何製作動態對角線視圖列表

Question

我將對角線切割佈局添加到RecyclerView，但我沒有得到預期的結果。我的第二個觀點start with end of first view, and thats obvious。但我想要的是，每個視圖都是這樣的join with each-other。

我的輸出：

，這就是我想要的東西：

CutLayout.class：

public class CutLayout extends FrameLayout { 
    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
    private Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR); 
    private Path path = new Path(); 

    public CutLayout(Context context) { 
     super(context); 
    } 

    public CutLayout(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public CutLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
    } 

    @TargetApi(Build.VERSION_CODES.LOLLIPOP) 
    public CutLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { 
     super(context, attrs, defStyleAttr, defStyleRes); 
    } 

    @Override 
    protected void dispatchDraw(Canvas canvas) { 
     int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG); 
     super.dispatchDraw(canvas); 

     paint.setXfermode(pdMode); 
     path.reset(); 
     path.moveTo(0, getHeight()); 
     path.lineTo(getWidth(), getHeight()); 
     path.lineTo(getWidth(), getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics())); 
     path.close(); 
     canvas.drawPath(path, paint); 

     canvas.restoreToCount(saveCount); 
     paint.setXfermode(null); 
    } 
} 

item.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:orientation="vertical" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context=".SampleActivity"> 

    <com.yarolegovich.slidingrootnav.sample.helper.CutLayout 
     android:layout_width="match_parent" 
     android:layout_height="200dp"> 

     <ImageView 
      android:scaleType="centerCrop" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:src="@drawable/homebulding" /> 
    </com.yarolegovich.slidingrootnav.sample.helper.CutLayout> 
</LinearLayout> 

Answer 1

更改您的CutLayout有像這樣在上面相同的路徑：

public class CutLayout extends FrameLayout { 
    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
    private Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR); 
    private Path path = new Path(); 

    public CutLayout(Context context) { 
     super(context); 
    } 

    public CutLayout(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public CutLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
    } 

    @TargetApi(Build.VERSION_CODES.LOLLIPOP) 
    public CutLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { 
     super(context, attrs, defStyleAttr, defStyleRes); 
    } 

    @Override 
    protected void dispatchDraw(Canvas canvas) { 
     int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG); 
     super.dispatchDraw(canvas); 

     paint.setXfermode(pdMode); 
     path.reset(); 

     path.moveTo(0, 0); 
     path.lineTo(getWidth(), 0); 
     path.lineTo(0, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics())); 
     path.close(); 
     canvas.drawPath(path, paint); 

     path.reset(); 

     path.moveTo(0, getHeight()); 
     path.lineTo(getWidth(), getHeight()); 
     path.lineTo(getWidth(), getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics())); 
     path.close(); 
     canvas.drawPath(path, paint); 

     canvas.restoreToCount(saveCount); 
     paint.setXfermode(null); 
    } 
} 

然後，所有你需要做的就是創建一個項目裝飾爲您可接受負頂部邊距的回收站視圖

public class NegativeTopItemDecorator extends RecyclerView.ItemDecoration{ 
    private final int mTopMargin; 

    public NegativeTopItemDecorator(int topMargin) { 
     this.mTopMargin = topMargin; 
    } 


    @Override 
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { 
     outRect.top = mTopMargin; 
    } 
} 

並將其添加到您的RecyclerView

int topMargin = - (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics()); 
NegativeTopItemDecorator itemDecorator = new NegativeTopItemDecorator(topMargin); 
mRecyclerView.addItemDecoration(itemDecorator); 

這會給你的輸出如下