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" />
我正在尝试设置我认为应该是一个简单的布局 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" />