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

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

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

此外,我不知道这是否是一个错误或一些配置,我不已经建立,但我看到了这样的图片 一个地方有蓝图"蓝色矩形"以外的一些成分但他们是可见的,而在我的身边,如果我将一个组件放在"白色空间"上我无法看到它或将其移动到任何地方,它出现在组件树上.

UPDATE

我找到了一种方法,可以在设计工具中滚动约束布局,使用horiontal准线向下推约束布局边框并将其扩展到设备之外,之后您可以使用引导线作为约束布局的新底部锚定组件.

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

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

想要使用以下内容滚动时,请确保您没有在任何视图上使用此约束:ConstraintLayoutScrollView

app:layout_constraintBottom_toBottomOf=“parent”

如果你删除这些,你的滚动应该工作.

说明:

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

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

如果您希望ScrollView当内容不足时匹配父项的高度,则只需将其设置android:fillViewport为true ScrollView.

Answer 3

这里有很多答案，但没有什么是真正简单的。重要的是，ScrollView 的layout_height设置为match_parent，而layout_heightContraintLayout 的 为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 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：确保您的ConstraintLayout足够大以到达任何给定屏幕的底部和侧面，也不是一个坏主意，尤其是在您有背景的情况下，因为这将确保没有奇数的空格。您可以使用空格来完成此操作。

Answer 6

将NestedScrollView与true视口一起使用对我来说很好

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

对于android x使用此

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

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

Answer 7

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

玩得开心 ：）

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

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

另外，请检查：是否可以将约束布局放入 ScrollView 中。