更改按钮中的文本时，按钮正在更改 GridLayout 中的位置

Question

我有一个充满按钮的 GridLayout，并且文本经常更改。并且总是在文本更改后，按钮有时会向上或向下移动一点，即使它们不应该移动。我还看到与按钮中文本大小的一些巧合（我在按钮内有自动调整文本大小）。我还发现，移动的范围随着按钮的高度而增加。有动图：

还有片段xml，其中有按钮：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".FragmentTypeA">

    <androidx.gridlayout.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:columnCount="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:rowCount="5"

        app:autoSizeTextType="uniform"
        app:autoSizeMinTextSize="9sp"
        app:autoSizeMaxTextSize="16sp"
        app:autoSizeStepGranularity="2sp">

        <Button
            android:id="@+id/button1"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="253dp"
            tools:layout_editor_absoluteY="317dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="253dp"
            tools:layout_editor_absoluteY="381dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="133dp"
            tools:layout_editor_absoluteY="258dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button4"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="253dp"
            tools:layout_editor_absoluteY="258dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button5"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="28dp"
            tools:layout_editor_absoluteY="258dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button6"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="28dp"
            tools:layout_editor_absoluteY="381dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button7"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="133dp"
            tools:layout_editor_absoluteY="317dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button8"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="133dp"
            tools:layout_editor_absoluteY="381dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button9"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="28dp"
            tools:layout_editor_absoluteY="317dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>
    </androidx.gridlayout.widget.GridLayout>

</FrameLayout>

如果您需要更多信息，请写信，我会添加。非常感谢。

Answer 1

避免在布局中对 layout_height、layout_width 中的尺寸进行硬编码，原因很明显，不同设备的尺寸会有所不同。

要解决由于按钮文本长度不同而导致的 'button alignment' 问题，请使用嵌套 LinearLayout 和 layout_weight 属性的组合，如下所示：

  <androidx.gridlayout.widget.GridLayout
    app:columnCount="3"
    app:rowCount="5"
    app:autoSizeTextType="uniform"
    app:autoSizeMinTextSize="9sp"
    app:autoSizeMaxTextSize="16sp"
    app:autoSizeStepGranularity="2sp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="45dp">

        <Button
          android:text="@string/button1"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:layout_width="0dp"/>

        <Button
          android:text="@string/button2"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:layout_width="0dp"/>

        <Button
          android:text="@string/button3"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:layout_width="0dp"/>

      </LinearLayout>

      <LinearLayout
        <!-- same as above, but for button 4,5,6 -->
      </LinearLayout>

      <LinearLayout
        <!-- same as above, but for button 7,8,9 -->
      </LinearLayout>

    </LinearLayout>

  </androidx.gridlayout.widget.GridLayout>

以上布局有效，但 'text autosizing' 无效。要使其工作，需要将 'sizing' 属性添加到所有按钮。这可以使用自定义样式来完成。

  <Button
    style="@style/MyButtonStyle"
    android:text="@string/button1"
    android:layout_height="@dimen/max_height_btn"
    android:layout_weight="1"
    android:layout_width="0dp"/>

  <style name="MyButtonStyle" parent="Widget.AppCompat.Button">
    <item name="autoSizeTextType">uniform</item>
    <item name="autoSizeMinTextSize">9sp</item>
    <item name="autoSizeMaxTextSize">16sp</item>
    <item name="autoSizeStepGranularity">2sp</item>
  </style>

更改按钮中的文本时，按钮正在更改 GridLayout 中的位置

Buttons are changing position inside GridLayout when changing text in Buttons

android

android-button

android-gridlayout