使用RecyclerView GridLayoutManager和ItemDecoration实现列间距时,项目的宽度不相同。

24
我正在尝试使用RecyclerView和GridLayoutManager制作一个三列网格,并使用ItemDecoration来制作列间距,现在的问题是第三列中项目的宽度比第一列和第二列中的项目小!请参见下面的屏幕截图。
如果我不将自定义的ItemDecoration添加到RecyclerView中,一切都正常。
以下是我的代码:
MainActivity.java:
public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private MyAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        mAdapter = new MyAdapter();
        mRecyclerView.setAdapter(mAdapter);

        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3);
        mRecyclerView.setLayoutManager(gridLayoutManager);

        int horizontalSpacing = 20;
        int verticalSpacing = 10;
        SpacingDecoration decoration = new SpacingDecoration(horizontalSpacing, verticalSpacing, true);
        mRecyclerView.addItemDecoration(decoration);
    }


    private static class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

        private int[] mColors = new int[]{Color.RED, Color.BLUE, Color.MAGENTA};

        private static class ItemHolder extends RecyclerView.ViewHolder {

            public MyTextView title;

            public ItemHolder(View itemView) {
                super(itemView);
                title = (MyTextView) itemView.findViewById(android.R.id.text1);
                title.setTextColor(Color.WHITE);
            }
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
            ItemHolder holder = new ItemHolder(itemView);
            holder.itemView.setOnClickListener(itemClickListener);
            return holder;
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder rHolder, int position) {
            ItemHolder holder = (ItemHolder) rHolder;

            holder.title.setText(String.format("[%d]width:%d", position, holder.itemView.getWidth()));
            holder.itemView.setBackgroundColor(mColors[position % mColors.length]);
            holder.itemView.setTag(position);
            holder.title.setTag(position);
        }

        @Override
        public int getItemCount() {
            return 50;
        }

        private View.OnClickListener itemClickListener = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = (int) v.getTag();
                showText(v.getContext(), String.format("[%d]->width:%d", position, v.getWidth()));
            }
        };

    }

    public static class SpacingDecoration extends RecyclerView.ItemDecoration {

        private int mHorizontalSpacing = 5;
        private int mVerticalSpacing = 5;
        private boolean isSetMargin = true;

        public SpacingDecoration(int hSpacing, int vSpacing, boolean setMargin) {
            isSetMargin = setMargin;
            mHorizontalSpacing = hSpacing;
            mVerticalSpacing = vSpacing;
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            boolean isSetMarginLeftAndRight = this.isSetMargin;
            int bottomOffset = mVerticalSpacing;
            int leftOffset = 0;
            int rightOffset = 0;

            RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) view.getLayoutParams();
            if (parent.getLayoutManager() instanceof GridLayoutManager) {
                GridLayoutManager lm = (GridLayoutManager) parent.getLayoutManager();
                GridLayoutManager.LayoutParams gridLp = (GridLayoutManager.LayoutParams) lp;

                if (gridLp.getSpanSize() == lm.getSpanCount()) {
                    // Current item is occupied the whole row
                    // We just need to care about margin left and right now
                    if (isSetMarginLeftAndRight) {
                        leftOffset = mHorizontalSpacing;
                        rightOffset = mHorizontalSpacing;
                    }
                } else {
                    // Current item isn't occupied the whole row
                    if (gridLp.getSpanIndex() > 0) {
                        // Set space between items in one row
                        leftOffset = mHorizontalSpacing;
                    } else if (gridLp.getSpanIndex() == 0 && isSetMarginLeftAndRight) {
                        // Set left margin of a row
                        leftOffset = mHorizontalSpacing;
                    }
                    if (gridLp.getSpanIndex() == lm.getSpanCount() - gridLp.getSpanSize() && isSetMarginLeftAndRight) {
                        // Set right margin of a row
                        rightOffset = mHorizontalSpacing;
                    }
                }
            }
            outRect.set(leftOffset, 0, rightOffset, bottomOffset);
        }
    }


    private static Toast sToast;

    public static void showText(Context context, String text) {
        if (sToast != null) {
            sToast.cancel();
        }
        sToast = Toast.makeText(context, text, Toast.LENGTH_LONG);
        sToast.show();
    }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <com.example.liuqing.rvgldemo.MyTextView
        android:id="@android:id/text1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        android:textColor="#ffffff"
        android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>

MyTextView.java

public class MyTextView extends TextView {

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

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

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

    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {
        super.onWindowFocusChanged(hasWindowFocus);
        if (hasWindowFocus) {
            setText("[" + getTag() + "]width:" + getWidth());
        }
    }
}

如果有人能解释这个问题,那将会非常感激。

2个回答

24

我自己找到了问题的原因。在ItemDecoration中设置的偏移量被视为项的尺寸(宽度和高度)的一部分!

