android - 用 ConstraintLayout 模仿 TableLayout

标签 android android-layout layout android-constraintlayout

我想用 ConstraintLayout 做这个布局。

enter image description here 但我什至没有完成它的 1(绿色)部分。

我所做的是添加 3 个 TextViews 1,2 和 3(粉红色)将它们连接到父级的左侧并告诉它们一个在另一个下面。它有效。

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

添加时的问题

 app:layout_constraintLeft_toRightOf="2 OR 3" 

4 和 5 中的文本未正确对齐。我明白了

enter image description here

当我使用 Guideline 时,我得到了这个

 app:layout_constraintLeft_toRightOf="@id/guideline"

enter image description here

有人知道什么可以帮助解决这个问题吗?

编辑。附言第一次尝试布局

 <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>

编辑。 (结果应该是什么样子的截图) enter image description here

最佳答案

您可以使用 Barrier 来复制 TableLayout 的行为。

enter image description here

<?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"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="@string/warehouse"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:text="@string/hospital"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView1" />

  <android.support.constraint.Barrier
    android:id="@+id/barrier7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="textView2,textView1" />

  <TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="@string/lorem_ipsum"
    app:layout_constraintStart_toEndOf="@+id/barrier7"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

更多信息在这里:https://constraintlayout.com/basics/barriers.html

关于android - 用 ConstraintLayout 模仿 TableLayout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42860162/

相关文章:

css - 如何将 Bootstrap 列溢出/扩展/渗出到视口(viewport)的边缘?

Java - JFrame、JPanel、布局和裁剪

android soundpool堆大小溢出

android - 尝试使用 'com.onesignal:OneSignal:3.7.1'但出现错误

android - 布局资源文件中的两个线性布局,但只有一个显示

java - 什么是 textview.setTextSize()?

html - 获取 HTML textarea 控件以扩展到容器的宽度

java - FragmentStatePagerAdapter 与 Glide 一起使用会导致 NullPointerException

android - 如何将映射文件上传到 Firebase?

xml - 使用 Typedarray 的自定义 View 返回 null 所有参数