Android ConstraintLayout垂直文本视图对齐

Question

I have following layout:

<?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:id="@+id/dishContainer"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#0ff"
    android:clickable="true"
    android:focusable="true">

    <TextView
        android:id="@+id/one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:maxLines="3"
        android:background="#ff0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />

    <TextView
        android:id="@+id/two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        app:layout_constraintStart_toStartOf="@+id/one"
        app:layout_constraintTop_toBottomOf="@+id/one"
        app:layout_constraintBottom_toTopOf="@+id/three"
        tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />

    <TextView
        android:id="@+id/three"
        android:layout_width="wrap_content"
        android:background="#f00"
        android:lines="1"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@+id/two"
        app:layout_constraintTop_toBottomOf="@+id/two"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:text="Third text that dissapears, but should not go below the parent" />

</android.support.constraint.ConstraintLayout>

The problem is that green textview takes too much space and ignores top and bottom constraints. If I set green text view height to 0dp I get this:

Which is almost what I want, but if I only have very little text I get:

Here my red textview is left at the bottom, even though green text view has enough free space to shrink and let red textview go up.

Basically I want my red view to always be bellow green view, but when red hits the bottom of parent window it should stop there and also stop green textview from expanding.

How do I achieve this?

Answer 1

Try this

(I set layout_width to match_parent..., you can change it if you want)

<?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:orientation="vertical"
    android:paddingEnd="16dp"
    android:paddingStart="16dp"
    android:layout_width="match_parent"
    android:layout_height="100dp">

    <TextView
        android:id="@+id/one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="3"
        android:background="#ff0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />

    <TextView
        android:id="@+id/two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/one"
        app:layout_constraintBottom_toTopOf="@id/three"
        app:layout_constrainedHeight="true"
        tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />

    <TextView
        android:id="@+id/three"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#f00"
        android:lines="1"
        app:layout_constraintHeight_min="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/two"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:text="Third text that dissapears, but should not go below the parent" />

</android.support.constraint.ConstraintLayout>

Answer 2

While the accepted answer works, I noticed that the height of the bottom TextView will expand to fill the remaining vertical space of the container.

With the help of a Guideline , we can give the bottom TextView a fixed height regardless if it has room to expand.

dimens.xml

<dimen name="bottom_view_height">20dp</dimen>

layout.xml

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

    <TextView
        android:id="@+id/green"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4CAF50"
        android:maxLines="3"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@tools:sample/lorem/random"/>

    <TextView
        android:id="@+id/yellow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFEB3B"
        app:layout_constrainedHeight="true"
        app:layout_constraintTop_toBottomOf="@id/green"
        app:layout_constraintBottom_toTopOf="@id/bottom_guide"
        app:layout_constraintVertical_bias="0"
        tools:text="@tools:sample/lorem/random"
        tools:lines="100"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/bottom_guide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="@dimen/bottom_view_height"/>

    <TextView
        android:id="@+id/red"
        android:layout_width="match_parent"
        android:layout_height="@dimen/bottom_view_height"
        android:background="#F44336"
        app:layout_constraintTop_toBottomOf="@id/yellow"
        tools:text="@tools:sample/lorem/random"/>

</androidx.constraintlayout.widget.ConstraintLayout>

How it works:

The Guideline serves as the bottom constraint for the middle TextView , which is aligned to its top constraint via layout_constraintVertical_bias="0" .

Setting layout_constrainedHeight="true" on the middle TextView ensures it never expands past the guideline. This in turn ensures that the bottom TextView will never go off screen.

Answer 3

you could try Linear Layout

Edit New Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical">

<TextView
    android:id="@+id/one"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:maxLines="3"
    android:background="#ff0"
    android:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk"
    />

<TextView
    android:id="@+id/two"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:background="#0f0"
    android:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />

<TextView
    android:id="@+id/three"
    android:layout_width="match_parent"        
    android:background="#f00"        
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:text="Third text that dissapears, but should not go below the parent" />

Answer 4

我将删除TextView＃2上的app:layout_constraintBottom_toTopOf="@+id/three"约束，不需要它，这可能是您看到第二个TextView占用多余空间的原因。

Answer 5

We should not use static value for height if content is dynamic.Don't align a view at bottom in constraint layout if you assign views in linear way

 <?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:id="@+id/dishContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#0ff"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:clickable="true"
    android:focusable="true">

    <TextView
        android:id="@+id/one"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:background="#ff0"
        android:maxLines="3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="One line lsfdjslkdf jksdljsdkljf sklksf klsjklsksjskfljsaklfj slkjfslkjfdskljfalskjflksdajfaklsjksadljfksfjksjkslfjsljsk lskjslksj ks flks jklsfjsl lsk slk" />

    <TextView
        android:id="@+id/two"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#0f0"
        app:layout_constraintEnd_toEndOf="@+id/one"
        app:layout_constraintStart_toStartOf="@+id/one"
        app:layout_constraintTop_toBottomOf="@+id/one"
        tools:text="Two kksldfj lskfd lksd jlkfsd jksld ksldfj sdlks dklfklsffsd klsdfjklsdf kdsflkj skldfsf sdfksdjf jsdfsjklfklskfls fklsf jklsdfjksf lksjdflk sdklsf lksfdjkls fk" />

    <TextView
        android:id="@+id/three"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:lines="1"
        app:layout_constraintEnd_toEndOf="@+id/one"
        app:layout_constraintStart_toStartOf="@+id/one"
        app:layout_constraintTop_toBottomOf="@+id/two"
        tools:text="Third text that dissapears, but should not go below the parent" />

</android.support.constraint.ConstraintLayout>