使用ConstraintLayout时ScrollView的底部被裁剪 [英] Bottom of ScrollView clipped when using ConstraintLayout

问题描述

我在ConstraintLayout(constraint-layout:1.0.0-beta3)内使用ScrollView时遇到问题

I have an issue using a ScrollView inside ConstraintLayout (constraint-layout:1.0.0-beta3)

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

The content of my ScrollView isn't showed entirely.

这是我的布局:

<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的底部.

As you can see the button isn't visible and I reached the bottom of my ScrollView.

它似乎与LinearLayout具有下面的布局效果很好

It seems to works well with LinearLayout with layout below

<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的末端.

With LinearLayout end of ScrollView is reachable.

ConstraintLayout是否存在错误，或者我做错了什么?

Is there a bug with ConstraintLayout or do I made something wrong?

推荐答案

我要这样做的方式是:

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

哪个给:

请记住以下几点:

• 您不需要标题的线性布局，您可以直接使用textview.
• 不要使用match_parent，它似乎可以工作，但是未定义.使用0dp代替正确的约束来根据需要拉伸视图.
• 很明显，不要使用800dp的余量.在您的特定屏幕上看起来可能还可以，但是不会在不同设备上提供您想要的内容.
• 默认情况下，scrollview会包装其内容-此处的fillViewport属性使它占据指定的空间
• 您可以在有意义的情况下使用嵌套的ConstraintLayout.将来，我们可能还会利用它来进行一些性能改进

• you don't need a linearlayout for the header, you can just use the textview directly.
• don't use match_parent, it might seem to work, but is undefined. Use 0dp instead with the correct constraints to stretch the view as you want.
• clearly, don't use a 800dp margin. It might look ok on your particular screen, but won't give you what you want on different devices.
• scrollview by default will wrap its content -- the fillViewport attribute is here to make it takes the indicated space
• you can use nested ConstraintLayout when it makes sense. In the future, we might also take advantage of it to do some performance improvements

这篇关于使用ConstraintLayout时ScrollView的底部被裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！