如何制作可在每个屏幕手机中使用的响应式 Android 应用程序？答案

【问题标题】：How to make responsive Android application which can be use in every screen mobile?如何制作可在每个屏幕手机中使用的响应式 Android 应用程序？
【发布时间】：2019-12-26 13:43:43
【问题描述】：

我已经创建了一个 Android 应用程序。

当我在手机上运行我的应用程序时，它运行得很好，但是当我在另一部手机上运行时，应用程序的布局发生了变化，按钮被移动，文本视图被移动到不同的位置。我在 Android Studio 的“预览设备”部分中列出的每个像素设备上进行了测试。那么如何设计适合各种设备的呢？

我在约束布局中设计了所有布局，并创建了按钮、编辑文本框和每个布局项的每个约束。

Form 1 Form 1两者都使用相同的屏幕尺寸和相同的分辨率也

Form 2 Form 2

有人可以帮帮我吗？

<TextView
    android:id="@+id/leadtextview"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Lead Creation Form"
    android:textColor="#000"
    android:textSize="24dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.497"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />

<EditText
    android:id="@+id/name"
    android:paddingStart="20dp"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="12dp"
    android:layout_marginBottom="20dp"
    android:background="@drawable/edittext_background"
    android:ems="10"
    android:hint="Name"
    android:inputType="textPersonName"
    app:layout_constraintBottom_toTopOf="@+id/emailaddress"
    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.95" />

<EditText
    android:id="@+id/emailaddress"
    android:paddingStart="20dp"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="12dp"
    android:layout_marginBottom="448dp"
    android:background="@drawable/edittext_background"
    android:ems="10"
    android:hint="Email"
    android:inputType="textEmailAddress"
    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.476" />

<EditText
    android:id="@+id/company_name"
    android:paddingStart="20dp"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/edittext_background"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="12dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="384dp"
    android:ems="10"
    android:hint="Comapny name"
    android:inputType="textPersonName"
    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.581" />

<EditText
    android:id="@+id/mobile"
    android:paddingStart="20dp"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/edittext_background"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="12dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="284dp"
    android:ems="10"
    android:hint="Mobile"
    android:inputType="phone"
    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.596" />

<EditText
    android:id="@+id/address"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="12dp"
    android:layout_marginBottom="144dp"
    android:background="@drawable/edittext_background"
    android:ems="10"
    android:hint="Address"
    android:inputType="textPostalAddress"
    android:paddingStart="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.579" />

<Spinner
    android:id="@+id/country"
    android:layout_width="160dp"
    android:layout_height="30dp"
    android:layout_marginStart="32dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/edittext_background"
    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.538" />

<Spinner
    android:id="@+id/state"
    android:layout_width="160dp"
    android:layout_height="30dp"
    android:layout_marginStart="36dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/edittext_background"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.133"
    app:layout_constraintStart_toEndOf="@+id/country"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.544" />

<Spinner
    android:id="@+id/city"
    android:layout_width="160dp"
    android:layout_height="30dp"
    android:layout_marginStart="32dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/edittext_background"
    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.595" />

<Spinner
    android:id="@+id/status"
    android:layout_width="160dp"
    android:layout_height="30dp"
    android:layout_marginStart="36dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/edittext_background"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.13"
    app:layout_constraintStart_toEndOf="@+id/city"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.595" />

<EditText
    android:id="@+id/pincode"
    android:paddingStart="20dp"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/edittext_background"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="12dp"
    android:layout_marginTop="12dp"
    android:layout_marginBottom="8dp"
    android:ems="10"
    android:hint="Pin Code"
    android:inputType="textPersonName"
    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.68" />

<Button
    android:id="@+id/registration_button"
    android:layout_width="152dp"
    android:layout_height="41dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="4dp"
    android:background="@drawable/button_background"
    android:text="Registration"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.497"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.964" />

<EditText
    android:id="@+id/lead_decription"
    android:layout_width="match_parent"
    android:layout_height="128dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/edittext_background"
    android:hint="Description"
    android:paddingStart="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/pincode"
    app:layout_constraintVertical_bias="0.17" />

【问题讨论】：

你能发布你的布局代码吗？似乎约束设置不正确，否则每个设备都应该给你相同的结果
是的，我在发帖，但约束布局是否适合所有设备？
是的，约束布局是提供向后兼容性的支持库的一部分
问题是您将大部分视图约束到父视图，而您应该在视图本身之间添加相对约束。如果您有这样的垂直表单，并且希望 textViews 和 EditTexts 一个接一个出现，请尝试添加 app:layout_constraintBottom_toTopOf="name_of_the_viewBelow" app:layout_constraintTop_toBottomOf="name_of_the_view_above" 相应
也看看链：constraintlayout.com/basics/create_chains.html

标签： android android-studio android-layout user-interface

【解决方案1】：

你可以使用 ConstraintLayout，检查这个：https://developer.android.com/training/multiscreen/screensizes

【讨论】：

仅链接的答案总是不好的答案。
另外用户已经声称使用 ConstraintLayout 设计了他们的布局

【解决方案2】：