让我们看看上面问题中的示例代码和屏幕截图。屏幕截图的宽度为480像素,这里有3列,每个项目的宽度为480/3=160像素。在SpacingDecoration中,我在第一列和第二列添加了一个左偏移(20像素),所以第一列和第二列项目的内容宽度为160-20=140,然后我在第三列项目上添加了左右偏移,所以第三列项目的内容宽度为160-20-20=120。

现在我们想让每个项目的内容(彩色矩形)具有相同的宽度,我们必须计算每列项目将一行的总间距分成多少份,但我不太擅长写详细的分析,所以我在这里写了一个粗略的计算过程,您可以直接跳到结论。

spacing = 20
columnCount = 3
rowWidth = 480
itemWidth = rowWidth / columnCount
itemOccupiedSpacing = (spacing * (columnCount + 1)) / columnCount = spacing + spacing * (1/columnCount)
itemContentWidth = itemWidth - itemOccupiedSpacing

firstItemLeftOffset = spacing = spacing * (3/columnCount)
firstItemRightOffset = itemOccupiedSpacing - spacing = spacing * (1/columnCount)
secondItemLeftOffset = spacing - firstRightOffset = spacing * (2/columnCount)
secondItemRightOffset = itemOccupiedSpacing - secondLeftOffset = spacing * (2/columnCount)
thirdItemLeftOffset = itemOccupiedSpacing - secondLeftOffset = spacing * (1/columnCount)
thirdItemRightOffset = spacing = spacing * (3/columnCount)
我们可以得出结论:
itemLeftOffset = spacing * ((columnCount - colunmnIndex) / columnCount)
itemRightOffset = spacing * ((colunmnIndex + 1) / columnCount)

columnIndex大于0且小于columnCount。


以下是我定制的ItemDecoration用于添加间距,它在LinearLayoutManagerGridLayoutManagerStaggeredGridLayoutManager中都可以很好地工作,并且所有项目的宽度相同。你可以直接在你的代码中使用它。

public class SpacingDecoration extends ItemDecoration {

    private int mHorizontalSpacing = 0;
    private int mVerticalSpacing = 0;
    private boolean mIncludeEdge = false;

    public SpacingDecoration(int hSpacing, int vSpacing, boolean includeEdge) {
        mHorizontalSpacing = hSpacing;
        mVerticalSpacing = vSpacing;
        mIncludeEdge = includeEdge;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        // Only handle the vertical situation
        int position = parent.getChildAdapterPosition(view);
        if (parent.getLayoutManager() instanceof GridLayoutManager) {
            GridLayoutManager layoutManager = (GridLayoutManager) parent.getLayoutManager();
            int spanCount = layoutManager.getSpanCount();
            int column = position % spanCount;
            getGridItemOffsets(outRect, position, column, spanCount);
        } else if (parent.getLayoutManager() instanceof StaggeredGridLayoutManager) {
            StaggeredGridLayoutManager layoutManager = (StaggeredGridLayoutManager) parent.getLayoutManager();
            int spanCount = layoutManager.getSpanCount();
            StaggeredGridLayoutManager.LayoutParams lp = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams();
            int column = lp.getSpanIndex();
            getGridItemOffsets(outRect, position, column, spanCount);
        } else if (parent.getLayoutManager() instanceof LinearLayoutManager) {
            outRect.left = mHorizontalSpacing;
            outRect.right = mHorizontalSpacing;
            if (mIncludeEdge) {
                if (position == 0) {
                    outRect.top = mVerticalSpacing;
                }
                outRect.bottom = mVerticalSpacing;
            } else {
                if (position > 0) {
                    outRect.top = mVerticalSpacing;
                }
            }
        }
    }

    private void getGridItemOffsets(Rect outRect, int position, int column, int spanCount) {
        if (mIncludeEdge) {
            outRect.left = mHorizontalSpacing * (spanCount - column) / spanCount;
            outRect.right = mHorizontalSpacing * (column + 1) / spanCount;
            if (position < spanCount) {
                outRect.top = mVerticalSpacing;
            }
            outRect.bottom = mVerticalSpacing;
        } else {
            outRect.left = mHorizontalSpacing * column / spanCount;
            outRect.right = mHorizontalSpacing * (spanCount - 1 - column) / spanCount;
            if (position >= spanCount) {
                outRect.top = mVerticalSpacing;
            }
        }
    }
}

2
在你的公式中,右边界的+1实际上不是+1,它应该是+单元格的spanSize。(你可以通过spanSizeLookup或单元格的LayoutParams来检索span大小) - pdegand59
@pdegand59 这个单元格的span size应该是多少?它应该怎么重构? - yras8

4
我写了一个更加健壮的ItemDecoration,基于@AvatarQing的答案:SCommonItemDecoration
您可以设置相同的垂直或水平间距,除此之外,您还可以为不同类型的项目设置不同的间距。 enter image description here

感谢分享,@Bos!您的类的关键部分现在已经包含并改进为 https://github.com/davideas/FlexibleAdapter 库以处理更高级的功能。 - Davideas

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接