ConstraintLayout以不同方式处理多个水平链

时间：2018-03-11 02:42:55

标签： android android-constraintlayout constraint-layout-chains

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

我希望文本条目是标称大小（顶部的200dp，本例中其他的150dp）但是如果标签很长且屏幕很小，则可以根据需要缩小以适应屏幕。在横向模式或更大的屏幕上，条目应为其最大尺寸，并与屏障左对齐。

经过大量的反复试验，我通过将两个链设置为＆＃34; spread_inside＆＃34;来实现下面的布局。最后一个到＆＃34;打包＆＃34;。将它们全部设置为spread_inside会使布局混乱（entry_2缩小到最小尺寸）。

Working version - last chain packed

All chains set to spread_inside

这闻起来像将来会在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小组报告了此问题，他们确认这是一个错误。一旦修复，我应该能够在没有复杂链的情况下做到这一点。

3 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：0)

我的猜测是，你并没有真正建立一个链条。

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

  

只有当链的每一端都被约束到同一轴上的另一个对象时，链才能正常工作

对于正确的链条，您的标签也需要成为其中的一部分。您可以放弃链属性并将编辑文本约束到屏障和父权限。

希望有所帮助。

答案 2 :(得分：0)

使用<?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

修改：这应该是您表单的基本结构，前提是Table Layout不是唯一选项。

  • 只需使用相对布局，此处不需要android:maxLength
  • 设置MultiAutoCompleteTextView
    • 的值
  • 要包含更多文字字符，请使用{{1}}
相关问题
最新问题