问题是您将大部分视图约束到父视图，而您应该在视图本身之间添加相对约束。如果您有这样的垂直表单，并且希望 textViews 和 EditTexts 一个接一个地出现，请尝试添加 app:layout_constraintBottom_toTopOf="name_of_the_viewBelow" app:layout_constraintTop_toBottomOf="name_of_the_view_above" 相应

对不起，我也应该提到，如果你这样做，你就不需要水平/垂直偏差，所以你也可以摆脱那些。

您的利润也需要重新调整

我上面的 cmets 的一个例子是下面的代码：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/leadtextview"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="Lead Creation Form"
        android:textColor="#000"
        android:textSize="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="12dp"
        android:background="@drawable/edittext_background"
        android:ems="10"
        android:hint="Name"
        android:inputType="textPersonName"
        android:paddingStart="20dp"
        app:layout_constraintBottom_toTopOf="@+id/emailaddress"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/leadtextview" />

    <EditText
        android:id="@+id/emailaddress"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="12dp"
        android:background="@drawable/edittext_background"
        android:ems="10"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:paddingStart="20dp"
        app:layout_constraintBottom_toTopOf="@+id/company_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/name" />

    <EditText
        android:id="@+id/company_name"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="12dp"
        android:background="@drawable/edittext_background"
        android:ems="10"
        android:hint="Comapny name"
        android:inputType="textPersonName"
        android:paddingStart="20dp"
        app:layout_constraintBottom_toTopOf="@id/mobile"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/emailaddress" />

    <EditText
        android:id="@+id/mobile"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="12dp"
        android:background="@drawable/edittext_background"
        android:ems="10"
        android:hint="Mobile"
        android:inputType="phone"
        android:paddingStart="20dp"
        app:layout_constraintBottom_toTopOf="@id/address"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/company_name" />

    <EditText
        android:id="@+id/address"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="12dp"

        android:background="@drawable/edittext_background"
        android:ems="10"
        android:hint="Address"
        android:inputType="textPostalAddress"
        android:paddingStart="20dp"
        app:layout_constraintBottom_toTopOf="@id/country"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/mobile" />

    <Spinner
        android:id="@+id/country"
        android:layout_width="160dp"
        android:layout_height="30dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/edittext_background"
        app:layout_constraintBottom_toTopOf="@id/city"
        app:layout_constraintEnd_toStartOf="@id/state"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/address" />

    <Spinner
        android:id="@+id/state"
        android:layout_width="160dp"
        android:layout_height="30dp"
        android:layout_marginStart="36dp"
        android:layout_marginEnd="32dp"
        android:background="@drawable/edittext_background"
        app:layout_constraintBottom_toBottomOf="@+id/country"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/country"
        app:layout_constraintTop_toTopOf="@+id/country" />

    <Spinner
        android:id="@+id/city"
        android:layout_width="160dp"
        android:layout_height="30dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/edittext_background"
        app:layout_constraintBottom_toTopOf="@+id/pincode"
        app:layout_constraintEnd_toStartOf="@id/status"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/country" />

    <Spinner
        android:id="@+id/status"
        android:layout_width="160dp"
        android:layout_height="30dp"
        android:layout_marginStart="36dp"
        android:layout_marginEnd="32dp"
        android:background="@drawable/edittext_background"
        app:layout_constraintBottom_toBottomOf="@+id/city"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/city"
        app:layout_constraintTop_toTopOf="@+id/city" />

    <EditText
        android:id="@+id/pincode"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/edittext_background"
        android:ems="10"
        android:hint="Pin Code"
        android:inputType="textPersonName"
        android:paddingStart="20dp"
        app:layout_constraintBottom_toTopOf="@id/lead_decription"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/city" />

    <Button
        android:id="@+id/registration_button"
        android:layout_width="152dp"
        android:layout_height="41dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/button_background"
        android:text="Registration"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/lead_decription" />

    <EditText
        android:id="@+id/lead_decription"
        android:layout_width="match_parent"
        android:layout_height="128dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/edittext_background"
        android:hint="Description"
        android:paddingStart="20dp"
        app:layout_constraintBottom_toTopOf="@id/registration_button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pincode" />

</androidx.constraintlayout.widget.ConstraintLayout>

这段代码应该在不同的设备上产生统一的布局。

【讨论】：

你能告诉我，是否有必要为每个字段创建每个约束？
你能告诉我你是怎么解决的吗？
@TARUNSHARMA 并不总是需要将所有约束类型添加到所有视图，但这取决于您的需要。例如，如果您想在屏幕中水平和垂直居中视图，则添加所有约束（开始、结束、顶部、底部）并使用“父”约束它们。但是，如果您希望您的视图保持在屏幕的顶部，您可以将顶部约束到父级并且不要使用底部约束。根据您想要实现的目标，组合是无穷无尽的。我建议您查看 Medium 以获取相关教程，或 youtube 上的 android 开发者频道
@TARUNSHARMA 关于前 4 个 EditTexts，您有什么特别困惑的地方？
谢谢您，先生，前 4 个文本框已修复，您是如何通过链式或其他方式修复的？