用ConstraintLayout模仿TableLayout

Question

我想用ConstraintLayout来做这个布局。

但我没有做到1（绿色）部分。

我所做的是我添加3个TextViews 1,2和3（粉红色）将它们连接到父项的左侧，并告诉它们是一个在另一个之下。有用。

然后，我需要添加视图4和5，以便它们始终位于2和3的右侧，并且其内容必须垂直对齐左侧边缘，如图所示。

，当我添加

app:layout_constraintLeft_toRightOf="2 OR 3" 

文本在4和5没有正确对齐的问题。我得到这个

当我使用指南我得到这个

app:layout_constraintLeft_toRightOf="@id/guideline" 

有谁知道什么可以帮助呢？

编辑。附：第一次尝试的布局

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

<TextView 
    android:id="@+id/instrument_name" 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:text="AUDUSD" 
    app:layout_constraintStart_toStartOf="@+id/constraintLayout" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent"/> 

<TextView 
    android:id="@+id/trade_action_label" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:text="BUYjhkjhkjhvg" 
    app:layout_constraintStart_toStartOf="@+id/instrument_name" 
    app:layout_constraintTop_toBottomOf="@id/instrument_name" 
    tools:layout_editor_absoluteX="16dp" 
    android:layout_marginTop="1dp"/> 

<TextView 
    android:id="@+id/net_pl" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Net p/l" 
    app:layout_constraintStart_toStartOf="@+id/trade_action_label" 
    app:layout_constraintTop_toBottomOf="@id/trade_action_label"/> 

<TextView 
    android:id="@+id/record_amount" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="123" 
    app:layout_constraintTop_toTopOf="@id/trade_action_label" 
    app:layout_constraintLeft_toRightOf="@id/trade_action_label" 
    tools:layout_editor_absoluteY="33dp" 
    /> 

<TextView 
    android:id="@+id/pl_value" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="12" 
    app:layout_constraintTop_toTopOf="@id/net_pl" 
    app:layout_constraintLeft_toRightOf="@id/net_pl"/> 
</android.support.constraint.ConstraintLayout> 

编辑。 （结果应该如何的截图）

Answer 1

我仔细看了一下你正在尝试做什么。我认为你需要考虑在你的ConstraintLayout中使用加权链。请参阅文档here。

请确保您使用实现链的ConstraintLayout版本。

---

更新

这里是你正在尝试做一个例子。我简化了布局以更好地展示什么会起作用。注意box1 < - > box2和box3 < - > box4的交叉链接。这些链接建立了链条。

<?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/constraintLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:padding="16dp" 
    tools:layout_editor_absoluteX="0dp" 
    tools:layout_editor_absoluteY="81dp"> 

<TextView 
    android:id="@+id/box1" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="0dp" 
    android:layout_marginTop="16dp" 
    android:text="Text box 1 xxxxxxx" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/box2" 
    app:layout_constraintTop_toTopOf="parent" /> 

<TextView 
    android:id="@id/box2" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="0dp" 
    android:layout_marginTop="0dp" 
    android:text="Text box 2 yyyyyyyyyy" 
    app:layout_constraintLeft_toRightOf="@id/box1" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="@id/box1" /> 

<TextView 
    android:id="@+id/box3" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="0dp" 
    android:layout_marginTop="0dp" 
    android:text="Text box 3 zzzz" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/box4" 
    app:layout_constraintTop_toBottomOf="@id/box1" /> 

<TextView 
    android:id="@id/box4" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="0dp" 
    android:layout_marginTop="0dp" 
    android:text="Text box 4" 
    app:layout_constraintLeft_toRightOf="@id/box3" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="@id/box3" /> 

</android.support.constraint.ConstraintLayout> 

以下是布局图。

使用app:layout_constraintHorizontal_weight来影响每个视图获得多少空间。