如何在Android中实现自定义可折叠工具栏?


81

使用本教程来实现“灵活空间”模式(带有折叠工具栏的模式)。

我正在尝试实现与Lollipop Contacts活动中类似的效果,该活动在开始时进入活动时,视图仅是图像标题的一部分:

在此处输入图片说明

然后,用户可以向下滚动图像下方的布局以显示更多布局,直到达到最大值为止:

在此处输入图片说明

在我的应用中,我无法使其正常运行。

发生的情况是,在进入活动时,图像标头以其最大大小,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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="0dp" // set programatically
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            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_width="match_parent"
                android:layout_height="match_parent"
                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_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                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_width="match_parent"
        android:layout_height="match_parent"
        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不是解决方案,有人知道吗?

想过也许使用enterAlwaysCollapsed标志作为这里所说的与在了minHeight和CoordinatorLayout部分Appbar:

enterAlwaysCollapsed:当您的视图声明了minHeight并使用此标志时,您的视图将仅以其最小高度(即“折叠”)进入,仅在滚动视图到达其顶部时才重新扩展到其全高。

因此,我在我的工具栏上设置了scroll | enterAlwaysCollapsed标志,并在RecyclerView中设置了minHeight,这是行不通的。然后,我尝试将minHeight移至其他布局,例如AppBarLayout,但没有任何效果。有时只是缩小图像而没有整个视野。



2
谢谢@karaokyo,这确实有效。仍在尝试找出是否还有其他解决方案。
Jjang 2015年

@karaokyo您可以检查一下吗?stackoverflow.com/questions/33069081/...
Jjang


Answers:


1

AppBarComponent提供了一个调用的方法.setExpanded(boolean expanded),它允许你扩大你的AppBarComponent

但请记住,此方法依赖于此布局是的直接子元素CoordinatorLayout

你可以阅读了解更多信息。

如果要设置自定义偏移量的动画,请尝试使用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();
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.