Android实现Facebook式TabLayout滚动置顶（ScrollView内布局场景）

Got it, let's fix this sticky TabLayout issue you're dealing with. The key problem in your original layout is that the TabLayout is trapped inside the NestedScrollView, which prevents it from sticking to the top independently. Here's a step-by-step solution that keeps your CardViews intact while achieving the Facebook-style sticky header effect:

Step 1: Restructure Your Layout #

First, we'll split the content into separate sections within the CoordinatorLayout: the scrollable CardViews, the sticky TabLayout, and the ViewPager. We also add a spacer to avoid content overlap when the TabLayout moves.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <!-- Existing AppBar with Collapsing Toolbar -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:liftOnScroll="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|snap">
            
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
            
        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <!-- Scrollable CardViews Section -->
    <androidx.core.widget.NestedScrollView
        android:id="@+id/cards_scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <androidx.cardview.widget.CardView
                android:id="@+id/checkinhome1"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_margin="16dp">
                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="Content card1"
                    android:textAppearance="@style/TextAppearance.AppCompat.Display3"/>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:id="@+id/checkinhome2"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_margin="16dp">
                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="Content card2"
                    android:textAppearance="@style/TextAppearance.AppCompat.Display3"/>
            </androidx.cardview.widget.CardView>

            <!-- Spacer to prevent TabLayout from overlapping card content -->
            <View
                android:id="@+id/tab_spacer"
                android:layout_width="match_parent"
                android:layout_height="?attr/tabLayoutPreferredHeight"
                android:visibility="invisible"/>

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

    <!-- Sticky TabLayout -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/sticky_tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/tabLayoutPreferredHeight"
        android:background="@color/white"
        app:layout_behavior=".StickyTabLayoutBehavior"/>

    <!-- ViewPager anchored to TabLayout -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_anchor="@id/sticky_tabs"
        app:layout_anchorGravity="bottom"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 2: Create a Custom Coordinator Behavior #

We need a custom Behavior to listen to the NestedScrollView's scroll events and adjust the TabLayout's position dynamically. Create this Kotlin class (or convert to Java if needed):

import android.content.Context
import android.util.AttributeSet
import android.view.View
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.view.ViewCompat
import androidx.core.widget.NestedScrollView

class StickyTabLayoutBehavior(context: Context, attrs: AttributeSet?) : CoordinatorLayout.Behavior<View>(context, attrs) {

    override fun layoutDependsOn(parent: CoordinatorLayout, child: View, dependency: View): Boolean {
        // We only care about the NestedScrollView holding the cards
        return dependency is NestedScrollView && dependency.id == R.id.cards_scrollview
    }

    override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean {
        val scrollY = dependency.scrollY
        // Calculate how far we need to scroll before the TabLayout sticks
        val cardsTotalHeight = dependency.getChildAt(0).height - child.height

        // Determine the TabLayout's target position
        val targetY = if (scrollY >= cardsTotalHeight) {
            // Stick to the bottom of the collapsed AppBarLayout
            val appBar = parent.findViewById<View>(com.google.android.material.R.id.appbar)
            appBar.height.toFloat()
        } else {
            // Follow the scroll position of the NestedScrollView
            (dependency.y + dependency.height - child.height)
        }

        // Update the TabLayout's position
        child.translationY = targetY
        return true
    }

    override fun onStartNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: View,
        directTargetChild: View,
        target: View,
        axes: Int,
        type: Int
    ): Boolean {
        // Listen only to vertical scroll events
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL
    }

    override fun onNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: View,
        target: View,
        dxConsumed: Int,
        dyConsumed: Int,
        dxUnconsumed: Int,
        dyUnconsumed: Int,
        type: Int,
        consumed: IntArray
    ) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type, consumed)
        // Force a layout update to adjust the TabLayout's position during scroll
        coordinatorLayout.requestLayout()
    }
}

Step 3: Link TabLayout with ViewPager #

In your Activity/Fragment, connect the TabLayout to the ViewPager2 as usual:

val tabLayout = findViewById<TabLayout>(R.id.sticky_tabs)
val viewPager = findViewById<ViewPager2>(R.id.view_pager)

// Replace with your actual ViewPager adapter
viewPager.adapter = YourCustomPagerAdapter(this)

// Bind TabLayout and ViewPager2
TabLayoutMediator(tabLayout, viewPager) { tab, position ->
    tab.text = "Tab ${position + 1}"
}.attach()

How This Works #

• Layout Structure: The CardViews live in their own NestedScrollView, so they scroll independently. The TabLayout is a direct child of the CoordinatorLayout, allowing it to move freely across the screen.
• Spacer View: The invisible spacer ensures that when the TabLayout moves up, it doesn't cover the bottom of the last CardView.
• Custom Behavior: The Behavior watches the NestedScrollView's scroll position. Once you've scrolled past all the CardViews, the TabLayout sticks to the bottom of the AppBarLayout. Otherwise, it moves up with the scroll.

Key Notes #

• Make sure your CardViews have a measurable height (fixed or wrap_content with known content) so the Behavior can calculate the scroll threshold accurately.
• Set a solid background on the TabLayout to prevent content from showing through when it's sticky.
• If your AppBarLayout has a dynamic height (e.g., expanding images), the Behavior will automatically adjust to stick the TabLayout below it.

内容的提问来源于stack exchange，提问作者Howard Lau