如何在android中实现自定义可折叠工具栏？

Posted 2023-02-22

【中文标题】如何在android中实现自定义可折叠工具栏？

【英文标题】：How to implement Custom Collapsable Toolbar in android?

【发布时间】：2015-11-22 12:08:36

【问题描述】：

使用 this tutorial 实现灵活空间模式（带有折叠工具栏的模式）。

我正在尝试实现与 Lollipop 联系人活动类似的效果，在开始时进入活动时，视图只是图像标题的一部分：

然后，用户可以向下滚动图像下方的布局以显示更多内容，直到达到最大值：

在我的应用程序中，我无法让它工作。

发生的情况是，当进入活动时，图像标题以它的最大尺寸呈现，即 AppBarLayout 的尺寸，就像上面的布局一样，与 Lollipop Contacts 活动中不同，其中它只显示图像的一部分。

这是设置 AppBarLayout 高度的代码（我希望屏幕宽度为最大高度）：

int widthPx = getResources().getDisplayMetrics().widthPixels;
AppBarLayout appbar = (AppBarLayout)findViewById(R.id.appbar);
appbar.setLayoutParams(new CoordinatorLayout.LayoutParams(CoordinatorLayout.LayoutParams.MATCH_PARENT, widthPx));

这是设置 RecyclerView 的代码。尝试使用scrollToPosition，认为它会提升RecyclerView的视图，但它根本没有效果：

mRecyclerView = (RecyclerView) findViewById(R.id.activity_profile_bottom_recyclerview);

    mRecyclerView.setHasFixedSize(true);

    // use a linear layout manager
    mLayoutManager = new LinearLayoutManager(this);

    mRecyclerView.setLayoutManager(mLayoutManager);

    // specify an adapter (see also next example)
    if(mAdapter == null)
        mAdapter = new ProfileAdapter(this, user, inEditMode);
        mRecyclerView.setAdapter(mAdapter);
    

    mRecyclerView.scrollToPosition(mAdapter.getItemCount() - 1); // itemCount is 4

这是布局xml：

<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_profile"
android:layout_
android:layout_
android:fitsSystemWindows="true">

<android.support.design.widget.CoordinatorLayout
    android:layout_
    android:layout_
    android:fitsSystemWindows="true">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_ // set programatically
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/header"
                android:layout_
                android:layout_
                android:background="@drawable/header"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_
                android:layout_
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/activity_profile_bottom_recyclerview"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

    </android.support.design.widget.CoordinatorLayout>

    <include layout="@layout/navigation_view"/>
</android.support.v4.widget.DrawerLayout>

注意：如果我手动向下滚动，RecyclerView 会向下滚动并显示更多图像，它无法通过代码运行。

我认为 scrollToPosition 不是解决方案，有人知道吗？

考虑在 CoordinatorLayout 和 Appbar 部分中使用 enterAlwaysCollapsed 标志可能为 mentioned here 和 minHeight：

enterAlwaysCollapsed: 当你的视图声明了一个 minHeight 并且你 使用这个标志，你的视图只会在它的最小高度进入（即， 'collapsed'），仅在滚动时重新展开到其全高 视图已达到顶峰。

所以，我在我的工具栏上设置了 scroll|enterAlwaysCollapsed 标志，并在我的 RecyclerView 中设置了 minHeight，但这不起作用。然后我尝试将 minHeight 移动到其他布局，例如 AppBarLayout，没有任何效果。它有时只是缩小了图像而没有整个视图。

【问题讨论】：

***.com/questions/31945667/…

感谢@karaokyo，这确实有效。仍在尝试找出是否还有其他解决方案。

@karaokyo 你能看看这个吗？ ***.com/questions/33069081/…

Set initial height of parallax image in CollapsingToolbarLayout的可能重复

我会使用 MotionLayout 来做这些事情。请参阅https://github.com/android/views-widgets-samples/tree/master/ConstraintLayoutExamples

上的示例

【参考方案1】：

AppBarComponent提供了一个名为.setExpanded(boolean expanded)的方法，它允许你扩展你的AppBarComponent。

但请记住，此方法依赖此布局作为 CoordinatorLayout 的直接子级。

您可以阅读this了解更多信息。

如果您想为自定义偏移设置动画，请尝试使用setTopAndBottomOffset(int) 方法。

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBar.getLayoutParams();
final AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
if (behavior != null) 
    ValueAnimator valueAnimator = ValueAnimator.ofInt();
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
        @Override
        public void onAnimationUpdate(ValueAnimator animation) 
            behavior.setTopAndBottomOffset((Integer) animation.getAnimatedValue());
            appBar.requestLayout();
        
    );
    valueAnimator.setIntValues(0, -900);
    valueAnimator.setDuration(400);
    valueAnimator.start();