androidx / constraintlayout

ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way
Apache License 2.0
1.06k stars 177 forks source link

topMargin is abnormal #812

Closed Ousyoung closed 1 year ago

Ousyoung commented 1 year ago

1.version: androidx.constraintlayout:constraintlayout:2.1.3

2.Under these conditions: view_black is constrainted to view_red (toToTop, bottomToBottom) height of view_red height is 100dp now height of view_black height is 200dp now

3.when i set height of view_black to 100dp or 50dp (<=view_red' height), view_black shows correctly, as i want image

4.but when i set height of view_black to 101dp (> view_red' height), something amazing happened, view_black just disappears!!! image when i use constraintlayout:2.0.2, It's not going to happen, Is this a new feature or a bug?

This caused problems with some of my code that had previously worked well online, Looking forward to a reply🙏🙏

Ousyoung commented 1 year ago

bottomMargin has the same problem😢

jafu888 commented 1 year ago

I am not able to reproduce the effect. What am I missing ?

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="#FFF">

    <View
        android:id="@+id/view_red"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#F00"
        android:alpha="0.5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

    <View
        android:id="@+id/view_black"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="50dp"
        android:background="#000"
        android:alpha="0.5"
        app:layout_constraintBottom_toBottomOf="@+id/view_red"
        app:layout_constraintTop_toTopOf="@+id/view_red" />
</androidx.constraintlayout.widget.ConstraintLayout>

image

<androidx.constraintlayout.widget.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:background="#FFF">

    <View
        android:id="@+id/view_red"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#F00"
        android:alpha="0.5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

    <View
        android:id="@+id/view_black"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="122dp"
        android:background="#000"
        android:alpha="0.5"
        app:layout_constraintBottom_toBottomOf="@+id/view_red"
        app:layout_constraintTop_toTopOf="@+id/view_red" />
</androidx.constraintlayout.widget.ConstraintLayout>

image

Ousyoung commented 1 year ago

I am not able to reproduce the effect. What am I missing ?

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="#FFF">

    <View
        android:id="@+id/view_red"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#F00"
        android:alpha="0.5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

    <View
        android:id="@+id/view_black"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="50dp"
        android:background="#000"
        android:alpha="0.5"
        app:layout_constraintBottom_toBottomOf="@+id/view_red"
        app:layout_constraintTop_toTopOf="@+id/view_red" />
</androidx.constraintlayout.widget.ConstraintLayout>

image

<androidx.constraintlayout.widget.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:background="#FFF">

    <View
        android:id="@+id/view_red"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#F00"
        android:alpha="0.5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

    <View
        android:id="@+id/view_black"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="122dp"
        android:background="#000"
        android:alpha="0.5"
        app:layout_constraintBottom_toBottomOf="@+id/view_red"
        app:layout_constraintTop_toTopOf="@+id/view_red" />
</androidx.constraintlayout.widget.ConstraintLayout>

image

Oh, thank you for your reply👍,here's what happens if I use the same code as you,view_black just disappears image By the way, I'm using constraintlayout:2.1.3. What's your version?👀

Ousyoung commented 1 year ago

image

jafu888 commented 1 year ago

I was able to reproduce it. It is an oddly unstable condition. Now that I was able to play with it. I understand what happens.

When you cannot connect the top to an anchor below the bottom. (It was remove in 2.0->2.1 transition) When you add a margin to top it is effectively lowering what it is connected to. at layout_topMargin=100 you are connecting top and bottom to the same point. at 101 they cross. top is connected to a point below bottom.

Connecting top to the top of a widget with a margin big enough to push it below the widget and connecting to the bottom a very unusual pattern (first we encountered)

In general we will not be supporting this use case / fixing this issue. We will consider it in the next major rewrite of the solver.

Ousyoung commented 1 year ago

solver

Oh, thanks😀, we had a few similar cases with our released app. After I upgraded the version, the problem started to appear, but fortunately only a small amount of business was affected. So I'll have to manually adjust the layout to fix the problem first. Finally, Looking forward to your repair😉

jafu888 commented 1 year ago

You might not know but we support negative margins now. Which might come in handy for you. layout_bottomMargin="-100dp"

Ousyoung commented 1 year ago

You might not know but we support negative margins now. Which might come in handy for you. layout_bottomMargin="-100dp"

This is a good solution👍