為什么設計看起來與 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>

這將如下所示：