应用布局与 Android Studio 布局不同

【问题标题】：App layout differs from Android Studio layout应用布局与 Android Studio 布局不同
【发布时间】：2023-03-25 21:52:01
【问题描述】：

我是 Android Studio 和 Java 编程的新手，如果这是一个愚蠢的问题，我很抱歉。我制作了一个带有基本活动的项目，它类似于一个笔记应用程序，当您单击浮动按钮时，应该会出现类似弹出窗口的东西。我将发布2个屏幕截图。首先是应用的外观，其次是我运行应用时应用在手机上的外观。

这就是应用的外观

这就是它的样子

这是此布局的代码：

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

【问题讨论】：

    标签： java android layout


    【解决方案1】：

    您在 btnOk 或 btnCancel 中没有定义这些按钮应位于 checkBoxImportant 下方，因此当屏幕高度/宽度发生变化时，屏幕会根据提供的约束自行调整。现在你可以试试，

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

    【讨论】：

    • 非常感谢，这很有帮助。 :D
    【解决方案2】：

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

    【讨论】：

    • 感谢您的帮助。
    【解决方案3】：

    因为手机体积小，所以都需要固定在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>

    【讨论】：

    • 感谢您的帮助，屏幕尺寸实际上是 1080x2340 我只是没有定义按钮 OK 和 Cancel 应该在复选框下方，就像 Sarah 在上面的答案中告诉我的那样，但无论如何谢谢，这可以也很有用。
    【解决方案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>

    【讨论】：

    • 感谢您的帮助，这很有帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-07-26
    • 2021-09-20
    • 1970-01-01
    • 1970-01-01
    • 2019-01-25
    • 2021-08-14
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode