带权重与负marginTop的垂直LinearLayout滚动布局求助

Hey there! Let's sort out your requirement to make the entire interface scrollable inside a NestedScrollView, while keeping the 40% red area, 60% black area with a -24dp top margin, and eliminating any bottom blank space. Here's what you need to do:

Core Approach #

Since NestedScrollView only accepts a single direct child, we'll use ConstraintLayout as the root container inside it. This gives us precise control over percentage heights and negative margins without breaking scroll functionality.

Complete XML Implementation #

<androidx.core.widget.NestedScrollView
    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:fillViewport="true"> <!-- Critical: Ensures child fills the entire scroll view, no bottom blank -->

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

        <!-- Red Area: Takes 40% of total screen height -->
        <View
            android:id="@+id/red_area"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#FF0000"
            app:layout_constraintHeight_percent="0.4"
            app:layout_constraintTop_toTopOf="parent" />

        <!-- Black Area: Takes 60% of total screen height, shifted up by 24dp -->
        <View
            android:id="@+id/black_area"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#000000"
            android:layout_marginTop="-24dp"
            app:layout_constraintHeight_percent="0.6"
            app:layout_constraintTop_toBottomOf="@id/red_area" />

        <!-- Add your scrollable content inside the black area here -->
        <!-- Example: Long text to test scrolling -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            android:textColor="#FFFFFF"
            android:padding="16dp"
            app:layout_constraintTop_toTopOf="@id/black_area"
            app:layout_constraintBottom_toBottomOf="@id/black_area" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.core.widget.NestedScrollView>

Key Details Explained #

• android:fillViewport="true": This is non-negotiable! It forces the child layout of NestedScrollView to fill the entire viewport, completely eliminating any bottom blank space.
• Percentage Height Control: Using app:layout_constraintHeight_percent, we set the red area to 0.4 (40%) and black area to 0.6 (60%) to match your exact ratio needs.
• Negative Margin for Offset: The android:layout_marginTop="-24dp" on the black area makes it shift upward by 24dp, covering part of the red area as required.
• Scroll Compatibility: Since ConstraintLayout is the direct child of NestedScrollView, all content inside will automatically support scrolling—even if the black area has lots of content.

Alternative: LinearLayout Implementation #

If you prefer using LinearLayout, here's an alternative solution:

<androidx.core.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- Red Area: 40% of total height -->
        <View
            android:id="@+id/red_area"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.4"
            android:background="#FF0000" />

        <!-- Black Area: 60% of total height, shifted up by 24dp -->
        <View
            android:id="@+id/black_area"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.6"
            android:layout_marginTop="-24dp"
            android:background="#000000"
            android:paddingTop="24dp" /> <!-- Add this if you don't want content to be covered by red area -->

    </LinearLayout>

</androidx.core.widget.NestedScrollView>

Note: If you have content inside the black area, add android:paddingTop="24dp" to prevent it from being hidden under the red area.

内容的提问来源于stack exchange，提问作者Pranav Mahajan