多个分辨率的列表视图中的图像拉伸答案

【问题标题】：Image streching in list view for multiple resolutions多个分辨率的列表视图中的图像拉伸
【发布时间】：2015-06-01 13:33:39
【问题描述】：

这个问题可能跑题了，但我真的在寻找答案。

我正在使用包含图像和文本的列表（40% 图像和 60% 文本）。图片正在从服务器加载。我正在使用通用图像加载库进行缓存。对于所有分辨率，我们发送的图像分辨率为 200*200。在某些设备上它看起来有点拉伸，有什么方法可以根据分辨率添加图像宽度高度。

我只是想根据设备分辨率下载图像。但是我将如何计算不同分辨率的图像宽度和高度以适应列表项的 40%？

编辑：添加布局 xml（列表项布局）

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.4"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/recommendationlist_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY"
        android:src="@drawable/imgnt_placeholder" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="0.6"
    android:padding="10dp" >

    <TextView
        android:id="@+id/recommendationlist_eventname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="start|center_vertical"
        android:maxLines="2"
        android:minLines="1"
        android:textColor="#86bc25"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/recommendationlist_venuename"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/recommendationlist_eventname"
        android:layout_alignStart="@id/recommendationlist_eventname"
        android:layout_below="@id/recommendationlist_eventname"
        android:textColor="#444444"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/recommendationlist_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/recommendationlist_venuename"
        android:layout_alignParentBottom="true"
        android:layout_alignStart="@id/recommendationlist_venuename"
        android:textColor="#444444"
        android:textSize="14sp"
        android:textStyle="bold|italic" />
</RelativeLayout>

谢谢

【问题讨论】：

使用 Picaso 从服务器加载图像..
将 ScaleType 更改为 --> android:scaleType="Center"

标签： android image android-imageview universal-image-loader image-loading

【解决方案1】：

如果图像的纵横比与列表视图项的纵横比不匹配（即您的设备，如果它设置为匹配/填充父级）

除非您下载设备支持的确切纵横比，否则没有太多方法可以避免这种情况。您可以使用scaleType 来控制在纵横比不同的情况下的行为（例如使用centerCrop），这有其局限性，或者根据此解决方案计算列表视图项的宽度/高度：

Calculating the height of each row of a ListView

然后从您的服务器下载正确的图像（如果它支持多种分辨率/纵横比）。

使用不同的图像库不会解决问题（与其他答案告诉您的不同）。这里的问题是，您在具有不同纵横比并支持不同分辨率的容器中显示具有固定分辨率和固定纵横比的图像（导致图像拉伸和/或像素化）。

如果您的服务器可以提供正确的纵横比（使用我链接的帖子计算），您可以在 UIL 上使用ImageScaleType.EXACTLY（甚至ImageScaleType.EXACTLY_STRETCHED）然后加载它以满足您的分辨率。这应该可以避免图像在不同设备上看起来被拉伸的问题。

如果您的服务器不支持不同的分辨率，也许centerCrop 是您最好的选择。它将图像在图像视图中居中，并裁剪不适合其中的任何内容，这比拉伸您正在使用的图像（通过使用fitXY）更好。

【讨论】：

【解决方案2】：

你也可以使用毕加索：https://github.com/square/picasso

或

滑行：https://github.com/bumptech/glide

为了图像更好的分辨率和质量

【讨论】：

【解决方案3】：

这听起来像是一个矛盾的问题。您不能保持固定的容器宽度（在您的情况下为屏幕宽度的 40%），同时将其与图像的纵横比匹配。除了你的源图像都是 200 x 200。你怎么知道 40% 的屏幕宽度 x ImageView 高度是否匹配相同的比例？（即使不考虑重新缩放）

我认为您应该将 scaleType 从 fitXY 更改为 centerCrop（其他人已经建议，但请确保您的图像至少与目标设备上最大的 ImageView 一样大）。

更好的方法是为不同的屏幕分辨率创建不同的布局。这样，您不仅可以定义 ImageView，还可以为给定屏幕定义其他任何内容。例如，您可以将屏幕宽度大于或等于 600dp（与大多数平板电脑一样）的设备的所有布局放在：

res/layout/layout-w600dp

【讨论】：

【解决方案4】：

试试这个布局：

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_weight="0.4"
  android:orientation="vertical" >

 <FrameLayout
    android:id="@+id/fm_imageview1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentCenter="true"
    >

  <ImageView
    android:id="@+id/recommendationlist_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:layout_gravity="center"
    android:gravity="center"
    android:contentDescription="@string/app_name"
    android:src="@drawable/imgnt_placeholder" />

  </FrameLayout>
</RelativeLayout>

<RelativeLayout
   ... ...
  >

  //no change

</RelativeLayout>

希望对您有所帮助！

【讨论】：

【解决方案5】：

随便用

android:scaleType="centerCrop"
android:background="@drawable/img_placeholder"

这将根据 imageview 的大小裁剪图像，如果 imageview 是正方形，则不会裁剪。另外，在drawable-hdpi、drawable-mdpi、drawable-xhdpi、drawable-xxhdpi文件夹中相应保留不同的“img_placeholder”。

【讨论】：