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

问题描述 投票：99回答：11

我想制作一个允许我使用约束布局向下滚动的布局，但我不知道如何去做。 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"/>

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

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

enter image description here

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

更新：

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

android android-layout android-scrollview android-constraintlayout
11个回答
65
投票

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

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>

滚动Topenter image description here

滚动Bottomenter image description here

0
投票

你可以使用HorizontalScrollView，它也会起作用！

0
投票

这是我解决它的方式： 如果您在ConstraintLayout中使用嵌套ScrollView即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">
0
投票

在scrollview中，使高度和宽度为0，添加Top_toBottomOf和Bottom_toTopOf约束。

33
投票

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

想要使用ConstraintLayout可以滚动ScrollView时，请确保您没有在任何视图上使用此约束：

app:layout_constraintBottom_toBottomOf=“parent”

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

说明：

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

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

如果你想让ScrollView的孩子在没有足够的内容时匹配父母的高度，只需将android:fillViewport设置为真为ScrollView。

7
投票

只需在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>

而已。享受你的编码。

7
投票

总而言之，您基本上将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：确保你的ConstraintLayout足够大到达任何给定屏幕的底部和侧面也是一个坏主意，特别是如果你有背景，因为这将确保没有奇怪的空格。如果没有别的，你可以用空格来做。

4
投票

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

含义：

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

注意

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

2
投票

为了完成之前的答案，我添加了以下示例，其中还考虑了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>
2
投票

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

1
投票

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

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

1
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.