我是ConstraintLayout的新手,我正在尝试使用ConstraintLayout复制GridLayout提供的相同网格行为。
具体来说,我想设计一个两列网格。第一列宽度应尽可能窄,而第二列应占用所有剩余的水平空间。当然,第二列应该在第一列的右侧,或者更确切地说,在第一列的最宽视图中。
我不知道如何使用ConstraintLayout复制最后一个要求。我不想在两列之间使用网格线,因为第一列不应该具有固定的宽度和百分比宽度,而是应该与其最宽的视图一样宽。
在https://gist.github.com/venator85/499dd82f47b3efbbed7a1e9e1ca1412d我准备了一个布局示例和相应的预览,显示了一个实现我想要的GridLayout。在该布局中的前两个ConstraintLayout尝试显示C1和D1与B1对齐,C2和D2与B2对齐。当B2比A2窄时,A1和C1将重叠。
任何帮助?
由于
答案 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布局编辑器中的布局。我将指南推到右边,以展示它是如何浮动的。 (代码跟随图像。)
这是一个截屏。我希望你觉得这很有用。
以下是使用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>
答案 3 :(得分:0)
我不认为此时可以纯粹使用一个ConstraintLayout
容器执行。我希望将来谷歌会添加group_id
或其他一些方式来计算布局,并使用&#34;对齐组&#34;。
同时,我建议您在ConstraintLayout
内使用ConstraintLayout
个容器。
这就是我实现这个的方式:
制作行&#34; grid&#34;比如,我使用&#34; ConstraintLayout Chains&#34;。每个ConstraintLayout
链中的行数必须相同,因此自动分布将正确对齐行。 (虽然如果不使用它们可以保持空白或隐藏)。