ConstraintLayout 以不同方式对待多个水平链

ConstraintLayout Treats Multiple Horizontal Chains Differently

我正在尝试设置我认为应该是一个简单的布局 ConstraintLayout 我有一系列文本条目,标签的大小可以根据语言的不同而变化。标签右侧有一道屏障,因此即使标签长度发生变化,文本条目也能保持对齐。

我希望文本条目为标称大小(在此示例中,顶部条目为 200dp,其他条目为 150dp),但如果标签很长且屏幕不合适,则能够根据需要缩小以适合屏幕是小。在横向模式下,或在更大的屏幕上,条目应该是它们的最大尺寸,并靠着屏障向左对齐。

经过多次试验和错误后,我通过将两个链设置为 "spread_inside" 并将最后一个链设置为 "packed",使下面的布局起作用。将它们全部设置为 spread_inside 会弄乱布局(entry_2 缩小到最小尺寸)。

这闻起来像是在将来的 ConstraintLayout 更新中将停止以这种方式工作(这是使用 com.android.support.constraint:constraint-layout:1.1.0-beta5)。此布局的行为与使用 beta4 不同(同样错误,但错误不同,beta4 将它们全部对齐在屏幕的右侧)。

我是不是漏掉了什么?还有其他人有类似的链模式吗?有更好的方法吗?

<?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:padding="16dp"
    tools:context="com.mypackage.testapp.MainActivity">

    <TextView
        android:text="Label 1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/entry_1"
        app:layout_constraintBottom_toBottomOf="@+id/entry_1"
        android:id="@+id/label_1" />

    <EditText
        android:id="@+id/entry_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:inputType="text"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="100.0"
        app:layout_constraintLeft_toRightOf="@+id/guideline"
        app:layout_constraintRight_toLeftOf="@+id/space_1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="200sp"
        app:layout_constraintWidth_min="100sp" />

    <Space
        android:id="@+id/space_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/entry_1"
        app:layout_constraintHorizontal_weight="0.01"
        app:layout_constraintTop_toTopOf="@+id/entry_1"
        app:layout_constraintBottom_toBottomOf="@+id/entry_1"/>

    <TextView
        android:text="Label 2 Is very very long"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/entry_2"
        app:layout_constraintBottom_toBottomOf="@+id/entry_2"
        android:id="@+id/label_2" />

    <EditText
        android:id="@+id/entry_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:inputType="text"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="100.0"
        app:layout_constraintLeft_toRightOf="@+id/guideline"
        app:layout_constraintRight_toLeftOf="@+id/space_2"
        app:layout_constraintTop_toBottomOf="@+id/entry_1"
        app:layout_constraintWidth_max="150sp"
        app:layout_constraintWidth_min="100sp" />

    <Space
        android:id="@+id/space_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/entry_2"
        app:layout_constraintHorizontal_weight="0.01"
        app:layout_constraintTop_toTopOf="@+id/entry_2"
        app:layout_constraintBottom_toBottomOf="@+id/entry_2"/>

    <TextView
        android:text="Label Three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/entry_3"
        app:layout_constraintBottom_toBottomOf="@+id/entry_3"
        android:id="@+id/label_3" />

    <EditText
        android:id="@+id/entry_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:inputType="text"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_weight="100.0"
        app:layout_constraintLeft_toRightOf="@+id/guideline"
        app:layout_constraintRight_toLeftOf="@+id/space_3"
        app:layout_constraintTop_toBottomOf="@+id/entry_2"
        app:layout_constraintWidth_max="150sp"
        app:layout_constraintWidth_min="100sp" />

    <Space
        android:id="@+id/space_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/entry_3"
        app:layout_constraintHorizontal_weight="0.01"
        app:layout_constraintTop_toTopOf="@+id/entry_3"
        app:layout_constraintBottom_toBottomOf="@+id/entry_3"/>

    <android.support.constraint.Barrier
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:barrierDirection="right"
        app:constraint_referenced_ids="label_1,label_2,label_3" />

</android.support.constraint.ConstraintLayout>

编辑:

我在 Google 向 ConstraintLayout 团队报告了这个问题,他们确认这是一个错误。一旦修复,我应该能够在没有复杂链条的情况下做到这一点。

我的猜测是您并没有真正建立链。

https://developer.android.com/training/constraint-layout/index.html

A chain works properly only if each end of the chain is constrained to another object on the same axis

对于合适的链条,您的标签也需要成为其中的一部分。您可能只需放弃链属性并将编辑文本限制为障碍和父权限。

希望对您有所帮助。

尝试 Relative Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <TextView
        android:id="@+id/label_1"
        android:text="Label 1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"/>
    <EditText
        android:id="@+id/entry_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:layout_alignBaseline="@+id/label_1"
        android:layout_toEndOf="@+id/label_1"
        android:maxLength="20"
        android:textSize="20sp"
        android:inputType="text" />
    <TextView
        android:id="@+id/label_2"
        android:text="Label 2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:textSize="20sp"
        android:layout_below="@+id/label_1"/>
    <EditText
        android:id="@+id/entry_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:layout_alignBaseline="@+id/label_2"
        android:layout_toEndOf="@+id/label_2"
        android:maxLength="20"
        android:textSize="20sp"
        android:inputType="text" />
    <TextView
        android:id="@+id/label_3"
        android:text="Label 3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:textSize="20sp"
        android:layout_below="@+id/label_2"/>
    <MultiAutoCompleteTextView
        android:id="@+id/entry_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:layout_alignBaseline="@+id/label_3"
        android:layout_toEndOf="@+id/label_3"
        android:maxLength="200"
        android:textSize="20sp"/>
</RelativeLayout>

编辑: 如果 ConstraintLayout 不是唯一的选项,这应该是表单的基本结构。

  • 就用Relative Layout,Table Layout这里没必要
  • android:maxLength 设置值
  • 要包含更多 text-characters 使用 MultiAutoCompleteTextView

Android 开发团队确认这是一个错误,并且已在 beta6 版本中修复。该布局现在无需任何链条或空格即可工作(下面的解决方案是他们在票证中建议的)。

https://issuetracker.google.com/issues/74469361

<TextView
    android:id="@+id/label_1"
    android:tag="48,103,136,57"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Label 1"
    app:layout_constraintBottom_toBottomOf="@+id/entry_1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="@+id/entry_1" />

<EditText
    android:id="@+id/entry_1"
    android:tag="505,63,512,136"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_marginStart="8dp"
    android:inputType="text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_max="200sp"
    app:layout_constraintWidth_min="100sp" />

<TextView
    android:id="@+id/label_2"
    android:tag="48,254,442,57"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Label 2 Is very very long"
    app:layout_constraintBottom_toBottomOf="@+id/entry_2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="@+id/entry_2" />

<EditText
    android:id="@+id/entry_2"
    android:tag="505,214,450,136"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_marginStart="8dp"
    android:inputType="text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/entry_1"
    app:layout_constraintWidth_max="150sp"
    app:layout_constraintWidth_min="100sp" />

<TextView
    android:id="@+id/label_3"
    android:tag="48,405,218,57"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Label Three"
    app:layout_constraintBottom_toBottomOf="@+id/entry_3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="@+id/entry_3" />

<EditText
    android:id="@+id/entry_3"
    android:tag="505,365,450,136"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_marginStart="8dp"
    android:inputType="text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/entry_2"
    app:layout_constraintWidth_max="150sp"
    app:layout_constraintWidth_min="100sp" />

<android.support.constraint.Barrier
    android:id="@+id/guideline"
    android:tag="490,48,0,0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:barrierDirection="right"
    app:constraint_referenced_ids="label_1,label_2,label_3" />