RecyclerView ItemDecoration间距和跨度

Question

我有一个GridSpacingItemDecoration类来管理间距和跨度.
这是代码:

public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration
{
    private int spanCount;
    private int spacing;
    private boolean includeEdge;
    private boolean rtl;

    public GridSpacingItemDecoration(boolean rtl, int spanCount, int spacing, boolean includeEdge)
    {
        this.rtl = rtl;
        this.spanCount = spanCount;
        this.spacing = spacing;
        this.includeEdge = includeEdge;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)
    {
        int position = parent.getChildAdapterPosition(view); // item position
        int column = position % spanCount; // item column

        if (includeEdge)
        {
            if (rtl)
            {
                outRect.right = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)
                outRect.left = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)
            }else {
                outRect.left = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)
                outRect.right = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)
            }

            if (position < spanCount)
            { // top edge
                outRect.top = spacing;
            }
            outRect.bottom = spacing; // item bottom
        } else
        {
            if (rtl){
                outRect.right = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)
                outRect.left = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f /    spanCount) * spacing)
            }else {
                outRect.left = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)
                outRect.right = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f /    spanCount) * spacing)
            }

            if (position >= spanCount)
            {
                outRect.top = spacing; // item top
            }
        }
    }
}

当我想要一个或多个列时它很好用.(如下图所示 - 所有间距和跨度均有效)


问题是我想使用具有不同spanType和不同spanCount的RecyclerView.这是我试图这样做的方法:
在课堂上定义:

public static ArrayList<Integer> type = new ArrayList<>();

private int getTypeForPosition(int position)
{
    return type.get(position);
}

private final int HEADER = 0;
private final int CHILD = 1;
private int dpToPx(int dp)
{
    Resources r = getResources();
    return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics()));
}

在方法中定义:

type.add(HEADER);
type.add(CHILD);
type.add(CHILD);
type.add(HEADER);
GridLayoutManager glm = new GridLayoutManager(getContext(), 2);
glm.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
    switch(getTypeForPosition(position)) {
        case HEADER:
            return 2;
        default:
            return 1;
        }
    }
});
recyclerView.setLayoutManager(glm);
recyclerView.addItemDecoration(new GridSpacingItemDecoration(true, 1, dpToPx(8), true));
ClassAdapter classAdapter = new ClassAdapter(getContext(), classes);
recyclerView.setAdapter(classAdapter);

这是结果:

问题是:同一行中两列之间的空间(如图所示).它似乎是16,是我所选择的两倍.
问题:如何自定义GridSpacingItemDecoration类以使所有项之间具有相同的空间？

Answer 1

这样做的方法是读取视图的布局参数.

GridLayoutManager.LayoutParams params =
        (GridLayoutManager.LayoutParams) view.getLayoutParameters()

这些布局参数具有以下属性:

// Returns the current span index of this View.
int getSpanIndex()

// Returns the number of spans occupied by this View.
int getSpanSize()

这样,您就可以在其列一个观点是,它有多少列跨越.

• 如果它在列中,则在0开始侧应用完整偏移,否则仅应用一半

• 如果spanIndex + spanSize等于spanCount(它占据最后一列),则在末尾应用完整的偏移量,否则只应用一半.

为了更好的可重用性,您还应该考虑使用

((GridLayoutManager) parent.getLayoutManager()).getSpanCount()

获取总跨度的计数而不是在构造函数中设置它.这样,您可以动态更改/更新跨度计数,它仍然可以工作.

请不要忘记instanceof在施放之前检查并抛出适当的例外或某事;)

按照这些说明,我们最终得到以下装饰:

class GridSpanDecoration extends RecyclerView.ItemDecoration {
  private final int padding;

  public GridSpanDecoration(int padding) {
    this.padding = padding;
  }

  @Override
  public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);

    GridLayoutManager gridLayoutManager = (GridLayoutManager) parent.getLayoutManager();
    int spanCount = gridLayoutManager.getSpanCount();

    GridLayoutManager.LayoutParams params = (GridLayoutManager.LayoutParams) view.getLayoutParams();

    int spanIndex = params.getSpanIndex();
    int spanSize = params.getSpanSize();

    // If it is in column 0 you apply the full offset on the start side, else only half
    if (spanIndex == 0) {
      outRect.left = padding;
    } else {
      outRect.left = padding / 2;
    }

    // If spanIndex + spanSize equals spanCount (it occupies the last column) you apply the full offset on the end, else only half.
    if (spanIndex + spanSize == spanCount) {
      outRect.right = padding;
    } else {
      outRect.right = padding / 2;
    }

    // just add some vertical padding as well
    outRect.top = padding / 2;
    outRect.bottom = padding / 2;

    if(isLayoutRTL(parent)) {
      int tmp = outRect.left;
      outRect.left = outRect.right;
      outRect.right = tmp;
    }
  }

  @SuppressLint({"NewApi", "WrongConstant"})
  private static boolean isLayoutRTL(RecyclerView parent) {
    return parent.getLayoutDirection() == ViewCompat.LAYOUT_DIRECTION_RTL;
  }
}

这允许任意数量的列并正确对齐它们.

Answer 2

这是我的主张：

class SearchResultItemDecoration(val space: Int, val NUMBER_OF_COLUMNS: Int) : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(outRect: Rect?, view: View?, parent: RecyclerView?, state: RecyclerView.State?) {
        super.getItemOffsets(outRect, view, parent, state)

        addSpaceToView(outRect, parent?.getChildAdapterPosition(view), parent)
    }

    private fun addSpaceToView(outRect: Rect?, position: Int?, parent: RecyclerView?) {
        if (position == null || parent == null)
            return

        val grid = parent.layoutManager as GridLayoutManager
        val spanSize = grid.spanSizeLookup.getSpanSize(position)

        if (spanSize == NUMBER_OF_COLUMNS) {
            outRect?.right = space
        } else {
            var allSpanSize = 0
            for (i: Int in IntRange(0, position)) {
                allSpanSize += grid.spanSizeLookup.getSpanSize(i)
            }
            val currentModuloResult = allSpanSize % NUMBER_OF_COLUMNS
            if (currentModuloResult == 0) {
                outRect?.right = space
            }
        }
        outRect?.left = space
        outRect?.top = space
    }
}

该代码是用Kotlin编写的，但我希望能以Java开发人员的身份阅读它；）因此，主要假设是始终在项目的顶部和左侧添加sapce。现在，我们只需要担心在右侧添加空间，为此，我们需要知道该行右侧的项目。

spanSize是一个值，其中包含有关当前视图占用多少列的信息。如果占用了该行的所有列，那么显然我们也想添加正确的空间。

那是一个简单的情况。现在，如果我们想为项目添加正确的空间，这也是RecycelrView我们需要计算的右侧。allSpanSize是一个不计算商品位置，但计算商品跨度大小的值。这样，我们现在要做的就是使用模运算来进行简单的数学运算。如果除法的其余部分为0，则当前项在右边。

我知道，这可能不是最佳解决方案，因为当您有很多物品时RecycelrView，可能需要一些时间才能计算出来。为了防止这种情况，您可以讲一些arrayList，它保存视图和allSpanSize给定项目的位置。