显示包含SVG的全角ImageView会使它变形 [英] Showing a full-width ImageView containing a SVG distorts it

问题描述

我的目的是在ConstraintLayout中显示填充整个屏幕宽度的SVG背景图像. Button叠加在此背景图像上，这就是为什么您可以在下面的模型中看到的原因:

My aim is to show a SVG background image filling the whole screen's width, in a ConstraintLayout. A Button is superposed to this background image, that's why you can see in the mock-up below:

背景图像是包含星星的图像.它的开始侧和结束侧将被限制为根GroupView，以便完全填充屏幕的宽度.

The background image is the one that contains the stars. Its start and end sides would be constrained to the root GroupView, so that it would fill entirely the width of the screen.

问题如下:无论我是否将屏幕的底部绑定到屏幕的底部，背景图像都会失真，如下所示:

The problem is the following: whether I bind the bottom side to the bottom side of the screen or not, the background image appears distorded, as illustrated in the following:

这是我编写的代码:

<ImageView
    android:id="@+id/imageView16"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/ic_background_stars"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/linearLayout4"  // "linearLayout4" is just a widget shown above, it's not an important element for this StackOverflow question
    />

<Button
    android:id="@+id/button_home_share"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="24dp"
    android:background="@color/colorRoyalRedLight"
    android:text="TextView"
    android:textAllCaps="false"
    android:textColor="@color/white"
    app:layout_constraintStart_toStartOf="@+id/imageView16"
    app:layout_constraintEnd_toEndOf="@+id/imageView16"
    app:layout_constraintTop_toTopOf="@+id/imageView16"
    app:layout_constraintBottom_toBottomOf="@+id/imageView16"
    />

我的问题

我如何使用我的SVG图像作为背景图像，而该图像不会出现任何扭曲，从而占据了整个屏幕的宽度?高度当然可以自适应(以保持良好的比例)，但高度(在Y和X中)不应短于按钮.

My question

How could I use my SVG image as a background image that would appear without any distorsion, filling the whole screen's width? The height can of course adapt itself (to keep good proportions), but shouldn't be shorter (in Y and in X) than the button.

推荐答案

对于ImageView，请尝试设置android:scaleType="centerCrop".请参见 ImageView.ScaleType .

For the ImageView try setting android:scaleType="centerCrop". See ImageView.ScaleType.

CENTER_CROP

均匀缩放图像(保持图像的纵横比)，以使图像的两个尺寸(宽度和高度)都等于或大于视图的相应尺寸(减去填充).然后，图像在视图中居中.从XML使用以下语法:android:scaleType ="centerCrop".

CENTER_CROP

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). The image is then centered in the view. From XML, use this syntax: android:scaleType="centerCrop".

这篇关于显示包含SVG的全角ImageView会使它变形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！