如何在SlidingUpPanel中使用CollapsingToolbar并实现联动展开折叠

我之前在项目里刚好做过类似的需求，要让SlidingUpPanel的滑动和它内部Fragment里的CollapsingToolbarLayout同步联动，核心思路就是监听SlidingUpPanel的滑动状态，把滑动偏移量映射到AppBarLayout的折叠/展开动作上。下面是具体的实现步骤和代码示例：

一、确认布局结构正确性 #

首先确保你的布局层级和描述一致，先给出核心布局的代码示例：

1. 主布局（包含SlidingUpPanel） #

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_up_panel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    sothree:umanoPanelHeight="68dp"
    sothree:umanoShadowHeight="4dp">

    <!-- CHILD 1: 主内容区域 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!-- 主内容控件 -->
    </LinearLayout>

    <!-- CHILD 2: 包含CollapsingToolbar的Fragment容器 -->
    <FrameLayout
        android:id="@+id/panel_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</com.sothree.slidinguppanel.SlidingUpPanelLayout>

2. Fragment内的CoordinatorLayout布局 #

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

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="联动标题">

            <!-- 顶部背景图 -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/your_header_image"
                app:layout_collapseMode="parallax" />

            <!-- Toolbar -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/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>

    <!-- 下方内容（可选，保证CoordinatorLayout正常工作） -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!-- 滚动内容 -->
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

二、核心联动逻辑实现 #

接下来是关键的滑动监听与联动控制，这里提供两种实现方式，你可以根据项目架构选择：

方式1：直接在Activity中监听并控制（简单直接） #

在承载SlidingUpPanel的Activity里，通过PanelSlideListener拿到滑动偏移量，直接控制Fragment里的AppBarLayout：

public class MainActivity extends AppCompatActivity {

    private SlidingUpPanelLayout slidingUpPanel;
    private YourPanelFragment panelFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        slidingUpPanel = findViewById(R.id.sliding_up_panel);
        // 初始化并加载Fragment
        panelFragment = new YourPanelFragment();
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.panel_fragment_container, panelFragment)
                .commit();

        // 设置滑动监听
        slidingUpPanel.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                // slideOffset范围：0（完全收起）→1（完全展开）
                if (panelFragment.getView() == null) return;
                
                AppBarLayout appBarLayout = panelFragment.getView().findViewById(R.id.app_bar_layout);
                int totalScrollRange = appBarLayout.getTotalScrollRange();
                // 根据偏移量计算AppBar的滚动距离，实现平滑联动
                appBarLayout.setTranslationY(-totalScrollRange * (1 - slideOffset));
            }

            @Override
            public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {
                // 处理状态切换（比如完全展开/收起时强制完成动画）
                if (panelFragment.getView() == null) return;
                
                AppBarLayout appBarLayout = panelFragment.getView().findViewById(R.id.app_bar_layout);
                switch (newState) {
                    case EXPANDED:
                        appBarLayout.setExpanded(true, true);
                        break;
                    case COLLAPSED:
                        appBarLayout.setExpanded(false, true);
                        break;
                    default:
                        break;
                }
            }
        });
    }
}

方式2：通过接口回调解耦（更优雅，适合复杂架构） #

如果你的项目更注重解耦，可以定义一个回调接口，让Activity把滑动事件传递给Fragment，由Fragment自己控制内部的CollapsingToolbar：

1. 定义回调接口

public interface PanelSlideCallback {
    void onPanelSlide(float slideOffset);
    void onPanelStateChanged(SlidingUpPanelLayout.PanelState newState);
}

2. 在Fragment中实现接口并控制AppBar

public class YourPanelFragment extends Fragment implements PanelSlideCallback {

    private AppBarLayout appBarLayout;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_panel, container, false);
        appBarLayout = view.findViewById(R.id.app_bar_layout);
        return view;
    }

    @Override
    public void onPanelSlide(float slideOffset) {
        int totalScrollRange = appBarLayout.getTotalScrollRange();
        appBarLayout.setTranslationY(-totalScrollRange * (1 - slideOffset));
    }

    @Override
    public void onPanelStateChanged(SlidingUpPanelLayout.PanelState newState) {
        switch (newState) {
            case EXPANDED:
                appBarLayout.setExpanded(true, true);
                break;
            case COLLAPSED:
                appBarLayout.setExpanded(false, true);
                break;
            default:
                break;
        }
    }
}

3. 在Activity中传递事件

public class MainActivity extends AppCompatActivity {

    private SlidingUpPanelLayout slidingUpPanel;
    private PanelSlideCallback panelSlideCallback;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        slidingUpPanel = findViewById(R.id.sliding_up_panel);
        YourPanelFragment panelFragment = new YourPanelFragment();
        panelSlideCallback = panelFragment;
        
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.panel_fragment_container, panelFragment)
                .commit();

        slidingUpPanel.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                if (panelSlideCallback != null) {
                    panelSlideCallback.onPanelSlide(slideOffset);
                }
            }

            @Override
            public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {
                if (panelSlideCallback != null) {
                    panelSlideCallback.onPanelStateChanged(newState);
                }
            }
        });
    }
}

三、注意事项 #

• 确保CollapsingToolbarLayout的layout_scrollFlags设置正确（比如scroll|exitUntilCollapsed），否则无法正常折叠。
• 避免空指针：在获取Fragment的View时，要确保Fragment已经完成视图初始化（比如在onViewCreated之后）。
• 如果需要更细腻的动画效果，可以调整setTranslationY的计算逻辑，或者结合ValueAnimator实现更平滑的过渡。

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