在我的android studio仿真器中元素相互重叠 [英] Elements overlapping on each other in my android studio emulator

问题描述

我是 Android Studio 的新手，当我创建应用程序时，我所有的元素都相互重叠。我不确定如何编辑此代码。请给我详细说明。

I am new to Android Studio, when I created my app all my elements overlapped on each other. I am not sure how to edit this code. Please give me a detailed description.

布局编辑器和仿真器结果

< a href = https://i.stack.imgur.com/htwWD.png rel = nofollow noreferrer>

布局代码

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
    xmlns:android="schemas.android.com/apk/res/android"; 
    xmlns:app="schemas.android.com/apk/res-auto"; 
    xmlns:tools="schemas.android.com/tools"; 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.example.first.anew.MainActivity"> 

    <TextView
        android:layout_width="216dp"
        android:layout_height="60dp"
        android:text="Hello World!"
        tools:layout_editor_absoluteY="16dp"
        tools:layout_editor_absoluteX="61dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="45dp"
        android:text="Login"
        tools:layout_editor_absoluteY="343dp"
        tools:layout_editor_absoluteX="177dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="215dp"
        android:layout_height="65dp"
        android:text="username"
        tools:layout_editor_absoluteY="117dp"
        tools:layout_editor_absoluteX="61dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        app:layout_constraintGuide_begin="20dp"
        android:orientation="horizontal" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="217dp"
        android:layout_height="57dp"
        android:ems="10"
        android:inputType="textPassword"
        tools:layout_editor_absoluteY="218dp"
        tools:layout_editor_absoluteX="61dp" />
</android.support.constraint.ConstraintLayout>

推荐答案

由于以下原因，您的仿真器屏幕和布局编辑器有所不同工具名称空间。简而言之，它是一个工具，可以帮助您更好地可视化所编写的代码。该工具还会生成诸如 tools：layout_editor_absoluteY = 343dp 之类的约束，这些约束会通知布局编辑器应如何绘制视图。问题在于此约束不会出现在您的应用程序代码中，从而导致所有视图重叠时出现奇怪的行为（由于在应用程序代码中未使用上述约束，因此我们可以推断出根本没有约束）。

Your emulator screen and the layout editor are different because of tools namespace. In a few words, it is a tool that helps you to better visualise the written code. This tool also generates constraints like tools:layout_editor_absoluteY="343dp", which inform the layout editor on how it should draw the views. The problem is that this constraints will not be present in your app code, resulting in that weird behaviour when all views are overlapped (since the above mentioned constraints are not used in the app code we can deduct that there are no constraint at all).

由于您是初学者，所以我建议以 LinearLayout 或 RelativeLayout ，因为我认为 ConstraintLayout 很难理解，使用和调试。

Since you are a beginner I would recommend to start with a LinearLayout or RelativeLayout because I think that ConstraintLayout is harder to understand, use and debug.

这篇关于在我的android studio仿真器中元素相互重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！