ConstraintLayout不同地对待多个水平链 [英] ConstraintLayout Treats Multiple Horizontal Chains Differently

问题描述

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

I am attempting to set up what I thought should be a simple layout with a ConstraintLayout I have a series of text entries, with labels whose size can change from language to language. There is a barrier to the right side of the labels so the text entries stay aligned even when the label lengths change.

我希望文本条目为标称大小(在此示例中，最上面的文本输入为200dp，对于其他文本输入为150dp)，但是如果标签较长且屏幕较小，则可以根据需要缩小以适合屏幕.在横向模式或更大的屏幕上，条目应为最大尺寸，并与障碍物左对齐.

I want the text entries to be a nominal size (200dp for the top one and 150dp for the others in this example) but to be able to shrink as needed to fit the screen if the labels are long and the screen is small. In landscape mode, or on a larger screen, the entries should be their max size and aligned left against the barrier.

经过大量的反复试验，通过将两个链设置为"spread_inside"并将最后一个链设置为"packed"，我得到了下面的布局.将它们全部设置为spread_inside会使布局混乱(entry_2缩小到其最小大小).

After a lot of trial and error, I got the layout below to work, by setting two of the chains to "spread_inside" and the last one to "packed". Setting them all to spread_inside messes up the layout (entry_2 shrinks to its minimum size).

闻起来像是某种东西，将来会在ConstraintLayout更新中停止工作(使用com.android.support.constraint:constraint-layout:1.1.0-beta5).使用beta4时，此布局的行为有所不同(也是错误的，但又有不同的错误，beta4将它们全部对齐在屏幕的右侧).

This smells like something that will stop working this way in a future ConstraintLayout update (this is using com.android.support.constraint:constraint-layout:1.1.0-beta5). The behavior of this layout is different using beta4 (also wrong, but differently wrong, beta4 aligns them all on the right side of the screen).

我在这里错过了什么吗?还有其他人有类似的连锁模式吗?有更好的方法吗?

Am I missing something here? Does anyone else have similar chain patterns that have worked? Is there a better way of doing this?

<?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小组报告了此问题，他们确认这是一个错误.修复后，我应该能够在没有复杂链条的情况下完成此操作.

I reported this issue to the ConstraintLayout team at Google and they confirmed that it is a bug. Once fixed, I should be able to do this without the complicated chains.

推荐答案

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

The Android dev team confirmed this is a bug, and it has been fixed in the beta6 release. The layout now works without the need for any chains or spaces (the solution below is what they suggested in the ticket).

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

这篇关于ConstraintLayout不同地对待多个水平链的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！