不同屏幕分辨率下矢量 xml 可绘制文件的 Android 应用程序布局问题

Question

当我尝试将 svg 图像作为矢量添加到我的布局文件时，我遇到了屏幕兼容性问题。我的代码在下面

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.auth.AuthActivity">

    <RelativeLayout
        android:id="@+id/otNum"
        android:background="@color/white"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:orientation="vertical">

        <LinearLayout
            android:paddingTop="50dp"
            android:id="@+id/otpIcon"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.3"
            android:gravity="center"
            >
            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/ic_otp_image"/> <--  ic_otp_image.xml  in drawable -->

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.7"
            android:layout_below="@id/otpIcon"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:paddingTop="50dp">

            <!-- Some form content goes here-->

        </LinearLayout>

    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

我正在使用 xxhdpi 的设备（即直接设备）上进行开发。上述布局设置在此设备上运行良好，但是当我在模拟器（hdpi 480 x 800）上进行设备兼容性测试时。图像占据了设备屏幕大小的一半以上，我所有的表单内容都超出了屏幕。我检查了不同的帖子，但找不到此问题的正确解决方案。

hdpi(left) 和 (xhdpi) 模拟器的屏幕截图：

Answer 1

您可以通过setting the height and width of the drawable using dimens.xml files 解决此问题。这将允许您根据屏幕的大小为可绘制对象定义不同的大小。

您也可以使用ConstraintLayout 解决它。以下是一种这样的解决方案。这段代码会使ImageView占据屏幕宽度的40%，其宽高比为2:1。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto">

<androidx.appcompat.widget.AppCompatImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintWidth_percent="0.4"
    app:layout_constraintDimensionRatio="H,2:1"
    android:background="@drawable/myDrawable"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>