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

Question

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

这是我的卡片视图

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

这是我得到的最终视图

谁能告诉我这个多余的空间是从哪里来的，提前谢谢

Answer 1

您的CardView XML 中有一些问题。

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

2.在您的ImageView 中使用android:src="@drawable/sample_1" 而不是card_view:srcCompat="@drawable/sample_1"，并根据您的需要使用scaleType。

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

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

试试这个：

<?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>

输出：

希望对你有帮助~