回收站视图中项目之间的边距 Android

Margin between items in recycler view Android

您好,我正在学习本教程:

http://www.journaldev.com/10024/android-recyclerview-and-cardview-example-tutorial

现在我遇到了一个奇怪的问题,RecyclerView 中每个 CardView 项目之间的边距太大了。

问题

如何减少 CardView 中放置在 RecyclerView 中的每个项目之间的边距?

尝试添加RecyclerView.ItemDecoration

要知道如何做到这一点:How to add dividers and spaces between items in RecyclerView?

我遇到了类似的问题,RelativeLayout 作为 recyclerview 中每一行的根元素。

要解决此问题,请找到包含每一行的 xml 文件,并确保根元素的高度是 wrap_content 而不是 match_parent

  1. cards_layout.xml中找到属性card_view:cardUseCompatPadding="true"并删除。启动应用程序,你会发现每个cardview项目之间没有边距。

  2. 添加您喜欢的保证金属性。例如:

    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp" 
    

我做了一个 class 来解决这个问题。 class 为 recyclerView 内的项目设置不同的边距:只有第一行有上边距,只有第一列有左边距。

public class RecyclerViewMargin extends RecyclerView.ItemDecoration {
private final int columns;
private int margin;

/**
 * constructor
 * @param margin desirable margin size in px between the views in the recyclerView
 * @param columns number of columns of the RecyclerView
 */
public RecyclerViewMargin(@IntRange(from=0)int margin ,@IntRange(from=0) int columns ) {
    this.margin = margin;
    this.columns=columns;

}

/**
 * Set different margins for the items inside the recyclerView: no top margin for the first row
 * and no left margin for the first column.
 */
@Override
public void getItemOffsets(Rect outRect, View view,
                           RecyclerView parent, RecyclerView.State state) {

    int position = parent.getChildLayoutPosition(view);
    //set right margin to all
    outRect.right = margin;
    //set bottom margin to all
    outRect.bottom = margin;
    //we only add top margin to the first row
    if (position <columns) {
        outRect.top = margin;
    }
    //add left margin only to the first column
    if(position%columns==0){
        outRect.left = margin;
        }
    }
}

你可以这样在你的recyclerview中设置它

 RecyclerViewMargin decoration = new RecyclerViewMargin(itemMargin, numColumns);
 recyclerView.addItemDecoration(decoration);

回收站视图 match_parent 更改为 wrap_content:

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

项目布局也有变化xml

将父布局高度match_parent改为wrap_content

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />

如果您想在 XML 中执行此操作,只需将 paddingToppaddingLeft 设置为您的 RecyclerView 并等于layoutMarginBottomlayoutMarginRight 的数量到您充气到 RecyclerView 的物品中(反之亦然)。

与其使用 XML 在 RecyclerView 中的项目之间添加边距,不如使用 android 框架提供的 RecyclerView.ItemDecoration 更好。

所以,我创建了一个库来解决这个问题。

https://github.com/TheKhaeng/recycler-view-margin-decoration

像这样在 Recyclerview 项目布局中使用 CardView :

 <android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:card_view="http://schemas.android.com/tools"
        card_view:cardCornerRadius="10dp"
        app:cardBackgroundColor="#ACACAC"
        card_view:cardElevation="5dp"
        app:contentPadding="10dp"
        card_view:cardUseCompatPadding="true">

在 CardView 项目中使用 CompatPadding

在XML中,为了管理 RecyclerView 的项目之间的边距,我是这样做的, 对详细布局的这些属性进行操作(我使用的是 RelativeLayout):

  • android:layout_marginTop
  • android:layout_marginBottom

当然设置这些属性也很重要:

  • android:layout_width="wrap_content"
  • android:layout_height="wrap_content"

下面是一个完整的例子, 这是 项目列表的布局:

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:name="blah.ui.meetings.MeetingEventFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginVertical="2dp"
app:layoutManager="LinearLayoutManager"
tools:context=".ui.meetings.MeetingEventFragment"
tools:listitem="@layout/fragment_meeting_event" />

这是详细布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:background="@drawable/background_border_meetings">
    <TextView
    android:id="@+id/slot_type"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:text="slot_type"
    />
</RelativeLayout>

background_border_meetings只是一个方框:

<?xml version="1.0" encoding="utf-8"?>    
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
    <!-- This is the stroke you want to define -->
    <stroke android:width="4dp"
    android:color="@color/mdtp_line_dark"/>
    <!-- Optional, round your corners -->
    <corners android:bottomLeftRadius="2dp"
    android:topLeftRadius="2dp"
    android:bottomRightRadius="2dp"
    android:topRightRadius="2dp" />
    <gradient android:startColor="@android:color/transparent"
    android:endColor="@android:color/transparent"
    android:angle="90"/>
</shape>

我遇到了类似的问题,在我的例子中,我使用了负版面边距。也许不是最好的主意,但它奏效了。

android:layout_marginStart="-8dp"
android:layout_marginEnd="-8dp"