如何使用 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