尝试使用ConstraintLayout复制GridLayout列对齐

时间:2017-03-16 22:56:55

标签: android android-layout android-gridlayout android-constraintlayout

我是ConstraintLayout的新手,我正在尝试使用ConstraintLayout复制GridLayout提供的相同网格行为。

具体来说,我想设计一个两列网格。第一列宽度应尽可能窄,而第二​​列应占用所有剩余的水平空间。当然,第二列应该在第一列的右侧,或者更确切地说,在第一列的最宽视图中。

我不知道如何使用ConstraintLayout复制最后一个要求。我不想在两列之间使用网格线,因为第一列不应该具有固定的宽度和百分比宽度,而是应该与其最宽的视图一样宽。

https://gist.github.com/venator85/499dd82f47b3efbbed7a1e9e1ca1412d我准备了一个布局示例和相应的预览,显示了一个实现我想要的GridLayout。在该布局中的前两个ConstraintLayout尝试显示C1和D1与B1对齐,C2和D2与B2对齐。当B2比A2窄时,A1和C1将重叠。

任何帮助?

由于

4 个答案:

答案 0 :(得分:7)

谷歌在ConstraintLayout的最新版本中引入了“障碍”的概念,这有助于回答这个100%可解决的问题。请参阅ConstraintLayout 1.1.0 beta 1 release notes 。虽然,该说明并未包含有关新功能的大量信息,但有talk at I/O 2017触及了新内容。

新解决方案是复制带有障碍的GridLayout网格。左侧TextView右侧有一个垂直屏障,前三排下方有一个屏障。障碍取决于每个TextView中存在多少文本,但始终保持app:constraint_referenced_ids中指定的位置。从本质上讲,障碍就像浮动指南。此解决方案不依赖于任何编码来支持视频中的内容。

以下是video of the new layout,其中显示了每个TextView所需的定位,作为另一个TextView更改的内容。该视频是在Android Studio 2.3.2的设计工具中制作的。

使用障碍的新布局的XML:

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

    <android.support.constraint.Barrier
        android:id="@+id/barrierVertical"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:barrierDirection="right"
        app:constraint_referenced_ids="L1, L2, L3, L4" />

    <TextView
        android:id="@+id/L1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="L1 *"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/R1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1*"
        app:layout_constraintLeft_toRightOf="@+id/barrierVertical"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="L1, R1" />

    <TextView
        android:id="@+id/L2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="L2 L2*"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier1"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/R2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2*"
        app:layout_constraintLeft_toRightOf="@+id/barrierVertical"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier1"
        tools:ignore="HardcodedText" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="L2, R2" />

    <TextView
        android:id="@+id/L3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="L3 L3 L3*"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier2"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/R3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3*"
        app:layout_constraintLeft_toRightOf="@id/barrierVertical"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier2"
        tools:ignore="HardcodedText" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="L3, R3" />

    <TextView
        android:id="@+id/L4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="L4 L4 L4 L4 L4 L4*"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/barrier3"
        tools:ignore="HardcodedText,RtlHardcoded" />

    <TextView
        android:id="@+id/R4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4*"
        app:layout_constraintLeft_toRightOf="@+id/barrierVertical"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/barrier3"
        tools:ignore="HardcodedText" />

</android.support.constraint.ConstraintLayout>

答案 1 :(得分:2)

更新:请参阅accepted answer

我怀疑是否有办法以纯粹使用XML的方式复制带有GridLayout的{​​{1}}。如果您愿意让一些代码帮助布局,那么您可以使用可移动的垂直指南将ConstraintLayout设置为ConstraintLayout

在描绘时在两列中构建XML布局。左列中每个GridLayout的顶部将被约束到右列中相应TextView的顶部,因此左侧条目将向上或向下浮动,因为右侧的条目会增加或减少高度。

