在保持纵横比的同时将ImageView填充到屏幕

Question

我有两个图像文件：

• 320dpi 768x1280
• 480dpi 1080x1920

我已将每个图像分别放在我项目的xhdpi和xxhdpi drawables文件夹中。我试图让两个图像适当缩放，并填充屏幕没有任何空白。

我的XML代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.vax.gamurs.LandingPage"
    android:background="#ffffffff"
    android:orientation="vertical"
>


<ImageView
    android:id="@+id/LandingBack"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/background"
    android:adjustViewBounds="true"
    android:layout_gravity="center"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

我在Nexus 4和Nexus 5的两侧都有空白。如何在保持宽高比的同时消除空白并让图像填满屏幕？

Answer 1

使用scaleType="centerCrop"如下：

<ImageView
        android:id="@+id/LandingBack"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/background"
        android:scaleType="centerCrop"
        android:adjustViewBounds="true"
        android:layout_gravity="center"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

上述方法将裁剪图像。不幸的是，如果您使用固定尺寸的drawable并希望支持不同的屏幕尺寸，这是一个缺点。

替代方法是使用下面附带的9补丁图像。这将拉伸蓝色背景以填充空白区域。

下载9Patch图片的链接：https://dl.dropboxusercontent.com/u/2411239/sampleimg.9.png

以下是一个示例截图，展示了它的工作原理：

<强>更新

您的新ImageView应如下所示：

<ImageView
    android:id="@+id/LandingBack"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/sampleimg"
    android:adjustViewBounds="true"
    android:layout_gravity="center"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"/>

另外作为参考，我使用1px拉伸补丁，如下图所示：

Answer 2

在保持纵横比的同时无法填充，因为这没有意义。您可以做的是将背景设置为与蓝色相同。 （非常简单）或者使用简单的数学方法使图像仅填充高度或仅填充宽度

w = W; h =（w / W）H;

其中W是屏幕宽度，H是屏幕高度，w是图像宽度，h是图像高度

与高度交换宽度以填充整个高度而不是宽度

Answer 3

尝试像这样设置imageview的背景：

    android:background="@drawable/background"

而不是＆＃34; src＆＃34;。如果你使用src，你的图像将不会缩放，但背景将被缩放。

但是这种缩放可能会破坏你的图像，你应该使用九个补丁。

Answer 4

只需使用Imageview的属性

        android:scaleType="fitXY"

这意味着

<ImageView
    android:scaleType="fitXY"
    android:id="@+id/LandingBack"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/background"
    android:adjustViewBounds="true"
    android:layout_gravity="center"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

在Imageview中

你完成了。快乐编码