Android - 如何制作可滚动的约束布局？

Posted 2023-04-15

技术标签:

【中文标题】Android - 如何制作可滚动的约束布局？【英文标题】：Android - how to make a scrollable constraintlayout? 【发布时间】：2017-08-23 05:09:33 【问题描述】：

我想制作一个允许我使用约束布局向下滚动的布局，但我不知道该怎么做。 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_
    android:layout_
    android:fillViewport="true">

<android.support.constraint.ConstraintLayout
    android:id="@+id/Constraint"
    android:layout_
    android:layout_/>

或者反过来呢？也许有人可以为我指出一个很好的教程或举个例子，我似乎找不到。

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

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

更新：

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

【问题讨论】：

【参考方案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_
    android:layout_
    tools:context=".MainActivity">

    <android.support.constraint.ConstraintLayout
        android:layout_
        android:layout_>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til_input"
            android:layout_
            android:layout_
            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_
                android:layout_ />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btn_save"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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>

滚动顶部

滚动底部

【讨论】：

谢谢，问题是我无法在预览中滚动，所以在那里构建一些东西是不可能的，但我发现使用指南我可以拉下布局以制作空的可滚动空间，然后将其删除当我完成时这个答案应该放在首位！【参考方案2】：

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

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

app:layout_constraintBottom_toBottomOf=“parent”

如果你删除这些你的滚动应该可以工作。

说明：

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

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

如果您希望ScrollView 的子级在没有足够内容时匹配父级的高度，只需将ScrollView 的android:fillViewport 设置为true。

【讨论】：

@BasilBattikhi 添加了解释该死的，这真的有效！我讨厌滚动视图，说真的。谢谢@SuppressWarnings，非常感谢。您提示删除“app:layout_constraintBottom_toBottomOf=“parent””工作 100% +1，真的好用，不知道为什么我的scrollview里面的项目没有定位到我想要的位置。是的，对...但是要达到相同的要求，请遵循我上面提到的方法。【参考方案3】：

在视口为 true 的情况下使用 NestedScrollView 对我有好处

<android.support.v4.widget.NestedScrollView
        android:layout_
        android:layout_
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_
            android:layout_>

        </android.support.constraint.ConstraintLayout>

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

对于 android x 使用这个

 <androidx.core.widget.NestedScrollView
        android:layout_
        android:layout_
        android:fillViewport="true">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_>
.....other views....

</androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>

【讨论】：

谢谢！这就是我一直在寻找的 - android:fillViewport="true" 是关键。不要忘记在nestedscrollview里面添加，如果你使用的是AppBarLayoutapp:layout_behavior="@string/appbar_scrolling_view_behavior"【参考方案4】：

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

示例 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_
    android:layout_
    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_
        android:layout_
        android:background="@drawable/gradient"
        tools:context="app.android.SignInActivity">

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

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

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

注意 2： 确保您的 ConstraintLayout 足够大以到达任何给定屏幕的底部和侧面也不是一个坏主意，特别是如果您有背景，例如这将确保没有奇怪的空白。如果没有别的，您可以使用空格来执行此操作。

【讨论】：

【参考方案5】：

只需在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_
        android:layout_>

    <android.support.constraint.ConstraintLayout
            android:layout_
            android:layout_
            android:background="@color/white">

 </android.support.constraint.ConstraintLayout>

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

就是这样。享受你的编码。

【讨论】：

【参考方案6】：

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

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_>
    
    ...

【讨论】：

【参考方案7】：

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

意思：

您可以制作可滚动的 ConstraintLayout，但由于未考虑的错误/场景，它无法在编辑器中正确滚动。但即使滚动在编辑器中不起作用，它也适用于设备。（我做了几个滚动的CONstraintLayouts，所以测试了一下）

注意

关于您的代码。 ScrollView 缺少一个结束标记，我不知道是文件中的情况还是复制粘贴未命中，但您可能需要查看它。

【讨论】：

设计一个可滚动的constraintlayout，在CL的当前状态下，即可以扩展设备的高度，自定义。将布局的高度（ScrollView 和 CL）设置为较高的数字（例如 2000DP），然后进行正常设计。请注意，您需要一台好的计算机来处理扩展，因为真正的大型定制设备对计算机的要求很高。遗憾的是 CL 不支持使用 SCrollViews 进行设计，但有一些变通方法。比如扩大设备的高度。【参考方案8】：

请使用下面的解决方案，我花了很多时间来修复它。

享受你的时间:)

<?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_
    android:layout_
    android:background="@color/white"
    >

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


            <android.support.constraint.ConstraintLayout
                android:layout_
                android:layout_
                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>

完全像这样使用你一定会找到你的解决方案...

【讨论】：

【参考方案9】：

为了完成前面的答案，我添加了以下示例，其中还考虑了 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_
    android:layout_
    android:fitsSystemWindows="true"
    android:background="@drawable/bg"
    android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_
    android:layout_
    android:theme="@style/AppTheme.ActionBar.AppOverlayTheme">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>

<ScrollView
    android:layout_
    android:layout_>

    <android.support.constraint.ConstraintLayout
        android:layout_
        android:layout_>

        <ImageView
            android:id="@+id/image_id"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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>

【讨论】：

【参考方案10】：

你需要用一个 ScrollView 标签包围我的约束布局，并给它属性 android:isScrollContainer="true"。

【讨论】：

【参考方案11】：

从嵌套滚动视图中取出底部按钮并将线性布局作为父级。添加底部和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_
    android:layout_
    android:orientation="vertical">

    <androidx.core.widget.NestedScrollView xmlns:tools="http://schemas.android.com/tools"
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:fillViewport="true">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_
            android:layout_
            android:orientation="vertical">

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/input_city_name"
                android:layout_
                android:layout_
                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_
                    android:layout_
                    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_
        android:layout_
        android:background="@color/colorPrimary"
        android:onClick="onSubmit"
        android:padding="12dp"
        android:text="@string/string_continue"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent" />

</LinearLayout>

【讨论】：

【参考方案12】：

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

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

【讨论】：

建议改用RelativeLayout，它最接近ConstraintLayout 该错误已修复。【参考方案13】：

约束布局是新应用的默认设置。我现在正在“学习 Android”，并且很难弄清楚如何处理默认的“示例”代码以在键盘启动时滚动。我见过很多应用程序，我必须关闭键盘才能单击“提交”按钮，有时它不会消失。使用这个 [ScrollView / ContraintLayout / Fields] 层次结构现在工作得很好。通过这种方式，我们可以在可滚动视图中享受 ConstraintLayout 带来的好处和易用性。

【讨论】：

【参考方案14】：

您可以使用HorizontalScrollView，它也可以正常工作！

【讨论】：

请说明使用方法【参考方案15】：

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

<ScrollView
    android:layout_
    android:layout_
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/someOtherWidget"
    app:layout_constraintTop_toTopOf="parent">

【讨论】：

【参考方案16】：

在滚动视图中将高度和宽度设为 0 添加 Top_toBottomOf 和 Bottom_toTopOf 约束就是这样。

【讨论】：

请详细解释这个答案，例如要实现的代码示例。【参考方案17】：

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

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

【讨论】：

以上是关于Android - 如何制作可滚动的约束布局？的主要内容，如果未能解决你的问题，请参考以下文章

使用约束布局或android中的任何其他方式进行垂直滚动的粘性视图

滚动视图内的Android约束布局高度无效

滚动视图中的约束布局

滚动视图内的约束布局，总是参考线高度变化

如何使用自动布局约束在单个屏幕中放置两个视图

UIScrollView 不滚动 w/ 编程自动布局约束