为什么设计看起来与 android studio 模拟器中显示的不同？

Question

我正在尝试在 Android Studio 上制作一个游戏应用程序，当我尝试在模拟器上运行我的应用程序时，它看起来与设计中显示的不同。 我怎样才能解决这个问题 ？

这是我的布局 xml 代码：

                            <?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"
                tools:context=".MainActivity">

                <Button
                    android:id="@+id/button"
            style="@android:style/Widget.DeviceDefault.Light.Button.Small"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:background="@drawable/custom_button"
                    android:text="player1"
                    android:textAllCaps="false"
                    android:textSize="20sp"
                    tools:layout_editor_absoluteX="78dp"
                    tools:layout_editor_absoluteY="271dp" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:layout_marginBottom="280dp"
                    android:background="@drawable/custom_button"
                    android:text="player2"
                    android:textAllCaps="false"
                    android:textSize="20sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    tools:layout_editor_absoluteX="78dp" />

                <Button
                    android:id="@+id/button3"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:background="@drawable/custom_button"
                    android:text="New"
                    android:textAllCaps="false"
                    android:textSize="20sp"
                    tools:layout_editor_absoluteX="78dp"
                    tools:layout_editor_absoluteY="334dp" />

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:padding="11dp"
                    android:text="TextView"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    tools:layout_editor_absoluteX="187dp"
                    tools:layout_editor_absoluteY="271dp" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:padding="11dp"
                    android:text="TextView"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    tools:layout_editor_absoluteX="187dp"
                    tools:layout_editor_absoluteY="334dp" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="100dp"
                    android:layout_height="51dp"
                    android:padding="15dp"
                    android:text="TextView"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    tools:layout_editor_absoluteX="187dp"
                    tools:layout_editor_absoluteY="400dp" />

提前致谢

Answer 1

使用 ConstraintLayout 时需要约束您的视图。

查看使用它构建 UI 的指南： https : //developer.android.com/training/constraint-layout

此外，要快速获得与您所看到的接近的内容，请单击此按钮以获取布局编辑器对约束的最佳猜测，以将视图保持在当前位置。

Answer 2

• 您缺少对视图的约束，因此在运行时它们的位置与预览不同。
  

• 此外，因为不同的设备有不同的屏幕尺寸，所以你不能在视图上使用固定尺寸，因为它在不同的设备上看起来会有所不同。

---

您可以将 ConstraintLayout 用于：

app:layout_constraintHeight_percent="0.1"
app:layout_constraintWidth_percent="0.3"

以及一些实现响应式布局的指南：

下面是一个例子：

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


    <Button
        android:id="@+id/button"
        style="@android:style/Widget.DeviceDefault.Light.Button.Small"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="player1"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/guideline3"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintWidth_percent="0.3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="player2"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/button3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="New"
        android:textAllCaps="false"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintWidth_percent="0.3" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

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

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



</androidx.constraintlayout.widget.ConstraintLayout>

这将如下所示：