logo标签列表

RecyclerView的ItemDecoration间距和Span

androidandroid-recyclerview
10

我有一个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
            }
        }
    }
}

当我想要一个或多个列时，它的效果很好。（如下图所示-所有间距和span都起作用）
enter image description here
enter image description here
问题是我希望使用一个具有不同ViewType和不同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类以使所有项目之间的间距相同？

两列相加，它们之间有空隙，所以它们看起来更宽。当您添加这两列并将它们传递到您现在给定的一半距离时，您必须添加检查。 - Jitesh Mohite
@jiteshmohite 我知道它们正在添加彼此的空间，但找不到解决方案来更改类以实际适用于具有不同跨度的不同ViewHolder。 - Masoud Mohammadi
2个回答
27

要做到这一点，就需要读取视图的布局参数。

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

此方案可允许任意数量的列，并能正确对齐它们。

网格跨列修饰

你能否更新一下这个类？我按照你说的做了，但是当我每行有三列时它就不起作用了。我不确定我做错了什么。然而，每行两列时没有任何问题。 - Masoud Mohammadi
@MasoudMohammadi 我稍后会看一下。我的意思是你应该从 GridSpacingItemDecoration 的构造函数中移除 spanCount，并像所示从布局管理器中读取它。这样做只是为了更大的灵活性。 - David Medenjak
@MasoudMohammadi，我在谈论您当前传递spanCount的_decoration_构造函数。 - David Medenjak
我已经将其删除，并在getItemOffsets中使用int spanCount = ((GridLayoutManager) parent.getLayoutManager()).getSpanCount();。这不正确吗？但是它总是在日志中返回3。 - Masoud Mohammadi
1
@MasoudMohammadi 既然Panczur的方法似乎有效，你应该尝试只将完整的偏移量应用于一侧，而不是每侧的一半。 - David Medenjak
显示剩余7条评论
6
以下是我的建议:
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开发人员来说也足够清晰易懂。主要假设是始终在项目的顶部和左侧添加空格。现在，我们只需要担心如何在右侧添加空格，为此我们需要知道哪个项目在该行的右侧。

spanSize是一个值，它保存有关当前视图占用多少列的信息。如果它占用了该行的所有列，那么显然我们也想添加右侧空格。

这是一个简单的情况。现在，如果我们想要向位于RecycelrView右侧的项目添加右侧空格，我们需要计算它。 allSpanSize是一个不计算项目位置而计算项目跨度大小的值。因此，现在我们只需要进行简单的模运算即可。如果除法的余数为0，则说明当前项目在右侧。

我知道，这可能不是最好的解决方案，因为当您在RecycelrView中有很多项目时，计算可能需要一些时间。为了防止这种情况，您可以存储某些arrayList，其中包含给定项目的视图位置和allSpanSize。

1
你知道你可以移除outRect，view等上的那些 ? 吗？尽管它们是框架方法，但它们很有可能不会为 null。Android Studio只是生成了安全版本，但应该尽可能地移除 ?。 - David Medenjak
我认为循环IntRange(0,position)不是一个好主意，因为你可能有大量的项目，并且每个可见项的框架都会运行一次。再加上spanSizeLookup.getSpanSize()可能比简单的返回整数更昂贵，这可能会导致严重的性能问题。 - David Medenjak
@Panczur，太好了，它完美地运行了，我用Java重新编写了代码。你能否看一下下面图片中的代码，看看是否完全正确。我对Kotlin不是很熟悉，可能会犯一些错误。
  1. http://imgur.com/a/Op9Ah
  2. http://imgur.com/a/A1W4Z
 - Masoud Mohammadi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接