时间戳

首页 > 解决方案 > 当我在平板电脑上运行应用程序时，Android Studio 中的按钮看起来很乱

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

问题描述

我正在尝试设计 4 行和 3 列相同大小的按钮。当我点击“推断约束”时，它在 Android Studio 中看起来确实不错 - 但是当我在平板电脑上运行它时，它看起来很乱！我做错了什么？我为 6 个按钮添加了 xml 代码（不是全部 12 个，因为它太长了）。

我希望输出看起来像这样： 从 Android Studio 捕获

但实际输出是大小和顺序不同的按钮 在此处输入图像描述 

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

标签： javaandroid

解决方案

您可以尝试在约束布局中添加网格布局。我将列数设置为 2，但在您的情况下，您只需将其更改为 3

<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"
android:background="@color/Glossy_Grape"
tools:context=".ShopActivity">

<GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="650dp"
    android:columnCount="2"
    android:columnOrderPreserved="false"
    android:translationY="80dp"
    app:layout_constraintTop_toTopOf="parent">

    <ImageButton
        android:id="@+id/btnFireEgg"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:width="0dp"
        android:background="?android:selectableItemBackground"
        android:padding="20dp"
        android:scaleType="fitCenter"
        android:src="@drawable/fireegg_copy"
        android:contentDescription="@string/name"></ImageButton>
  </GridLayout>

推荐阅读