ConstraintLayout 中的视图不适合屏幕边界

Question

我正在尝试在一个 ConstraintLayout 中对齐 3 个 TableLayout。我希望带有 MaterialButtons 的 table 具有 1:1 尺寸比，而顶部和开始时的 table 仍然完全保持在屏幕范围内。这是它目前的样子：

这个TableLayout的定义：

      <TableLayout
            android:id="@+id/play_field_table"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/play_field_row_values_table"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.7">

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <com.google.android.material.button.MaterialButton style="@style/field_unpainted" />
                ...
                <com.google.android.material.button.MaterialButton style="@style/field_unpainted" />
            </TableRow> 
            ...
      </TableLayout>

按钮样式定义：

    <style name="field_unpainted" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="android:layout_margin">0dp</item>
        <item name="android:padding">0dp</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:textAlignment">center</item>
        <item name="android:textStyle">bold</item>
        <item name="android:backgroundTint">#ffffff</item>
        <item name="android:strokeColor">#000000</item>
        <item name="cornerFamily">cut</item>
        <item name="cornerRadius">0dp</item>
    </style>

开头TableLayout的定义：

      <TableLayout
            android:id="@+id/play_field_row_values_table"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginLeft="8dp"
            app:layout_constraintBottom_toBottomOf="@+id/play_field_table"
            app:layout_constraintEnd_toStartOf="@+id/play_field_table"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/play_field_table">

            <TableRow
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="end|center_vertical"
                    android:text="1 1"
                    android:textAlignment="gravity"
                    android:textColor="@color/black" />
            </TableRow>
            ...
      </TableLayout>

这是上面TableLayout的定义：

        <TableLayout
            android:id="@+id/play_field_column_values_table"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/play_field_table"
            app:layout_constraintEnd_toEndOf="@+id/play_field_table"
            app:layout_constraintStart_toStartOf="@+id/play_field_table">

            <TableRow
                android:layout_width="0dp"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center_horizontal|bottom"
                    android:text="1"
                    android:textAlignment="gravity"
                    android:textColor="@color/black" />
                ...
            </TableRow>
            ...
      </TableLayout>

我试过将“id/play_field_table”上的 layout_constraintDimensionRatio 设置为 1:1，但它会伸出屏幕：

还尝试将按钮样式中的 layout_constraintDimensionRatio 设置为 1:1，但是按钮要么不显示，要么与上面的结果相同。我觉得应该同时为按钮和 table 设置比率，只是想不出正确的组合。有什么建议吗？

Answer 1

我通过为“@+id/play_field_table”TableLayout 设置以下值设法解决了这个问题：

将“layout_height”从“wrap_content”更改为“0dp”值
已将“layout_constraintDimensionRatio”添加为“1:1”值
向 TableLayout 内的 TableRows 添加了值为“1”的“layout_weight”

ConstraintLayout 中的视图不适合屏幕边界

View in ConstraintLayout does not fit within screen bounds

android

responsive-design

material-design

android-constraintlayout

android-tablelayout