约束布局障碍未按预期工作

问题描述 投票：0回答：5

我有 2 个视图，我需要在下面设置一个屏障，但该屏障无法按预期工作。 这是我的布局。

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

Constraint layout preview

黑色虚线是屏障。

这可能是一个错误或者我做错了，预览和实际设备中的结果是相同的

android xml android-layout android-constraintlayout constraintlayout-barrier
5个回答
13
投票

如果您指定

app:layout_optimizationLevel="none"

在ConstraintLayout的XML中，您会发现障碍物将被正确放置。我不确定设置优化级别能达到什么效果，但最近这是一个有障碍的问题。 （ConstraintLayout 版本 2.1.3）。

这是抑制优化之前布局的样子。如前所述，屏障上升到右侧 TextView。

enter image description here

我们通过在 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">

现在布局如下所示：

enter image description here

障碍物已降至其所属的右侧TextView下方。

这是与 ConstraintLayout 版本 2.1.3 一起使用的。

implementation 'androidx.constraintlayout:constraintlayout:2.1.3'

（似乎将优化级别设置为除

standard
之外的任何值都可以解决此问题。）

3
投票

添加

app:layout_constrainedHeight="true"

障碍引用的视图解决了我的问题。

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>
0
投票

正如之前所写，

ConstraintLayout
2.1.3 和 2.1.4 版本无法正常工作，您可以将其降级到 2.0.0。如果没有，您可以使用两种方法。在这两种情况下都删除 
<androidx.constraintlayout.widget.Barrier>
。

  1. 插入

    LinearLayout
    以占据所需的视图。例如，如果水平位置有 2 个 
    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>

  2. 如果您有具有不同视图的复杂布局，请这样写。

    <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
。

0
投票

仅需要 

app:layout_optimizationLevel="barrier"
。 如果我们使用 
app:layout_optimizationLevel="none"
布局渲染可能需要更长的时间，因为每个约束都会被更彻底地重新评估。对于复杂的布局，这可能会导致性能问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.