约束布局屏障不按预期工作。

Question

约束布局屏障不按预期工作。

androidxmlandroid-layoutandroid-constraintlayoutconstraintlayout-barrier

6

我有两个视图，需要在它们之间添加一个障碍物，但是该障碍物并没有按照预期的方式工作。以下是我的布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/textView15"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="This is a text view"
        app:layout_constraintEnd_toStartOf="@+id/t1"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/t1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView15"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is a demo text to check wrap content"/>

    </com.google.android.material.textfield.TextInputLayout>

    <androidx.constraintlayout.widget.Barrier
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textView15,t1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

黑色虚线是障碍物。

这可能是一个bug，或者是我的操作有误，无论在预览模式还是实际设备中结果都是相同的。

- Ankit Verma

1

你做得很对。这似乎是_ConstraintLayout_ 2.1.3的问题。如果可以回退，版本2.0.4可以正常工作。其他版本也可能没问题，但我还没有检查过。 - Cheticamp

1

我检查了其他版本，从2.0.1开始所有版本都有同样的问题。我不得不回滚到2.0.0版本。 - Ankit Verma

我有一个解决方案，我会将其发布为答案，因为它可能会帮助其他人。 - Cheticamp

@AnkitVerma，感谢您提供2.0.0版本。现在当<TextInputLayout>显示“错误”时，它会移动<Barrier>。 - CoolMind

降级到 v 2.0.4 成功了。 - undefined

app:layout_constrainedHeight="true" 将此添加到您的文本视图中，它会起作用。 - undefined

3个回答

0

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:text="This is a text view"
        app:layout_constraintEnd_toStartOf="@+id/t1"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/t1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView15"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is a demo text to check wrap content"/>

    </com.google.android.material.textfield.TextInputLayout>

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textView15,t1"/>
    <Space
       android:id="@+id/space"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:visibility="visible"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="@id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout>

- Thaiyalnayaki

你只是添加了一个<空格>，但它并没有改变行为。 - CoolMind

0

如前所述，ConstraintLayout 2.1.3和2.1.4版本存在问题，您可以将其降级为2.0.0。如果不行，您可以使用两种方法。在两种情况下都要删除。

插入 LinearLayout 来占用所需的视图。例如，如果您有两个水平排列的 TextInputLayout，可以这样写：

 <LinearLayout
     android:id="@+id/layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/upper_view">

     <com.google.android.material.textfield.TextInputLayout
         android:id="@+id/input_layout_1"
         android:layout_weight="1"
         ...


     <com.google.android.material.textfield.TextInputLayout
         android:id="@+id/input_layout_2"
         android:layout_weight="1"
         ...
 </LinearLayout>

如果您有一个包含不同视图的复杂布局，请按如下方式编写。

<Space
     android:id="@+id/space"
     android:layout_width="match_parent"
     android:layout_height="0dp"
     app:layout_constraintBottom_toBottomOf="@id/input_layout_2"
     app:layout_constraintTop_toBottomOf="@+id/upper_view" />

然后您应该在代码中更改 Space 的高度。可能您可以将此代码应用于所有 TextInputLayout。

 // View size change listener
 private fun View.onSizeChange(callback: () -> Unit) {
     addOnLayoutChangeListener(object : OnLayoutChangeListener {
         override fun onLayoutChange(
             view: View?,
             left: Int,
             top: Int,
             right: Int,
             bottom: Int,
             oldLeft: Int,
             oldTop: Int,
             oldRight: Int,
             oldBottom: Int,
         ) {
             view?.removeOnLayoutChangeListener(this)
             if (right - left != oldRight - oldLeft || bottom - top != oldBottom - oldTop) {
                 callback()
             }
         }
     })
 }

 binding.inputLayout2.onSizeChange {
     // First remove bottom constraint
     val layoutParams = binding.space.layoutParams as ConstraintLayout.LayoutParams
     layoutParams.bottomToBottom = ConstraintLayout.LayoutParams.UNSET
     // Now set height of a <Space> (maximum of two TextInputLayouts)
     val h1 = binding.inputLayout1.height
     val h2 = binding.inputLayout2.height
     binding.inputLayout2.postDelayed({
         binding.space.updateLayoutParams { height = max(h1, h2) }
     }, 1)
 }

然后将底部视图绑定到LinearLayout或Space而不是Barrier。

- CoolMind

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cheticamp · Accepted Answer

如果您指定

app:layout_optimizationLevel="none"

在 ConstraintLayout 的 XML 中，你会发现屏障将被正确地放置。我不确定设置优化级别会实现什么效果，但最近在屏障方面存在问题 (ConstraintLayout 版本 2.1.3)。在抑制优化之前，布局如下所示。如注所述，障碍物上升到右侧的 TextView 中。

我们可以在XML中声明来禁用优化，无需进行其他更改：

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_optimizationLevel="none"
    xmlns:app="http://schemas.android.com/apk/res-auto">

现在布局看起来像这样：

障碍物已经降到了正确的 TextView 下面。

这是使用 ConstraintLayout 版本2.1.3时的情况。

implementation 'androidx.constraintlayout:constraintlayout:2.1.3'

（似乎将优化级别设置为除standard以外的任何值都可以解决此问题。）