为什么从设计角度看布局在实际设备上如此不同？

Question

我使用的是相对布局，为什么布局如此不同很困惑：EditText如此靠近第二个微调器，第二个微调器位于左侧一点，与上一个微调器不对齐，即使他们都有相同的marginStart；另外，按钮应水平居中。

我已阅读到实际的电话屏幕可能与我在Android Studio中看到的视图有所不同，但是这会如何影响marginStart，这对于这两个微调器来说是相同的？ 我做错了什么吗？ （我是使用Android Studio开发的初学者）。这是我的xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".QuizzesFragment">


    <Spinner
        android:id="@+id/fragquizzes_spn_courses"
        android:layout_width="286dp"
        android:layout_height="85dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="71dp"
        android:layout_marginTop="225dp"
        android:entries="@array/courses_array" />

    <Spinner
        android:id="@+id/fragquizzes_spn_departments"
        android:layout_width="286dp"
        android:layout_height="85dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="71dp"
        android:layout_marginTop="123dp"
        android:entries="@array/depts_array" />

    <Button
        android:id="@+id/fragquizzes_btn_createQuiz"
        android:layout_width="126dp"
        android:layout_height="63dp"
        android:layout_alignBottom="@id/fragquizzes_spn_courses"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="-90dp"
        android:layout_marginTop="22dp"
        android:layout_marginEnd="137dp"
        android:layout_marginBottom="70dp"
        android:text="@string/create_quiz" />

    <EditText
        android:id="@+id/fragquizzes_et_quizname"
        android:layout_width="250dp"
        android:layout_height="64dp"
        android:layout_alignBottom="@+id/fragquizzes_spn_courses"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="162dp"
        android:ems="10"
        android:inputType="text"
        android:hint="quiz name"/>

</RelativeLayout>

我想在电话上拥有相同的观点或至少有相似之处？ 这些是屏幕截图：

！[设计视图] https://imgur.com/a/bGBm4YW

！[实际设备] https://imgur.com/a/9KaghT4

Answer 1

您的布局没有响应的原因是您在视图上使用了固定大小（android:layout_width="286dp"和android:layout_height="85dp" for example）。

如果在dp中使用固定尺寸的话，由于不同的手机具有不同的屏幕尺寸，因此您在一个设备上的布局可能会很好。

“这对这两个微调器的marginStart有何影响” -再一次-您使用固定尺寸，因此它不会对所有屏幕尺寸都做出反应。

如果您希望布局对所有屏幕都响应，或者不使用固定大小 /使用固定大小，但为每种屏幕大小或我创建的布局创建1个布局认为这是最简单的解决方案-使用ConstraintLayout，它超级易用，创建布局的速度超快，并且可以响应所有屏幕尺寸。

下面是一个使用constraintLayout和一些guidelines来实现所需布局的示例：

<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">

    <Spinner
        android:id="@+id/some"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="@+id/spinner2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@+id/spinner2"
        app:layout_constraintTop_toBottomOf="@+id/spinner2" />

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="395dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/some"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread" />


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        tools:text="button" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        app:layout_constraintVertical_chainStyle="spread" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />


</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

请尝试以下布局文件。让我知道它是否有用。如果您需要有关布局的其他帮助，请随时询问。

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

    <Spinner
        android:id="@+id/fragquizzes_spn_departments"
        android:layout_width="match_parent"
        android:layout_height="85dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="123dp"
        android:layout_marginEnd="70dp"
        android:entries="@array/depts_array" />

    <Spinner
        android:id="@+id/fragquizzes_spn_courses"
        android:layout_width="match_parent"
        android:layout_height="85dp"
        android:layout_below="@+id/fragquizzes_spn_departments"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="70dp"
        android:entries="@array/courses_array" />

    <EditText
        android:id="@+id/fragquizzes_et_quizname"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_above="@+id/fragquizzes_btn_createQuiz"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="70dp"
        android:layout_marginBottom="30dp"
        android:ems="10"
        android:hint="quiz name"
        android:inputType="text" />

    <Button
        android:id="@+id/fragquizzes_btn_createQuiz"
        android:layout_width="126dp"
        android:layout_height="63dp"
        android:layout_alignBottom="@id/fragquizzes_spn_courses"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="70dp"
        android:text="@string/create_quiz" />

</RelativeLayout>

Answer 3

请尝试以下代码。 在此代码中，我们使用微调器的高度和宽度不固定，因此在所有框架中它都适合。 我们使用LinearLayout设置固定布局上的微调框，edittext和按钮。我们使用android:orientation="vertical"，因此此布局内的所有字段均垂直显示。 您可以根据自己的选择设置微调器的上边缘。 我在linearlayout中设置了左边距和右边距，因此所有字段都根据此布局自动调整。 我希望它对根据您的布局设计非常有帮助。 谢谢。