Spannable RecyclerView像Snapchat-Discover

Question

我试图使用TwoWayView库创建一个spannable recyclerView,如下图所示:https://github.com/lucasr/twoway-view

但是我无法获得所需的视图,并且遗漏了空单元格.

        final SpannableGridLayoutManager.LayoutParams lp = (SpannableGridLayoutManager.LayoutParams) itemView.getLayoutParams();

        //final int span1 = (itemId == 0 || itemId == 3 ? 2 : 1);
        //final int span2 = (itemId == 0 ? 2 : (itemId == 3 ? 3 : 1));

        int span1 = 0; //h
        int span2 = 0; //w

        switch(itemId)
        {
        case 0:
            span1 = 2;
            span2 = 1;
            break;

        case 1:
            span1 = 2;
            span2 = 1;
            break;

        case 2:
            span1 = 2;
            span2 = 1;
            break;

        case 3:
            span1 = 3;
            span2 = 1;
            break;

        case 4:
            span1 = 3;
            span2 = 1;
            break;

        case 5:
            span1 = 4;
            span2 = 3;
            break;

        case 6:
            span1 = 2;
            span2 = 1;
            break;

        case 7:
            span1 = 2;
            span2 = 1;
            break;

        case 8:
            span1 = 2;
            span2 = 1;
            break;

        case 9:
            span1 = 2;
            span2 = 1;
            break;

        case 10:
            span1 = 4;
            span2 = 3;
            break;
        }

        final int colSpan = span2;
        final int rowSpan = span1;

        if (lp.rowSpan != rowSpan || lp.colSpan != colSpan) 
        {
            lp.rowSpan = rowSpan;
            lp.colSpan = colSpan;
            itemView.setLayoutParams(lp);
        }

XML:

<org.lucasr.twowayview.widget.TwoWayView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    style="@style/TwoWayView"
    app:twowayview_layoutManager="ListLayoutManager"/>

参考:

编辑1 我能够通过在XML和以下跨度中将rowWidth更改为12来解决此问题:

        //PADDING-- left / top / right / bottom
    switch(itemId%11)
    {
    case 0:
        span1 = 4;
        span2 = 7;
        //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
        break;

    case 1:
        span1 = 4;
        span2 = 7;
        //holder.cont_frienddetail.setPadding(dpAsPixels2, dpAsPixels1, dpAsPixels2, dpAsPixels1);
        break;

    case 2:
        span1 = 4;
        span2 = 7;
        //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
        break;

    case 3:
        span1 = 4;
        span2 = 7;
        //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
        break;

    case 4:
        span1 = 8;
        span2 = 14;
        //holder.cont_frienddetail.setPadding(dpAsPixels2, dpAsPixels1, dpAsPixels0, dpAsPixels1);
        break;

    case 5:
        span1 = 4;
        span2 = 7;
        //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
        break;

    case 6:
        span1 = 6;
        span2 = 10;
        //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels2, dpAsPixels1);
        break;

    case 7:
        span1 = 6;
        span2 = 10;
        //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
        break;

    case 8:
        span1 = 8;
        span2 = 14;
        //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels2, dpAsPixels1);
        break;

    case 9:
        span1 = 4;
        span2 = 7;
        ///holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
        break;

    case 10:
        span1 = 4;
        span2 = 7;
        //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
        break;
    }

Answer 1

我可以通过将 XML 中的 rowWidth 更改为 12 以及以下跨度来解决此问题：

        //PADDING-- left / top / right / bottom
switch(itemId%11)
{
case 0:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 1:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels2, dpAsPixels1, dpAsPixels2, dpAsPixels1);
    break;

case 2:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 3:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 4:
    span1 = 8;
    span2 = 14;
    //holder.cont_frienddetail.setPadding(dpAsPixels2, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 5:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 6:
    span1 = 6;
    span2 = 10;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels2, dpAsPixels1);
    break;

case 7:
    span1 = 6;
    span2 = 10;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 8:
    span1 = 8;
    span2 = 14;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels2, dpAsPixels1);
    break;

case 9:
    span1 = 4;
    span2 = 7;
    ///holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 10:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;
}