ScrollView中ConstraintLayout顶部堆叠问题求助

你的核心问题在于所有控件都通过parent的上下边缘+垂直偏移来定位，导致ConstraintLayout无法正确计算自身高度，加上ScrollView高度设置错误，最终出现堆叠且无法滚动的情况。以下是修复步骤：

1. 修正ScrollView的高度设置 #

将ScrollView的android:layout_height从wrap_content改为match_parent，这样它会占据屏幕可用空间，内容超出时才会触发滚动：

<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

2. 重构ConstraintLayout内的控件依赖关系 #

放弃用parent上下边缘+bias的定位方式，改为垂直链式依赖，让控件依次向下排列，确保ConstraintLayout能正确计算总高度：

修改后的核心布局代码示例：

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity"
    android:background="#9F9F9F">

    <!-- 顶部背景图：固定在父布局顶部 -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@drawable/user_bg"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- 头像：依赖背景图底部，居中并通过负margin实现重叠 -->
    <ImageView
        android:id="@+id/userprofile"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@drawable/no_profile_pic"
        android:contentDescription="User Profile"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="-75dp" />

    <!-- 用户名：依赖头像底部，居中 -->
    <TextView
        android:id="@+id/userprofilename"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Loading..."
        android:textSize="17sp"
        app:layout_constraintTop_toBottomOf="@+id/userprofile"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp" />

    <!-- 第一个信息栏：依赖用户名底部 -->
    <View
        android:id="@+id/background"
        android:layout_width="380dp"
        android:layout_height="60dp"
        android:background="@drawable/button_bg"
        app:layout_constraintTop_toBottomOf="@+id/userprofilename"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp" />

    <!-- 第一个信息栏内的图标 -->
    <ImageView
        android:id="@+id/ic_image"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:background="@drawable/ic_profile"
        app:layout_constraintCenterVertical_toCenterVertical="@+id/background"
        app:layout_constraintStart_toStartOf="@+id/background"
        android:layout_marginStart="20dp" />

    <!-- 第一个信息栏内的文本 -->
    <TextView
        android:id="@+id/userid"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="Loading..."
        android:textSize="18sp"
        android:textColor="@color/black"
        android:layout_marginStart="80dp"
        android:gravity="center_vertical"
        app:layout_constraintTop_toTopOf="@+id/background"
        app:layout_constraintBottom_toBottomOf="@+id/background" />

    <!-- 第二个信息栏：依赖第一个信息栏底部 -->
    <View
        android:id="@+id/bg2"
        android:layout_width="380dp"
        android:layout_height="60dp"
        android:background="@drawable/button_bg"
        app:layout_constraintTop_toBottomOf="@+id/background"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="8dp" />

    <!-- 后续信息栏以此类推，均依赖前一个信息栏的底部 -->
    <!-- ... 省略其余重复结构的控件，按照上述逻辑修改即可 ... -->

    <!-- 底部导航栏：若要随内容滚动则依赖最后一个信息栏底部，若要固定在屏幕底部需移至ScrollView外 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#9F9F9F"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        app:layout_constraintTop_toBottomOf="@+id/bg5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键修改说明 #

• 所有控件不再同时绑定parent的上下边缘，而是通过Top_toBottomOf建立垂直依赖，让布局从上到下依次排列。
• 头像通过负margin实现与背景图的重叠效果，这是个人主页布局的常用技巧。
• 每个信息栏之间添加适当margin，避免布局拥挤。
• 若底部导航栏需要固定在屏幕底部，建议将其移出ScrollView，放在外层布局（如另一个ConstraintLayout）中并设置app:layout_constraintBottom_toBottomOf="parent"。

内容的提问来源于stack exchange，提问作者Joshua Musa