显示包含 SVG 的全宽 ImageView 会使其变形

Question

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

背景图片是包含星星的图片。它的开始边和结束边将被限制在根 GroupView，因此它会完全填满屏幕的宽度。

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

这是我写的代码：

<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 中）。

Answer 1

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

CENTER_CROP

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