Android ScrollView：如何使用约束布局创建带有静态页眉和页脚的滚动视图答案

【问题标题】：Android ScrollView: How to create a scrolling view with static header and footer using constraint layoutAndroid ScrollView：如何使用约束布局创建带有静态页眉和页脚的滚动视图
【发布时间】：2019-12-03 19:51:52
【问题描述】：

我正在尝试创建一个带有静态页眉和页脚的滚动视图，例如 this。这是此布局的源代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="Title"
            android:textColor="#000"
            android:textSize="64sp"
            android:textStyle="bold"/>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/divider"
            android:layout_below="@+id/title">

            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/description"
                android:textColor="#000"
                android:textSize="50.7sp" />

        </ScrollView>

        <ImageView
            android:id="@+id/divider"
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:background="#000"
            android:layout_above="@+id/buttons"/>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/buttons"
            android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/btnPos"
                android:text="Ok"
                android:textAllCaps="false"
                android:textColor="#000"
                android:textSize="45.7sp"
                android:textStyle="bold"
                android:onClick="home"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@+id/buttons"/>

            <Button
                android:id="@+id/btnNeg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cancel"
                android:textAllCaps="false"
                android:textColor="#000"
                android:textSize="45.7sp"
                android:textStyle="bold"
                android:onClick="home"
                app:layout_constraintStart_toEndOf="@id/btnPos"
                app:layout_constraintTop_toTopOf="@+id/buttons"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </RelativeLayout>

</RelativeLayout>

这是使用相对布局解决的问题，但我无法使用约束布局使其工作。您可以看到here 滚动视图不受页脚上方的限制。这是此布局的来源

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Title"
            android:textColor="#000"
            android:textSize="64sp"
            android:textStyle="bold"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ScrollView
            android:id="@+id/scroll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@id/divider"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/title"
            app:layout_constraintVertical_bias="0.0">

            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/description"
                android:textColor="#000"
                android:textSize="50sp" />
        </ScrollView>

        <ImageView
            android:id="@+id/divider"
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:background="#000"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/buttons"/>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/buttons"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <Button
                android:id="@+id/btnPos"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Ok"
                android:textSize="45.7sp"
                android:textAllCaps="false"
                android:onClick="home"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

            <Button
                android:id="@+id/btnNeg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cancel"
                android:textAllCaps="false"
                android:textSize="45.7sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/btnPos"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

根据this post，属性从Relative到Constraint布局的转换如下

android:layout_above="" -> app:layout_constraintBottom_toTopOf=""

和 android:layout_below="" -> app:layout_constraintTop_toBottomOf=""

演示应用程序的 repo 是 here。

相对布局有效，但我想使用最新的 android 布局以获得最佳性能，这应该是可能的。提前致谢！

【问题讨论】：

标签： android xml android-constraintlayout android-scrollview

【解决方案1】：

布局存在一些问题。 ConstraintLayout 的目的之一是提供平面布局结构。将 ConstraintLayout 嵌套在另一个 ConstraintLayout 中并没有错，但它破坏了布局的理想属性之一。

match_parent 在 ContraintLayout 中不鼓励使用视图的宽度或高度。使用带有适当约束集的match_constraints (0dp) 而不是match_parent。您的布局中有一些match_parent。（match_parent 在 ConstraintLayout 本身上是可以的，因为它将被放置在另一种类型的布局中。

我继续对下面的布局进行了一些调整。

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

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textColor="#000"
        android:textSize="64sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ScrollView
        android:id="@+id/scroll"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/btnNeg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title">

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/description"
            android:textColor="#000"
            android:textSize="50sp" />
    </ScrollView>

    <ImageView
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:background="#000"
        app:layout_constraintBottom_toTopOf="@+id/buttons"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnPos"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="home"
        android:text="Ok"
        android:textAllCaps="false"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:textSize="45.7sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btnNeg"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnNeg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel"
        android:textAllCaps="false"
        android:textSize="45.7sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btnPos" />

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

【解决方案2】：

是的，我同意 Cheticamp 的说法。 ConstraintLayout 的目的是具有平面布局结构。如果您对此文件有此问题，请将其发布在上面，您可以在 TextView 中添加一个滚动条，以实现如下所示的平面布局结构：

<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textColor="#000"
        android:textSize="64sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/description"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/description"
        android:textColor="#000"
        android:scrollbars="vertical"
        android:textSize="50sp"
        app:layout_constraintBottom_toTopOf="@+id/btnNeg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title" />

    <ImageView
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:background="#000"
        app:layout_constraintBottom_toTopOf="@+id/buttons"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnPos"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="home"
        android:text="Ok"
        android:textAllCaps="false"
        android:textSize="45.7sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btnNeg"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnNeg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel"
        android:textAllCaps="false"
        android:textSize="45.7sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btnPos" />

</androidx.constraintlayout.widget.ConstraintLayout>

您需要做的最后一件事是在您的 TextView 中添加一个移动方法，如下所示：

((TextView) findViewById(R.id.description)).setMovementMethod(new ScrollingMovementMethod());

【讨论】：