交错网格视图中未知的额外空间源

时间:2017-04-22 13:37:45

标签: android android-recyclerview android-cardview staggered-gridview

这是我第一次使用卡片,我有一些额外的空间,不知道它来自哪里

这是我的卡片视图

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="@+id/card_view"
android:layout_width="150dp"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="8dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/product_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        card_view:srcCompat="@drawable/sample_1" />

    <TextView
        android:id="@+id/product_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/product_image"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/product_image"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="#ffffff"
        android:padding="10dp"
        android:text="$0.00"
        android:textColor="#000000" />


    <TextView
        android:id="@+id/product_description"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/product_image"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="#CCFFFFFF"
        android:text="This is the product description!"
        android:textColor="#000000" />
</RelativeLayout>

这是我的空间装饰课

public class SpacesDecoration extends RecyclerView.ItemDecoration {
private final int mSpace;

public SpacesDecoration(int space) {
    this.mSpace = space;
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

    if (parent.getChildAdapterPosition(view) == 0)
        outRect.top = mSpace;
}}}

这就是我得到的最终观点  and here's what i get

任何人都可以告诉我这个额外空间来自哪里,提前谢谢

1 个答案:

答案 0 :(得分:1)

您的CardView XML中存在一些问题。

1。ImageView属性android:layout_width="wrap_content"更新为android:layout_width="match_parent"

2。使用android:src="@drawable/sample_1"代替ImageView代替card_view:srcCompat="@drawable/sample_1",并根据需要使用scaleType

3。将属性card_view:cardPreventCornerOverlap="false"添加到CardView并使用card_view:cardUseCompatPadding="false"

仅供参考,我已从attributes删除了一些不必要的TextView's,并添加了一些以便正确对齐。

试试这个:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="8dp"
    card_view:cardUseCompatPadding="false"
    card_view:cardPreventCornerOverlap="false">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/product_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:scaleType="fitXY"
            android:src="@drawable/sample_1" />

        <TextView
            android:id="@+id/product_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:padding="10dp"
            android:text="$0.00"
            android:textColor="#000000" />


        <TextView
            android:id="@+id/product_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/product_image"
            android:padding="8dp"
            android:background="#CCFFFFFF"
            android:text="This is the product description!"
            android:textColor="#000000" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

<强>输出:

enter image description here

希望这会有所帮助〜