使用 ConstraintLayout 时滚动视图的底部被剪裁

Question

我在 ConstraintLayout (constraint-layout:1.0.0-beta3)

中使用 ScrollView 时遇到问题

我的 ScrollView 的内容没有完全显示。

这是我的布局：

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="#212121">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Constraint Layout"
            android:textSize="45sp"/>

    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/header"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BUTTON"
                android:layout_marginTop="800dp"/>


        </LinearLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

这是结果

如您所见，按钮不可见，我到达了 ScrollView 的底部。

它似乎与布局如下的 LinearLayout 配合得很好

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#212121">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Linear Layout"
            android:textSize="45sp"/>

    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BUTTON"
                android:layout_marginTop="800dp"/>


        </LinearLayout>

    </ScrollView>

</LinearLayout>

结果是

使用 LinearLayout 可以到达 ScrollView 的末端。

是 ConstraintLayout 有问题还是我做错了什么？

Answer 1

我将 ScrollView 的高度更改为 match_parent 并添加了底部约束。这似乎使它正常工作。

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

注意：在垂直滚动视图上具有 wrap_content 的高度通常不会很好地结束，在任何布局中。

Answer 2

我的做法是：

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#212121"
        android:text="Constraint Layout"
        android:textSize="45sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:fillViewport="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="BUTTON"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent" />

        </android.support.constraint.ConstraintLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

给出：

需要牢记的几点：

你不需要header的线性布局，你可以直接使用textview。
不要使用 match_parent，它可能看起来有效，但未定义。使用 0dp 和正确的约束来根据需要拉伸视图。
很明显，不要使用 800dp 的边距。它在您的特定屏幕上可能看起来不错，但不会在不同的设备上为您提供您想要的东西。
默认情况下，scrollview 会包装它的内容——此处的 fillViewport 属性是为了使其采用指定的 space
您可以在合适的时候使用嵌套的 ConstraintLayout。以后我们也可能会利用它做一些性能提升

使用 ConstraintLayout 时滚动视图的底部被剪裁

Bottom of ScrollView clipped when using ConstraintLayout

android

scrollview

android-scrollview

android-constraintlayout