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

时间:2015-03-28 05:21:07

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

这个问题可能不合适,但我真的在寻找答案。

我正在使用列表,它有图像和文字(40%图像和60%文字)。图像从服务器加载。我正在使用Universal Image加载lib进行缓存。我们发送的图像分辨率为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>

谢谢

6 个答案:

答案 0 :(得分:1)

如果图像的宽高比与列表视图项的宽高比(即您的设备不匹配),您的图像将始终拉伸/收缩或者只是留下一些空白区域它被设置为匹配/填充父母)

除非您下载设备支持的确切宽高比,否则没有太多方法可以避免它。您可以使用scaleType控制行为,以防长宽比不同(使用例如centerCrop)具有其局限性或根据此解决方案计算列表视图项的宽度/高度:

Calculating the height of each row of a ListView

然后从服务器下载正确的图像,如果它支持多种分辨率/宽高比。

使用不同的图像库无法解决问题(与其他答案告诉您的不同)。这里的问题是你在具有不同宽高比并支持不同分辨率的容器中显示具有固定分辨率和固定宽高比的图像(导致拉伸图像和/或像素化)。

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

如果您的服务器不支持不同的分辨率,那么centerCrop可能是最好的选择。它会将图像置于图像视图中心,并裁剪任何内部不适合的内容,这比拉伸您使用的图像(使用fitXY)要好。

答案 1 :(得分:0)

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

OR

Glide:https://github.com/bumptech/glide

图像更好的分辨率和质量

答案 2 :(得分:0)

ImageView只是图像的容器。要将图像装入容器200x200,图像应为200x200。

当应用程序请求图像(200x200)时,ImageView可以向上或向下缩放图像。 https://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType 但原始源图像为200 x 200。

如果要按每种不同的分辨率更改源图像,可以将差异图像放在服务器上 http://localhost/images/hdpi/sample_200x200.jpg

修改

如果您不希望将图像拉伸到100dp,或者如果您想要显示原始图像尺寸,那么这是不可能的。因为您声明其父视图的40%。

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:layout_weight="0.4">
    <ImageView
        android:id="@+id/recommendationlist_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="fitXY"
        android:src="@drawable/imgnt_placeholder" />
</RelativeLayout>
<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.6"
    android:padding="10dp">
......

答案 3 :(得分:0)

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

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

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

res/layout/layout-w600dp

答案 4 :(得分:0)

试试这个布局:

<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 :(得分:0)

只需使用

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

这将根据图像视图的大小裁剪图像,如果图像视图为正方形,则不会进行裁剪。另外,在drawable-hdpi,drawable-mdpi,drawable-xhdpi,drawable-xxhdpi文件夹中保留不同的“img_placeholder”。