应用布局不同于 Android Studio 布局

Question

我是 Android Studio 和 Java 编程的新手，如果这是一个愚蠢的问题，我很抱歉。我用基本的 activity 做了一个项目，它有点像笔记应用程序，当你点击浮动按钮时，应该会出现类似弹出 window 的东西。我会post2张截图。首先是应用程序的外观，其次是当我运行应用程序时应用程序在 phone 上的外观。

应用应该是这样的

这是它的样子

这是此布局的代码：

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

    <EditText
        android:id="@+id/editTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="43dp"
        android:ems="10"
        android:hint="@string/title_hint"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="47dp"
        android:layout_marginTop="139dp"
        android:ems="10"
        android:hint="@string/description_hint"
        android:inputType="textMultiLine"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBoxIdea"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="244dp"
        android:text="@string/idea_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBoxToDo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="@string/todo_text"
        app:layout_constraintStart_toStartOf="@+id/checkBoxIdea"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxIdea" />

    <CheckBox
        android:id="@+id/checkBoxImportant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="@string/important_text"
        app:layout_constraintStart_toStartOf="@+id/checkBoxToDo"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxToDo" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cancel_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/checkBoxImportant"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/checkBoxImportant"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.922" />

    <Button
        android:id="@+id/btnOK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ok_button"
        app:layout_constraintBottom_toBottomOf="@+id/btnCancel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.86"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btnCancel"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

您必须使用约束来修复您的布局。转到您的 xml 文件。选择元素并将其垂直和水平连接。如果您需要更多信息，请在 youtube 中搜索“约束布局”。

Answer 2

您在 btnOk 或 btnCancel 中没有任何地方定义这些按钮应位于 checkBoxImportant 下方，因此当屏幕 height/width 更改时，屏幕会根据提供的约束自行调整。现在你可以试试了，

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

    <EditText
        android:id="@+id/editTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="43dp"
        android:ems="10"
        android:hint="Name"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="47dp"
        android:layout_marginTop="20dp"
        android:ems="10"
        android:hint="Name"
        android:inputType="textMultiLine"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/editTitle" />

    <CheckBox
        android:id="@+id/checkBoxIdea"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="100dp"
        android:text="Idea"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/editDescription" />

    <CheckBox
        android:id="@+id/checkBoxToDo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="To Do"
        app:layout_constraintStart_toStartOf="@+id/checkBoxIdea"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxIdea" />

    <CheckBox
        android:id="@+id/checkBoxImportant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="Important"
        app:layout_constraintStart_toStartOf="@+id/checkBoxToDo"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxToDo" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/checkBoxImportant"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/checkBoxImportant"
        app:layout_constraintTop_toBottomOf="@id/checkBoxImportant"
        app:layout_constraintVertical_bias="0.922" />

    <Button
        android:id="@+id/btnOK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ok"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.86"
        app:layout_constraintStart_toEndOf="@id/btnCancel"
        app:layout_constraintTop_toTopOf="@id/btnCancel"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxImportant"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

因为phone的尺寸小，所以都需要固定在ScrollView

里面

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

    <androidx.constraintlayout.widget.ConstraintLayout 
       android:layout_width="match_parent"
       android:layout_height="match_parent">

    <EditText
        android:id="@+id/editTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="43dp"
        android:ems="10"
        android:hint="@string/title_hint"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="47dp"
        android:layout_marginTop="139dp"
        android:ems="10"
        android:hint="@string/description_hint"
        android:inputType="textMultiLine"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBoxIdea"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="244dp"
        android:text="@string/idea_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBoxToDo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="@string/todo_text"
        app:layout_constraintStart_toStartOf="@+id/checkBoxIdea"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxIdea" />

    <CheckBox
        android:id="@+id/checkBoxImportant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="@string/important_text"
        app:layout_constraintStart_toStartOf="@+id/checkBoxToDo"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxToDo" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cancel_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/checkBoxImportant"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/checkBoxImportant"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.922" />

    <Button
        android:id="@+id/btnOK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ok_button"
        app:layout_constraintBottom_toBottomOf="@+id/btnCancel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.86"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btnCancel"
        app:layout_constraintVertical_bias="0.0" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Answer 4

确保并非每个设备都具有相同的尺寸和像素密度；因此您的视图可以隐藏在屏幕之外，除非您在视图及其父视图之间提供了正确的约束 ViewGroup

如果您不能 100% 确定您的视图是否适合不同的屏幕，那么您应该将它们包裹在我在下面所做的 ScrollView 中，还调整了按钮约束以使其位于复选框下方.

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

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="44dp"
            android:layout_marginTop="43dp"
            android:ems="10"
            android:hint="@string/title_hint"
            android:inputType="textPersonName"
            android:text="Name"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/editDescription"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="47dp"
            android:layout_marginTop="139dp"
            android:ems="10"
            android:hint="@string/description_hint"
            android:inputType="textMultiLine"
            android:text="Name"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <CheckBox
            android:id="@+id/checkBoxIdea"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="44dp"
            android:layout_marginTop="244dp"
            android:text="@string/idea_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <CheckBox
            android:id="@+id/checkBoxToDo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="22dp"
            android:text="@string/todo_text"
            app:layout_constraintStart_toStartOf="@+id/checkBoxIdea"
            app:layout_constraintTop_toBottomOf="@+id/checkBoxIdea" />

        <CheckBox
            android:id="@+id/checkBoxImportant"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="22dp"
            android:text="@string/important_text"
            app:layout_constraintStart_toStartOf="@+id/checkBoxToDo"
            app:layout_constraintTop_toBottomOf="@+id/checkBoxToDo" />

        <Button
            android:id="@+id/btnCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cancel_button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/checkBoxImportant"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="@+id/checkBoxImportant"
            app:layout_constraintTop_toBottomOf="@+id/checkBoxImportant"
            app:layout_constraintVertical_bias="0.922" />

        <Button
            android:id="@+id/btnOK"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ok_button"
            app:layout_constraintBottom_toBottomOf="@+id/btnCancel"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.86"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintVertical_bias="0.0" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

应用布局不同于 Android Studio 布局

App layout differs from Android Studio layout

java

layout

android