java - 当我在平板电脑上运行应用程序时，Android Studio 中的按钮看起来很乱

Question

我正在尝试设计 4 行 3 列的相同大小的按钮。当我点击“Infer Constraints”时，它在 Android Studio 中看起来确实不错——但是当我在我的平板电脑上运行它时，它看起来很乱!我做错什么了？ 我已经为 6 个按钮添加了 xml 代码(不是全部 12 个，因为它太长了)。

我希望输出看起来像这样:

但实际输出的是尺寸和顺序不同的按钮

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".MemoryGame"
tools:layout_editor_absoluteY="81dp">

<Spinner
    android:id="@+id/muses_spinner"
    android:layout_width="0dp"
    android:layout_height="29dp"
    android:layout_marginTop="48dp"
    android:layout_marginBottom="38dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/connect_button" />

<Button
    android:id="@+id/button0_0"
    android:layout_width="0dp"
    android:layout_height="97dp"
    android:layout_marginStart="1dp"
    android:layout_marginLeft="1dp"
    android:layout_marginTop="1dp"
    android:layout_marginEnd="124dp"
    android:layout_marginRight="124dp"
    android:layout_marginBottom="1dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button1_0"
    app:layout_constraintEnd_toStartOf="@+id/button1_2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button1_0"
    android:layout_width="124dp"
    android:layout_height="97dp"
    android:layout_marginStart="1dp"
    android:layout_marginLeft="1dp"
    android:layout_marginTop="1dp"
    android:layout_marginEnd="5dp"
    android:layout_marginRight="5dp"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button1_1"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button0_0" />

<Button
    android:id="@+id/button0_1"
    android:layout_width="124dp"
    android:layout_height="97dp"
    android:layout_marginStart="1dp"
    android:layout_marginLeft="1dp"
    android:layout_marginTop="1dp"
    android:layout_marginEnd="1dp"
    android:layout_marginRight="1dp"
    android:layout_marginBottom="1dp"
    android:text="BUTTON"
    app:layout_constraintBottom_toTopOf="@+id/button1_1"
    app:layout_constraintEnd_toStartOf="@+id/button0_2"
    app:layout_constraintStart_toEndOf="@+id/button0_0"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button1_1"
    android:layout_width="124dp"
    android:layout_height="97dp"
    android:layout_marginStart="1dp"
    android:layout_marginLeft="1dp"
    android:layout_marginTop="1dp"
    android:layout_marginEnd="1dp"
    android:layout_marginRight="1dp"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button1_2"
    app:layout_constraintStart_toEndOf="@+id/button1_0"
    app:layout_constraintTop_toBottomOf="@+id/button0_1" />

<Button
    android:id="@+id/button1_2"
    android:layout_width="0dp"
    android:layout_height="103dp"
    android:layout_marginEnd="7dp"
    android:layout_marginRight="7dp"
    android:text="Button"
    app:layout_constraintBaseline_toBaselineOf="@+id/button1_1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button0_0" />

<Button
    android:id="@+id/button0_2"
    android:layout_width="124dp"
    android:layout_height="97dp"
    android:layout_marginStart="1dp"
    android:layout_marginLeft="1dp"
    android:layout_marginTop="1dp"
    android:layout_marginEnd="7dp"
    android:layout_marginRight="7dp"
    android:layout_marginBottom="1dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button1_2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button1_1"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/connect_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="302dp"
    android:layout_marginLeft="302dp"
    android:layout_marginBottom="64dp"
    android:text="connect"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/refresh_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginEnd="203dp"
    android:layout_marginRight="203dp"
    android:layout_marginBottom="1dp"
    android:text="refresh"
    app:layout_constraintBottom_toTopOf="@+id/muses_spinner"
    app:layout_constraintEnd_toStartOf="@+id/connect_button"
    app:layout_constraintStart_toStartOf="@+id/muses_spinner" />
</android.support.constraint.ConstraintLayout>

Answer 1

尝试使用另一种布局。例如线性布局、表格布局 附言我正在尝试通过一些代码，但是这个 f.. 页面不允许。

Layout