CardView中的ImageView占用整个屏幕

时间:2017-07-19 14:27:57

标签: android android-layout android-recyclerview android-xml android-cardview

最近,我一直在尝试在多个水平CardView内实施RecyclerView。但是,当ImageView中的图像与我指定的尺寸不完全相符时,我的CardView似乎占据了整个屏幕的宽度。我知道这是因为当我放入一个与宽度尺寸相匹配的图像时,它完全符合我想要的方式。但我希望程序无论尺寸如何都能裁剪图像。 What I Want当使用的图像宽度与我的xml文件中指定的宽度不同时,此处为what I get

这是我在我的recyclerview中使用的cardview。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@android:color/white"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">


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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtRecipeSectionTitle"
            android:text="Recipe Section"
            android:textStyle="bold"
            android:textSize="14sp"
            android:padding="5dp"
            android:textColor="@android:color/black"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="10dp"
            tools:layout_editor_absoluteY="0dp"
            app:layout_constraintLeft_toLeftOf="parent" />


    </RelativeLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recipe_section_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="242dp"
        android:padding="3dp"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="5dp"
        android:orientation="horizontal"></android.support.v7.widget.RecyclerView>

</LinearLayout>

这是我的recyclerview的xml。虽然我认为这不是问题所在。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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:layout_width="133dp"
    android:layout_height="242dp"
    app:cardElevation="0dp"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="?android:selectableItemBackground"
        android:orientation="vertical"
        android:layout_marginLeft="10dp"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp">

        <ImageView
            android:id="@+id/recipeThumbnail"
            android:layout_width="match_parent"
            android:layout_height="195dp"
            android:contentDescription=""
            android:src="@drawable/placeholder"
            android:scaleType="centerCrop"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <TextView
            android:id="@+id/txtRecipeName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/recipeThumbnail"
            android:text="Name of Recipe"
            android:textColor="@android:color/black"
            android:textSize="14sp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <TextView
            android:id="@+id/txtCalorie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtRecipeName"
            android:text="Calories: "
            android:textColor="@android:color/black"
            android:textSize="13sp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <TextView
            android:id="@+id/txtRecipeCalorie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtRecipeName"
            android:layout_toRightOf="@+id/txtCalorie"
            android:text="999"
            android:textColor="@android:color/black"
            android:textSize="13sp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <TextView
            android:id="@+id/txtKcal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtRecipeName"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/txtRecipeCalorie"
            android:text="kcal"
            android:textColor="@android:color/black"
            android:textSize="13sp"
            android:textStyle="bold"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />


    </RelativeLayout>

</android.support.v7.widget.CardView>

顺便说一下,既然我们都在这里,有人能告诉我如何增加每张卡之间的空间吗?我目前正在CardView内的相对布局中使用marginLeft,但这绝对不是可行的方法。

先谢谢你回答!

1 个答案:

答案 0 :(得分:1)

为Imageview设置最大宽度

        <ImageView
            android:id="@+id/recipeThumbnail"
            android:maxWidth="150dp"                 //Change to suit
            android:scaleType="centerCrop"           //Trims accordingly
            android:layout_width="match_parent"
            android:layout_height="195dp"
            android:contentDescription=""
            android:src="@drawable/placeholder"
            android:scaleType="centerCrop"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />
  

顺便说一下,既然我们都在这里,有人可以告诉我如何增加   每张卡之间的空格?我目前正在使用marginLeft   CardView内部的相对布局,但绝对不是   要走的路。

查看this回答。