回收站视图中项目之间的边距 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
。
在cards_layout.xml中找到属性card_view:cardUseCompatPadding="true"
并删除。启动应用程序,你会发现每个cardview项目之间没有边距。
添加您喜欢的保证金属性。例如:
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 中执行此操作,只需将 paddingTop
和 paddingLeft
设置为您的 RecyclerView
并等于layoutMarginBottom
和 layoutMarginRight
的数量到您充气到 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"
您好,我正在学习本教程:
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
。
在cards_layout.xml中找到属性
card_view:cardUseCompatPadding="true"
并删除。启动应用程序,你会发现每个cardview项目之间没有边距。添加您喜欢的保证金属性。例如:
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 中执行此操作,只需将 paddingTop
和 paddingLeft
设置为您的 RecyclerView
并等于layoutMarginBottom
和 layoutMarginRight
的数量到您充气到 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"