所有右侧列视图都会在左侧约束到上面提到的垂直指南。此指南在XML中的放置应该是合理的,但实际放置将在代码中进行,并将根据左侧最宽视图的宽度进行调整。

这是您提出的问题的解决方案,但它不是一般解决方案。以下内容取决于左侧每个TextView的高度小于或等于右侧相应TextView的高度。

以下是Android Studio布局编辑器中的布局。我将指南推到右边,以展示它是如何浮动的。 (代码跟随图像。)

enter image description here

这是一个截屏。我希望你觉得这很有用。

enter image description here

以下是使用TextView的布局。 (自初始发布以来更新,以便在左列中进行换行。)

constrained.xml

ConstraintLayout

以下是调整指南位置的<?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:id="@+id/constrained" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_begin="257dp" /> <TextView android:id="@+id/L1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="0dp" android:text="A1 A1 A1 A1 A1*" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/guideline" app:layout_constraintTop_toTopOf="parent" app:layout_constraintWidth_default="wrap" tools:ignore="HardcodedText" /> <TextView android:id="@+id/L2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="0dp" android:layout_marginTop="0dp" android:text="B1 B1 B1 B1 B1*" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/guideline" app:layout_constraintTop_toTopOf="@+id/R2" app:layout_constraintWidth_default="wrap" tools:ignore="HardcodedText" /> <TextView android:id="@+id/L3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="0dp" android:layout_marginTop="0dp" android:text="A2 A2 A2 A2*" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/guideline" app:layout_constraintTop_toTopOf="@+id/R3" app:layout_constraintWidth_default="wrap" tools:ignore="HardcodedText" /> <TextView android:id="@+id/L4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="0dp" android:layout_marginTop="0dp" android:text="B2 B2 B2 B2 B2*" app:layout_constraintHorizontal_bias="0.02" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/guideline" app:layout_constraintTop_toTopOf="@+id/R4" app:layout_constraintWidth_default="wrap" tools:ignore="HardcodedText" /> <TextView android:id="@+id/R1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1*" app:layout_constraintLeft_toRightOf="@id/guideline" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" tools:ignore="HardcodedText" /> <TextView android:id="@+id/R2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1*" app:layout_constraintLeft_toRightOf="@+id/guideline" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/R1" tools:ignore="HardcodedText" /> <TextView android:id="@+id/R3" android:layout_width="0dp" android:layout_height="wrap_content" android:text="C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2*" app:layout_constraintLeft_toRightOf="@id/guideline" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/R2" tools:ignore="HardcodedText" /> <TextView android:id="@+id/R4" android:layout_width="0dp" android:layout_height="wrap_content" android:text="D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2*" app:layout_constraintLeft_toRightOf="@+id/guideline" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/R3" tools:ignore="HardcodedText" /> </android.support.constraint.ConstraintLayout>

MainActivity.java

Activity

答案 2 :(得分:2)

试试这个。

<?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"
android:orientation="horizontal">


    <TextView
        android:id="@+id/textView5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="A1 A1 A1 A1 "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="C1 C1 C1 C1 "
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintLeft_toRightOf="@+id/textView5"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="B1 B1 B1 B1 "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView8"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="D1 D1 D1 D1 "
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintLeft_toRightOf="@+id/textView5"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

</android.support.constraint.ConstraintLayout>

像这样的东西。 enter image description here

答案 3 :(得分:0)

我不认为此时可以纯粹使用一个ConstraintLayout容器执行。我希望将来谷歌会添加group_id或其他一些方式来计算布局,并使用&#34;对齐组&#34;。

同时,我建议您在ConstraintLayout内使用ConstraintLayout个容器。 这就是我实现这个的方式:

enter image description here enter image description here

制作行&#34; grid&#34;比如,我使用&#34; ConstraintLayout Chains&#34;。每个ConstraintLayout链中的行数必须相同,因此自动分布将正确对齐行。 (虽然如果不使用它们可以保持空白或隐藏)。

xml gist