如何使用ConstraintLayout缩小第一个视图以适合剩余空间?

时间:2019-10-07 22:41:49

标签: android android-layout android-constraintlayout

我的布局如下。请注意,Z位于Y下方,但仅限于底部。 YZ之间存在很大的间隙,这是由多余的垂直空间提供的。这是我期望实际的行为,当垂直空间过多时。

enter image description here

但是,显示键盘时,我的垂直空间用完了。

所需的行为(没有多余的垂直空间):当我用完垂直空间时,我希望发生以下情况:XScrollView),缩小以填充剩余的空间,从而可以全尺寸显示YZ

enter image description here

实际行为(没有多余的垂直空间)Y缩小了。

enter image description here

我的来源在下面。在两种情况下(垂直空间过多,垂直空间都没有)如何修改我的行为?

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fbe9e7"
            android:gravity="center"
            android:text="X"
            android:textSize="96sp">

        </TextView>
    </ScrollView>

    <TextView
        android:id="@+id/text_Y"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f3e5f5"
        android:gravity="center"
        android:text="Y"
        android:textSize="96sp"
        app:layout_constraintTop_toBottomOf="@+id/scrollView" />

    <TextView
        android:id="@+id/text_Z"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#e1f5fe"
        android:gravity="center"
        android:text="Z"
        android:textSize="96sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_Y"
        app:layout_constraintVertical_bias="1" />

</androidx.constraintlayout.widget.ConstraintLayout>

问题主要是由于X滚动视图在垂直空间有限时需要为0dp,而在垂直空间过多时为wrap_content

注意:您可以通过在Android Studio中的布局的预览窗格中相应地拖动右下角来演示布局在垂直空间较小的情况下的行为enter image description here

4 个答案:

答案 0 :(得分:1)

我建议壁垒约束: https://developer.android.com/reference/android/support/constraint/Barrier

您将使障碍物位于两个底部视图Z的顶部,并且是一个从父底部到Y底部的空视图。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fbe9e7"
        android:gravity="center"
        android:text="X"
        android:textSize="96sp">

    </TextView>
</ScrollView>

<TextView
    android:id="@+id/text_Y"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f3e5f5"
    android:gravity="center"
    android:text="Y"
    android:textSize="96sp"
    app:layout_constraintTop_toBottomOf="@+id/scrollView" 
    app:layout_constraintBottom_topTopOf="@+barrier_bottom"/>

<androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier_bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="text_Z,spacer" />

<TextView
    android:id="@+id/spacer
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_constraintTop_topBottomOf="@+id/text_Y"
    app:layout_constraintBottom_toBottomOf="parent"/>

<TextView
    android:id="@+id/text_Z"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#e1f5fe"
    android:gravity="center"
    android:text="Z"
    android:textSize="96sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintVertical_bias="1" />

</androidx.constraintlayout.widget.ConstraintLayout>

答案 1 :(得分:1)

尝试

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@+id/text_Y"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintVertical_chainStyle="packed">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fbe9e7"
            android:gravity="center"
            android:text="X"
            android:textSize="96sp">

        </TextView>
    </ScrollView>

    <TextView
        android:id="@+id/text_Y"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f3e5f5"
        android:gravity="center"
        android:text="Y"
        android:textSize="96sp"
        app:layout_constraintBottom_toTopOf="@+id/text_Z"
        app:layout_constraintTop_toBottomOf="@+id/scrollView"
        app:layout_constraintVertical_bias="0" />

    <TextView
        android:id="@+id/text_Z"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#e1f5fe"
        android:gravity="center"
        android:text="Z"
        android:textSize="96sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

答案 2 :(得分:0)

就我测试自己的解决方案而言,我发现您无法实现所需的行为。我花了大约2个小时将链的不同变体和另一个ConstraintLayout东西组合在一起。 这是我唯一可行的解​​决方案。调整大小后,TextY和TextZ保持完全可见,但TextX不会调整大小以保持相同的高度并隐藏在TextY后面。

Desired behaviour

解决方案本身:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fbe9e7"
            android:gravity="center"
            android:text="X"
            android:textSize="96sp">

        </TextView>
    </ScrollView>

    <TextView
        android:id="@+id/text_Y"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f3e5f5"
        android:gravity="center"
        android:text="Y"
        android:textSize="96sp"
        app:layout_constraintBottom_toTopOf="@id/text_Z"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/scrollView"
        app:layout_constraintVertical_bias="1"
        app:layout_constraintVertical_chainStyle="spread_inside" />

    <TextView
        android:id="@+id/text_Z"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#e1f5fe"
        android:gravity="center"
        android:text="Z"
        android:textSize="96sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_Y" />

</androidx.constraintlayout.widget.ConstraintLayout>

答案 3 :(得分:0)

下面的代码可以正常工作,并且已经过个人测试。值得注意的是,仅使用单个约束布局就无法实现您想要的行为,即,当text_y开始与之重叠时,滚动视图更改其大小,因此我将text_y和text_z置于另一个约束布局中。

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

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintHeight_max="wrap"
        app:layout_constraintBottom_toTopOf="@id/constraint"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread_inside"
        app:layout_constraintVertical_bias="0">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fbe9e7"
            android:gravity="center"
            android:text="X"
            android:textSize="96sp">

        </TextView>
    </ScrollView>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraint"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintHeight_min="wrap"
        app:layout_constraintTop_toBottomOf="@id/scrollView"
        app:layout_constraintBottom_toBottomOf="parent">  
        <TextView
            android:id="@+id/text_Y"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#f3e5f5"
            android:gravity="center"
            android:text="Y"
            android:textSize="96sp"
            app:layout_constraintVertical_chainStyle="spread_inside"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/text_Z"/>

        <TextView
            android:id="@+id/text_Z"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#e1f5fe"
            android:gravity="center"
            android:text="Z"
            android:textSize="96sp"
            app:layout_constraintTop_toBottomOf="@id/text_Y"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.constraintlayout.widget.ConstraintLayout>