Android ConstraintLayout: 水平链底部约束时视图重叠

huangapple go评论47阅读模式
英文:

Android ConstraintLayout: View overlap when constraint to the bottom of a horizontal chain

问题

我想要view3直接位于view1txt1的下方,没有间隙。

txt1的文本值在运行时是动态的。当txt1占据多行时,所有视图都是正确的。但是当txt1只占据一行时,view1view3会重叠。

我也只想使用ConstraintLayout,不要使用LinearLayout或其他布局在ConstraintLayout内部。而且只想在XML中进行修改,不要在Java/Kotlin代码中修改。

如何修复它?谢谢!!

Android ConstraintLayout: 水平链底部约束时视图重叠

Android ConstraintLayout: 水平链底部约束时视图重叠

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--其他视图-->
    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@android:color/black"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/txt1"
        />
    <TextView
        android:id="@+id/txt1"
        android:text="lorem"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/view1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/view1"
        />
    <View
        android:id="@+id/view3"
        android:background="@android:color/holo_green_light"
        android:layout_width="400dp"
        android:layout_height="4dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/txt1"
        />
    <!--其他视图-->
</androidx.constraintlayout.widget.ConstraintLayout>
英文:

I wanna view3 directly below view1 and txt1 with no gap.

The text value of txt1 is dynamic at runtime. When txt1 takes multiple lines, all views are correct. But when txt1 takes only one line, view1 and view3 overlap.

Also I wanna use only ConstraitLayout, do not use LinearLayout or other layouts inner ConstraintLayout. And only modify in XML not in Java/Kotlin code

How can I fix it? Thank you!!

Android ConstraintLayout: 水平链底部约束时视图重叠

Android ConstraintLayout: 水平链底部约束时视图重叠

&lt;androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
    android:padding=&quot;16dp&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;&gt;
    &lt;!--other views--&gt;
    &lt;View
        android:id=&quot;@+id/view1&quot;
        android:layout_width=&quot;100dp&quot;
        android:layout_height=&quot;30dp&quot;
        android:background=&quot;@android:color/black&quot;
        app:layout_constraintTop_toTopOf=&quot;parent&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot;
        app:layout_constraintEnd_toStartOf=&quot;@id/txt1&quot;
        /&gt;
    &lt;TextView
        android:id=&quot;@+id/txt1&quot;
        android:text=&quot;lorem&quot;
        android:layout_width=&quot;0dp&quot;
        android:layout_height=&quot;wrap_content&quot;
        app:layout_constraintStart_toEndOf=&quot;@id/view1&quot;
        app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintTop_toTopOf=&quot;@id/view1&quot;
        /&gt;

    &lt;View
        android:id=&quot;@+id/view3&quot;
        android:background=&quot;@android:color/holo_green_light&quot;
        android:layout_width=&quot;400dp&quot;
        android:layout_height=&quot;4dp&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot;
        app:layout_constraintTop_toBottomOf=&quot;@id/txt1&quot;
        /&gt;
    &lt;!--other views--&gt;
&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;

答案1

得分: 1

以下是代码部分的翻译:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--other views-->
    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@android:color/black"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/txt1"
        />
    <TextView
        android:id="@+id/txt1"
        android:text="lorem"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/view1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/view1"
        />

   <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="view1,txt1" />
   
    <View
        android:id="@+id/view3"
        android:background="@android:color/holo_green_light"
        android:layout_width="400dp"
        android:layout_height="4dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier"
        />
    <!--other views-->
</androidx.constraintlayout.widget.ConstraintLayout>

以上是代码的翻译部分,其他文本部分不需要翻译。

英文:

Ahhhh .. here is the scenario where barrier comes into the picture

Kindly check more detail about barrier in this link

https://developer.android.com/reference/androidx/constraintlayout/widget/Barrier

and here is the code that you can use

&lt;androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
    android:padding=&quot;16dp&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;&gt;
    &lt;!--other views--&gt;
    &lt;View
        android:id=&quot;@+id/view1&quot;
        android:layout_width=&quot;100dp&quot;
        android:layout_height=&quot;30dp&quot;
        android:background=&quot;@android:color/black&quot;
        app:layout_constraintTop_toTopOf=&quot;parent&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot;
        app:layout_constraintEnd_toStartOf=&quot;@id/txt1&quot;
        /&gt;
    &lt;TextView
        android:id=&quot;@+id/txt1&quot;
        android:text=&quot;lorem&quot;
        android:layout_width=&quot;0dp&quot;
        android:layout_height=&quot;wrap_content&quot;
        app:layout_constraintStart_toEndOf=&quot;@id/view1&quot;
        app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintTop_toTopOf=&quot;@id/view1&quot;
        /&gt;

   &lt;androidx.constraintlayout.widget.Barrier
&#160; &#160; &#160; &#160; &#160; &#160; &#160;android:id=&quot;@+id/barrier&quot;
&#160; &#160; &#160; &#160; &#160; &#160; &#160;android:layout_width=&quot;wrap_content&quot;
&#160; &#160; &#160; &#160; &#160; &#160; &#160;android:layout_height=&quot;wrap_content&quot;
&#160; &#160; &#160; &#160; &#160; &#160; &#160;app:barrierDirection=“bottom”
&#160; &#160; &#160; &#160; &#160; &#160; &#160;app:constraint_referenced_ids=&quot;view1,txt1&quot; /&gt;

    &lt;View
        android:id=&quot;@+id/view3&quot;
        android:background=&quot;@android:color/holo_green_light&quot;
        android:layout_width=&quot;400dp&quot;
        android:layout_height=&quot;4dp&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot;
        app:layout_constraintTop_toBottomOf=&quot;@id/barrier&quot;
        /&gt;
    &lt;!--other views--&gt;
&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;

huangapple
  • 本文由 发表于 2023年2月16日 12:47:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75467955.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定