Question

我想制作一个允许我使用约束布局向下滚动的布局，但我不知道如何去做。 ScrollView应该是ConstraintLayout的父级吗？

<?xml version="1.0" encoding="utf-8"?>

<ScrollView 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"
    android:fillViewport="true">

<android.support.constraint.ConstraintLayout
    android:id="@+id/Constraint"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

或者相反？也许有人可以指点我这方面的好教程或举个例子，我似乎无法找到一个。

另外，我不知道这是一个我没有设置的错误或配置，但我看过这样的图像：

在蓝图“蓝色矩形”之外有一些组件，但它们是可见的，而在我这边，如果我在“白色空间”放置一个组件，我看不到它或移动到任何地方，它出现在组件树。

更新：

我找到了一种方法，可以在设计工具中滚动约束布局，使用水平指南按下约束布局边框并将其扩展到设备之外，之后，您可以使用指南作为新的底部约束布局以锚定组件。

Answer 1

它似乎正在运作，我不知道你正在使用什么依赖，但在这一个

compile 'com.android.support.constraint:constraint-layout:1.0.2'

正在工作，这就是我做的事情

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
    tools:context=".MainActivity">

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

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til_input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="Escriba el contenido del archivo"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/btn_save"
            app:layout_constraintTop_toTopOf="@id/btn_save"
            app:layout_constraintVertical_chainStyle="spread">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btn_save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickButtonSave"
            android:text="Guardar"
            app:layout_constraintLeft_toRightOf="@+id/til_input"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txt_content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/til_input"
            app:layout_constraintVertical_chainStyle="spread"
            app:layout_constraintVertical_weight="1" />

        <Button
            android:id="@+id/btn_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:onClick="onClickButtonDelete"
            android:text="Eliminar"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txt_content"
            app:layout_constraintVertical_chainStyle="spread" />

    </android.support.constraint.ConstraintLayout>

</ScrollView>

滚动热门

滚动下方

Answer 2

有一种约束会破坏滚动功能：

在希望ConstraintLayout可以使用ScrollView进行滚动时，请确保您在任何视图上未使用此约束：

app:layout_constraintBottom_toBottomOf=“parent”

如果删除这些，则滚动应该有效。

说明：

将子项的高度设置为与ScrollView父项的高度相匹配，这与组件的意图相矛盾。我们大多数时候想要的是一些动态大小的内容在大于屏幕/帧时可滚动;将高度与父ScrollView匹配将强制所有内容显示为固定框架（父级的高度），从而使任何滚动功能无效。

当常规直接子组件设置为layout_height="match_parent"时，也会发生这种情况。

如果您希望ScrollView的孩子在内容不足时与父母的身高相匹配，只需将android:fillViewport设为真为ScrollView即可。

Answer 3

将NestedScrollView与true视口配合使用对我来说很好

DROP INDEX SAPSR3."KNA1~0"

对于android x使用此

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

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

        </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

Answer 4

只需在NestedScrollView或ScrollView内使用约束布局即可。

<android.support.v4.widget.NestedScrollView
        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">

    <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">

 </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

就这样。享受您的编码。

Answer 5

总而言之，您基本上将android.support.constraint.ConstraintLayout视图包含在ScrollView内与您的布局相关联的*.xml文件的文本中。

示例 activity_sign_in.xml

<?xml version="1.0" encoding="utf-8"?>

<ScrollView 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"
    tools:context=".SignInActivity"> <!-- usually the name of the Java file associated with this activity -->

    <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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient"
        tools:context="app.android.SignInActivity">

        <!-- all the layout details of your page -->

    </android.support.constraint.ConstraintLayout>
</ScrollView>

结束示例

注1：只有在需要换行时才会出现滚动条，包括键盘弹出。

注意2：确保你的contraintLayout大到足以触及任何给定屏幕的底部和侧面也不是一个坏主意，特别是如果你有背景，因为这将确保他们的isn'奇怪的空格。如果没有别的，你可以用垫片做到这一点。

Answer 6

要制作可滚动的布局，布局是正确的。在有理由滚动之前它将不可滚动（就像在任何其他布局中一样）。因此，添加足够的内容，它将是可滚动的，就像任何布局（线性，相对等）。但是，在使用ConstraintLayout和ScrollView进行设计时，cannot scroll properly in Blueprint or design-mode。

含义：

