将旧式表格布局转换为约束布局

Question

我正在尝试将使用表格布局制作的此布局转换为约束布局。 第二列和第三列可以隐藏。 价格应该是正确的。 第一列的标题应该左对齐。

这是一个更好地学习约束的练习，但我失败了

<?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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginEnd="24dp"
        android:shrinkColumns="*"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        android:divider="?android:attr/dividerHorizontal"
        android:showDividers="middle">

        <TableRow android:layout_marginBottom="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:gravity="start"
                android:text="Price"
                android:textColor="@android:color/black"
                android:textSize="12sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="-"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="2"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="-"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="3"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="2000$"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

        </TableRow>



        <TableRow
            android:layout_marginTop="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:gravity="start"
                android:text="Price2\n(test)"
                android:textColor="@android:color/black"
                android:textSize="12sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="8000$"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="2"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="-5000$"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="3"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="3000"
                android:textColor="@android:color/black"
                android:textSize="12sp" />
        </TableRow>
    </TableLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

我尝试了不同的方法：障碍、流程，但我没有达到目标。 我发现很难垂直对齐第 2、3 和 4 列，同时水平对齐第 1 和 2 行

Answer 1

我认为您正在寻找Barriers 来完成您的练习。您将在每列的左侧设置一个障碍，并将每列约束到右侧的障碍。

这是一个使用 ConstraintLayout 代替 TableLayout 的示例。它足够复杂，我认为使用 TableLayout 是有必要的。这是代码后跟的结果。该代码有一些解释发生了什么的 cmets。

<!--
    This LinearLayout is here just to provide a means to center the ConstraintLayout.
-->
<androidx.appcompat.widget.LinearLayoutCompat 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingTop="32dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

<!--
    A barrier is set at the start of each column.
-->
        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="r1c1,r2c1" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="r1c2,r2c2" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="r1c3,r2c3" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="r1c4,r2c4" />
<!--
    Each cell is constrained horizontally to the barrier to the right and to its own barrier to
    the left. app:layout_constraintWidth_min="wrap" is specified to stop the cells from collapsing.
    This is a hack IMO but effective.
-->
        <TextView
            android:id="@+id/r1c1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="start"
            android:text="Price"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@id/barrier2"
            app:layout_constraintStart_toStartOf="@id/barrier1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r2c1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="start"
            android:text="Price2\n(test)"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@id/barrier2"
            app:layout_constraintStart_toStartOf="@id/barrier1"
            app:layout_constraintTop_toBottomOf="@id/divider"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r1c2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="end"
            android:text="-"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:visibility="visible"
            app:layout_constraintEnd_toStartOf="@id/barrier3"
            app:layout_constraintStart_toStartOf="@id/barrier2"
            app:layout_constraintTop_toTopOf="@id/r1c1"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r2c2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="end"
            android:text="8000$"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:visibility="visible"
            app:layout_constraintEnd_toStartOf="@id/barrier3"
            app:layout_constraintStart_toStartOf="@id/barrier2"
            app:layout_constraintTop_toBottomOf="@id/divider"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r1c3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="end"
            android:text="-"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintEnd_toStartOf="@id/barrier4"
            app:layout_constraintStart_toStartOf="@id/barrier3"
            app:layout_constraintTop_toTopOf="@id/r1c1"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r2c3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="end"
            android:text="-5000$"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintEnd_toStartOf="@id/barrier4"
            app:layout_constraintStart_toStartOf="@id/barrier3"
            app:layout_constraintTop_toBottomOf="@id/divider"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r1c4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="end"
            android:text="2000$"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="@id/r1c1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@id/barrier4"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r2c4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="end"
            android:text="3000"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@id/barrier4"
            app:layout_constraintTop_toBottomOf="@id/divider"
            app:layout_constraintWidth_min="wrap" />

        <View
            android:id="@+id/divider"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:background="@android:color/black"
            app:layout_constraintEnd_toEndOf="@id/r1c4"
            app:layout_constraintStart_toStartOf="@id/r1c1"
            app:layout_constraintTop_toBottomOf="@id/r1c1" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.LinearLayoutCompat>

TableLayout 将使列中每个单元格的宽度成为最宽单元格内容的宽度。这对于 ConstraintLayout 来说是很棘手的，它通过将每个单元格的宽度设置为 0dp 并将开始和结束约束到包围列的障碍来完成。有关说明，请参阅 this Stack Overflow question。我认为这是一种 hack，但它确实有效。

此实现与 TableLayout 的另一个区别是折叠单个单元格时表格的行为方式。 TableLayout 将移动剩余的单元格，而此实现将保留原始列。如果列中的所有单元格都折叠（设为gone），那么这与 TableLayout 的作用相同。