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

如何解决不同屏幕分辨率的矢量xml可绘制文件的Android应用布局问题

当我尝试将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（左）和（xhdpi）模拟器的屏幕截图：

解决方法

您可以通过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>