如何使用正确比例类型的图像填充RecyclerView（StaggeredGridLayoutManager）？

Question

我的RecyclerView出现了这样的问题

我需要向用户提供我在picasso lib的帮助下从web下载到我的RecyclerView的图像。最终它看起来像这个

正如您所看到的，我需要划伤我的图像，但当然还要采用适当的宽高比。

我转到了我的XML文件并在ImageView android:scaleType="fitXY"

中设置了属性

现在我的ImageView看起来像这样

<ImageView
        android:id="@+id/imageViewMainCard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        />

这是我得到的结果

正如您现在所看到的那样，图像填充了所有可用空间，但它们并不具有适当的宽高比。图像划痕宽度超过高度，看起来不错......

此处还有我的XML文件

<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dp"
android:paddingEnd="3dp"
android:paddingStart="3dp"
android:paddingTop="3dp"
>

<LinearLayout
    android:id="@+id/cardMainActivityLinearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

  <com.balysv.materialripple.MaterialRippleLayout
      android:id="@+id/rippleInbox"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:mrl_rippleColor="@color/ntz_background_light_grey"
      app:mrl_rippleOverlay="true"
      >

    <ImageView
        android:id="@+id/imageViewMainCard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        />

  </com.balysv.materialripple.MaterialRippleLayout>

  <RelativeLayout
      android:id="@+id/rlCardMain"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/white"
      android:padding="4dp"
      >

    <TextView
        android:id="@+id/tvBrandName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:textColor="@color/black_color"
        android:textSize="10dp"
        />

    <TextView
        android:id="@+id/tvItemName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvBrandName"
        android:textColor="@color/black_color"
        android:textSize="10dp"
        />

    <TextView
        android:id="@+id/tvPreviousPrice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvItemName"
        android:textColor="@color/black_color"
        android:textSize="10dp"
        />

    <TextView
        android:id="@+id/tvDivider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/tvPreviousPrice"
        android:layout_toEndOf="@+id/tvPreviousPrice"
        android:text=" / "
        android:textSize="10dp"
        android:visibility="gone"
        />

    <TextView
        android:id="@+id/tvPrice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/tvDivider"
        android:layout_toEndOf="@+id/tvDivider"
        android:textColor="@color/black_color"
        android:textSize="10dp"
        />

    <Button
        android:id="@+id/bAction"
        android:layout_width="70dp"
        android:layout_height="30dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:textSize="8dp"
        />

  </RelativeLayout>
</LinearLayout>
</LinearLayout>

我做错了什么？

EDIT1

android:scaleType="centerCrop"属性

的结果

当女性没有头脑时也不太好。）

EDIT2

有android:scaleType="centerInside"

的结果

Answer 1

要回答您的问题，请使用centerCrop将图像绝对居中于其父级。还要添加此属性，android：adjustViewBounds =“true”。这样就可以保留图像的宽高比。

Answer 2

fitXY使用FILL，它被描述为“在X和Y中独立缩放，因此src与dst完全匹配。这可能会改变Android Documentation中src的宽高比”

您应该使用centerInside居中，适合和缩放，同时保持宽高比

Answer 3

好的问题是你的布局不尊重图像的边界。为了解决这个问题，将图像视图包装在单独的父布局中，使用layout_weight =“1”将父权重添加到布局中。然后使用android：layout_width =“0px”设置相对于布局的宽度，以避免撕裂和正确的边界协调设置android：adjustViewBounds =“true”。要使图像居中并裁剪到中心，请使用android：scaleType =“centerCrop”。