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



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

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

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

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

根据这篇文章,属性从"相对于约束"布局的转换如下

安卓:layout_above=" -> app:layout_constraintBottom_toTopOf=">

和安卓:layout_below=" -> app:layout_constraintTop_toBottomOf=">

演示应用程序的存储库位于此处。

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

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

不鼓励在ContraintLayoutmatch_parent视图的宽度或高度。代替match_parent,使用match_constraints(0dp(并设置适当的约束。您的布局中有一些match_parent。(match_parentConstraintLayout本身上是可以的,因为它将被放置在另一种类型的布局中。

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

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

是的,我同意Cheticamp所说的话。约束布局的目的是具有平面布局结构。如果你在这个文件上遇到这个问题,你把它贴在上面,你可以添加一个滚动条到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());

最新更新