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

我想做一个布局，让我使用约束布局向下滚动，但我不知道如何去做。像这样，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

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

更新：

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

187485 次浏览
小开

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

此外，签出：是否可以将约束布局放在ScrollView中。

小开

要制作可滚动的布局，布局是正确的。除非有理由滚动（就像在任何其他布局中一样），否则它将无法滚动。因此，添加足够的内容，它将是可滚动的，就像任何布局（线性，相对等）。但是，使用ConstraintLayout和ScrollView进行设计时，无法在Blueprint或设计模式中正确滚动。

含义：

您可以创建一个可滚动的ConstraintLayout，但由于未考虑到错误/场景，它将无法在编辑器中正确滚动。但即使滚动在编辑器中不起作用，它也可以在设备上工作。（我已经做了几个滚动约束布局，所以我已经测试过了）

注意

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

小开

看起来它正在工作，我不知道你在用什么依赖关系工作，但在这个中。

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>

滚动顶部enter image description here

向下滚动enter image description here

小开

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

小开

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

例子活动_签名_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足够大，可以到达任何给定屏幕的底部和侧面也不是一个坏主意，特别是如果您有一个背景，因为这将确保没有奇怪的空白。如果没有别的，你可以用空格来做这件事。

小开

为了完成前面的回答，我添加了下面的示例，其中还考虑了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>
小开

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

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

app:layout_constraintBottom_toBottomOf=“parent”

如果你删除这些，你的卷轴应该工作。

解释：

将子组件的高度设置为与_ABC_为0的父组件的高度相匹配，这与组件要执行的操作相矛盾。我们大多数时候想要的是，当一些动态大小的内容大于屏幕/框架时，它是可滚动的。将高度与父ScrollView相匹配将强制所有内容显示在固定帧（父的高度）中，因此使任何滚动功能无效。

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

当内容不足时，如果希望ScrollView的子级与父级的高度匹配，只需将ScrollView的android:fillViewport设置为true.

小开

您需要用scrollView标记包围我的约束布局，并为其提供属性android：isScrollContainer=“ true ”。

小开

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

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

小开

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

小开
我

是这样解决的：
如果您正在使用嵌套的ScrollView，即ConstraintLayout中的ScrollView，则对Scrollview使用以下配置，而不是“_内容换行”或“匹配_父项”：

<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">
小开

在ScrollView中，将高度和宽度设置为0 将顶部_添加到BottomOf，将底部_添加到TopOf约束 就这样.

小开

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

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

Expand Vertically

小开

将NestedScrollView与Viewport 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>
小开

从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>
小开

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

享受你的时间：）

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

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

小开

这里有很多答案，没有什么是真正简单的。一定要将ScrollView的layout_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">
    

...

提交答案