Android约束布局垂直文本视图对齐方式

Question

我的布局如下：

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

问题在于，绿色的textview占用太多空间，并且忽略了顶部和底部约束。如果我将绿色文本视图的高度设置为0dp 我明白了：

几乎是我想要的，但是如果我只有很少的文字，我会得到：

即使绿色文本视图具有足够的可用空间来缩小并让红色文本视图向上，在这里我的红色文本视图仍留在底部。

基本上我希望我的红色视图始终是绿色的波纹管，但是当红色到达父窗口的底部时，它应该在那里停下来，并且也要阻止绿色textview展开。

我该如何实现？

Answer 1

尝试一下

（我将layout_width设置为match_parent ...，可以根据需要进行更改）

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

虽然可接受的答案有效，但我注意到底部TextView的高度将扩大以填充容器的剩余垂直空间。

借助Guideline，我们可以将底部TextView设置为固定高度，而不管其是否有扩展空间。

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>

工作方式：

Guideline用作中间TextView的底部约束，中间layout_constraintVertical_bias="0"通过layout_constrainedHeight="true"与其顶部约束对齐。

在中间的TextView上设置var url = 'http://vhapp.azurewebsites.net/myAMLModelSelection' try { let response = fetch(url, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ "json" : { "locale": "AA", "model" : "DB11 AMR", "modelyear" : "2019" } }) }) .then(res => res.text()) // convert to plain text .then(text => { console.log(text) alert(text) var res = text.substring(1, text.length-2); var obj = JSON.parse(res); alert(obj.cars[0].name) }) .catch((error) => { console.error(error); }); } catch (errors) { console.log(errors); } 可确保它永远不会超出准则。这样可以确保底部的TextView永远不会离开屏幕。

Answer 3

您可以尝试线性布局

编辑新代码

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

如果内容是动态的，则不应使用静态值作为高度。如果以线性方式分配视图，请不要在约束布局的底部对齐视图

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