加入ConstraintLayout
内ScrollView
后,我注意到内容仍然停留在屏幕(水平和垂直)的中间。我已经尝试添加android:layout_gravity="top"
到主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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/cl_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingStart="@dimen/activity_horizontal_margin"
android:paddingEnd="@dimen/activity_horizontal_margin">
<androidx.cardview.widget.CardView
android:id="@+id/cv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@+id/tv_disclaimer">
<LinearLayout
android:id="@+id/ll_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:importantForAccessibility="no"
android:paddingEnd="10dp" />
<TextView
android:id="@+id/tv_title"
style="@android:style/TextAppearance.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:attr/textColorPrimary" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/tv_disclaimer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:gravity="center"
android:textColor="?android:attr/textColorPrimary"
app:layout_constraintTop_toBottomOf="@+id/cv_title"
app:layout_constraintBottom_toTopOf="@+id/cv_description"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
style="@android:style/TextAppearance.Medium" />
<androidx.cardview.widget.CardView
android:id="@+id/cv_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:layout_constraintTop_toBottomOf="@+id/tv_disclaimer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/cl_description"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/ll_allergies"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@+id/ll_ingredients">
<ImageView
android:id="@+id/iv_allergies"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="5dp"/>
<TextView
android:id="@+id/tv_allergies"
style="@android:style/TextAppearance.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="?android:attr/textColorPrimary" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_allergyinfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@+id/ll_allergies"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@+id/ll_ingredients">
<TextView
android:id="@+id/tv_allergyinfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:attr/textColorPrimary"
android:layout_marginBottom="2dp"
android:gravity="start"
style="@android:style/TextAppearance.Medium" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_ingredients"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@+id/ll_allergyinfo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="@+id/iv_ingredients"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="5dp" />
<TextView
android:id="@+id/tv_ingredients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="?android:attr/textColorPrimary"
style="@android:style/TextAppearance.Large" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
当前结果
两个重要的事情是怎么回事。
第一个是你的ScrollView
指定android:fillViewport="true"
。这意味着只要了滚动的内容比屏幕尺寸“小”,他们将被拉伸以填充整个屏幕。换句话说,当你有滚动你的wrap_content
ConstraintLayout只能实际包装的内容。在其他情况下,你的ConstraintLayout将被功能高度match_parent
。
第二个是在你CardView,TextView的,和第二CardView约束形成垂直链。链具有关于间距当父大于该链中的视图(其是由于上面所讨论的fillViewport
行为)的总和特殊行为;默认是“传播”,这将定位三个视图,使得所有的剩余空间被均匀地分成四个组块(一个在链中,一个第一两个视图之间,第二两个视图之间的一个开始,而在链的末端最后一个)。
如何解决此问题有关系吗?
做的最好的事情就是要打破链。假设你只是希望所有堆叠一前一后的意见,从屏幕的顶部开始,就没有必要使用链。为了打破链,删除从每个视图的底部约束:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
...>
<androidx.constraintlayout.widget.ConstraintLayout
...>
<androidx.cardview.widget.CardView
android:id="@+id/cv_title"
...
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
...
</androidx.cardview.widget.CardView>
<TextView
android:id="@+id/tv_disclaimer"
...
app:layout_constraintTop_toBottomOf="@+id/cv_title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.cardview.widget.CardView
android:id="@+id/cv_description"
...
app:layout_constraintTop_toBottomOf="@+id/tv_disclaimer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
...
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
或者,您可以删除您滚动型的fillViewport
属性。没有这一点,孩子ConstraintLayout永远不会被拉伸以填满整个屏幕,并wrap_content
将意味着,从未有任何额外的空间在链视图之间展开。
尝试从您的ll_allergies app:layout_constraintTop_toTopOf="parent"
删除LinearLayout
。当我的复制,因为它是这条线这是添加的TextView和布局之间的不必要的空间。另外,保持约束和它的高度增加0dp,使其强制约束。
评论后更新:我认为你的观点是重叠的,因为ll_allergies底部约束是对ll_ingredients而不是ll_allergyinfo的顶部。尝试改变这一点:
app:layout_constraintBottom_toTopOf="@id/ll_ingredients"
为此:
app:layout_constraintBottom_toTopOf="@id/ll_allergyinfo"
并带回ll_alergies的WRAP_CONTENT。我们希望,现在一切都将水到渠成
更新:响应不再有效的代码进行了更新后
有在你的代码中的一些错误:
1.you设置布局是自身的底部
android:id="@+id/ll_ingredients"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@+id/ll_ingredients"`