RecyclerView ItemDecoration Spacing and Span

时间：2017-08-13 13:40:48

标签： android android-recyclerview

I have a GridSpacingItemDecoration class that manages spacing and spans.
here is the code:

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
            }
        }
    }
}

It works well when i want to have one or more columns. (shown in pictures below - all spacing and span works)
enter image description here
enter image description here
The problem is that i want to use a RecyclerView that has different ViewTypes with different spanCount. here is how i tried to do it:
defined in class: 

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

defined in method: 

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

here is the result:
enter image description here

The problem is: the space between two columns in the same row (shown in picture). it seems to be 16, twice what i have choosed.
Question: How to customize GridSpacingItemDecoration class to have same space between all items?

2 个答案:

答案 0 :(得分：8)

执行此操作的方法是阅读视图的布局参数。

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

那些layout parameters具有以下属性：

// 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;
  }
}

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

Grid Span Decoration

答案 1 :(得分：4)

这是我的主张：

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。

相关问题
最新问题