您可以创建一个可滚动的ConstraintLayout，但由于未考虑的错误/方案，它将无法在编辑器中正确滚动。但即使滚动在编辑器中不起作用，它也适用于设备。（我已经制作了几个滚动的COnstraintLayouts，所以我测试了它）

注意

关于你的代码。 ScrollView缺少一个结束标记，我不知道文件中是否是这种情况，或者它是否是复制粘贴错过，但你可能想看看它。

Answer 7

为了完成之前的答案，我添加了以下示例，其中还考虑了AppBar的使用。使用此代码，Android Studio设计编辑器似乎可以与ConstraintLayout一起使用。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout
    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"
    android:fitsSystemWindows="true"
    android:background="@drawable/bg"
    android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.ActionBar.AppOverlayTheme">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>

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

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

        <ImageView
            android:id="@+id/image_id"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/intro"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent" />

        <TextView
            android:id="@+id/desc_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/intro_desc"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/image_id" />

        <Button
            android:id="@+id/button_scan"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_scan"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@+id/desc_id" />

        <Button
            android:id="@+id/button_return"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_return"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button_recycle" />

        <Button
            android:id="@+id/button_recycle"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_recycle"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@+id/button_scan" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>

Answer 8

你需要用ScrollView标签包围我的约束布局并给它属性android：isScrollContainer =“true”。

Answer 9

Constraintlayout是新应用的默认值。我现在正在“学习Android”，并且非常难以确定如何在键盘启动时处理默认的“示例”代码以进行滚动。我看过很多应用程序，我必须关闭键盘才能点击“提交”按钮，有时它不会消失。使用此[ScrollView / ContraintLayout / Fields]层次结构，它现在工作正常。通过这种方式，我们可以在可滚动视图中从ConstraintLayout中获得优势和易用性。

Answer 10

版本2.2中有一个bug，无法滚动ConstraintLayout。我想它仍然存在。您可以选择使用LinearLayout或RelativeLayout。

另外，请查看：Is it possible to put a constraint layout inside a ScrollView。

Answer 11

请使用以下解决方案，这花费了我很多时间。

享受你的时间：）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="@color/white"
    >

    <ScrollView
        android:id="@+id/mainScroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:fillViewport="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentStart="true">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                >

            </android.support.constraint.ConstraintLayout>

        </RelativeLayout>
    </ScrollView>
</RelativeLayout>

完全像这样使用，您肯定会找到您的解决方案...

Answer 12

这里有很多答案，没有什么真的很简单。重要的是将ScrollView的lauout_height设置为match_parent，而ContraintLayout的layout_height为wrap_content

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
    ...

Answer 13

您可以使用HorizontalScrollView，它将同样有效！

Answer 14

这是我解决的方法：
如果您使用的是嵌套ScrollView，即ConstraintLayout中的ScrollView，则对ScrollView使用以下配置，而不要使用“ WRAP_CONTENT”或“ MATCH_PARENT”：

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

Answer 15

在scrollview中使高度和宽度为0 添加Top_toBottomOf和Bottom_toTopOf约束就是这样。

Answer 16

对我来说，关于删除底部约束或将滚动容器设置为true的建议似乎都无效。起作用的方法：使用约束布局编辑器的“垂直扩展”选项，如下所示扩展我布局中单个/嵌套视图的高度，以使其“跨越”父级。

对于任何方法，重要的是虚线预览线垂直延伸到父对象的顶部或底部尺寸

Answer 17

从nestedscrollview中取出底部按钮，并以linearlayout为父级。添加bottom和nestedscrollview作为他们的孩子。它将完全正常。在活动清单中使用此按钮-打开键盘时，该按钮将升起

android:windowSoftInputMode="adjustResize|stateVisible"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <androidx.core.widget.NestedScrollView xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:fillViewport="true">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/input_city_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginTop="32dp"
                android:layout_marginEnd="20dp"
                android:hint="@string/city_name"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/city_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:digits="abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ"
                    android:lines="1"
                    android:maxLength="100"
                    android:textSize="16sp" />

            </com.google.android.material.textfield.TextInputLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>

    <Button
        android:id="@+id/submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:onClick="onSubmit"
        android:padding="12dp"
        android:text="@string/string_continue"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent" />

</LinearLayout>

Android - 如何制作可滚动的constraintlayout？

17 个答案: