如何使用 ConstraintLayout 在 Android 中针对不同屏幕尺寸缩放 UI 元素

Question

我的目标是使用 Android 中的 ConstraintLayout 设计一个布局，该布局可以扩展到不同的屏幕尺寸，从而扩展到不同的设备。 我经常读到你应该使用 dp 和 sp 来设计布局。 基本上我认为使用 dp 和 sp 不会使布局针对不同的屏幕尺寸进行扩展，所以我不同意这一点。 在这里，您可以看到设计布局在 5' 和 7' 屏幕上的外观。

您可以清楚地看到（屏幕截图具有相同的缩放级别）在 7' 上显示的按钮和图像视图（其高度和宽度由 dp 指定）和文本视图（其大小由 sp 指定）看起来更小或相同大小就像在 5' 设备中一样。 但是在 7' 显示器上，元素应该更大并且可以缩放到我认为使用 dp 和 sp 不可能的显示尺寸。

所以我的问题是如何设计布局以使其缩放到当前的屏幕尺寸，这意味着元素在小型设备中应该更小，在大屏幕设备中应该更大。

在这里可以看到 XML 布局文件：

    <?xml version="1.0" encoding="utf-8"?>
<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">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="265dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="ContentDescription" />







    <ImageButton
        android:id="@+id/commentButton"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@null"
        android:contentDescription="comment_Button"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.82"
        app:srcCompat="@mipmap/comment" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/comment"
        android:textSize="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.025"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.753" />



    <Button
        android:id="@+id/button"
        android:layout_width="163dp"
        android:layout_height="72dp"
        android:background="@drawable/custom_button"
        android:text="Button"
        android:textAllCaps="false"
        android:textColor="#121212"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.867" />


    <TextView
        android:id="@+id/textViewS"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Textview"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.012"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.581" />

</androidx.constraintlayout.widget.ConstraintLayout>

我会感谢每一条评论，并非常感谢您的建议。

Answer 1

我的应用程序有不同的维度资源，为更小的屏幕缩放所有 dp 和 sp 值。 例如在res/values/dimens.xml

<dimen name="dp20">20dp</dimen>
<dimen name="dp24">24dp</dimen>
<dimen name="dp28">28dp</dimen>
<dimen name="dp30">30dp</dimen>
<dimen name="dp32">32dp</dimen>
<dimen name="dp36">36dp</dimen>

在res/values-w320dp/dimens.xml ：

<dimen name="dp16">12dp</dimen>
<dimen name="dp18">14dp</dimen>
<dimen name="dp20">15dp</dimen>
<dimen name="dp24">18dp</dimen>
<dimen name="dp28">21dp</dimen>
<dimen name="dp30">23dp</dimen>
<dimen name="dp32">24dp</dimen>
<dimen name="dp36">27dp</dimen>

然后，当使用@dimen/dp16而不是 od 16dp设置尺寸时，屏幕的缩放效果会更好。 您可以为更多类型的屏幕添加更多合格资源。

Answer 2

有一个第三方库可以轻松管理您的问题。

检查组件的不同尺寸： https://github.com/intuit/sdp

这是文本大小： https://github.com/intuit/ssp