如何在Android中实现自定义可折叠工具栏? [英] How to implement Custom Collapsable Toolbar in android?

问题描述

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

Using this tutorial to implement a Flexible Space pattern (the one with the collapsing toolbar).

我正在尝试实现与 Lollipop Contacts活动类似的效果，在进入活动之初，视图只是图像标题的一部分

I'm trying to achieve a similar effect as in the Lollipop Contacts activity, which at the beginning while entering the activity, views are only part of the image header:

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

Then, the user can scroll down the layout below the image in order to reveal more of it, until it reaches the maximum:

在我的应用中，我无法使其正常运行.

In my app, I can't manage to make it work.

发生的情况是，在进入活动时，图像标题以其最大大小，AppBarLayout的大小(与上面的布局相同)显示，并且与Lollipop Contacts活动中的不同它只显示图像的一部分.

What happens is that when entering the activity, the image header is presented at it's maximum size, the size of the AppBarLayout, just as the layout above, and unlike in the Lollipop Contacts activity, where it shows only part of the image.

这是设置AppBarLayout的高度的代码(我希望屏幕的宽度为最大高度):

This is the code that sets the height of the AppBarLayout (I want width of screen to be the maximum height):

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的视图，但完全没有效果:

And this is the code that sets the RecyclerView. Tried using scrollToPosition, thought it would lift the view of the RecyclerView up, but it has no effect at all:

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会关闭并显示更多图像，它将无法通过代码工作.

Note: If I manually scrolls down, the RecyclerView goes down and revealing more of the image, it just won't work through code.

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

I think scrollToPosition isn't the solution, does anyone have any idea?

关于使用enterAlwaysCollapsed标志的想法可能是提到的这里在CoordinatorLayout和Appbar部分中，且具有minHeight:

Thought about using enterAlwaysCollapsed flag perhaps as mentioned here in the CoordinatorLayout and Appbar section with minHeight:

enterAlwaysCollapsed:当您的视图已声明minHeight且您 使用此标志，您的视图将仅以其最低高度输入(即， 塌陷")，只有在滚动时才重新展开至全高 视图已经达到顶峰.

enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached its top.

因此，我在我的工具栏上设置了scroll | enterAlwaysCollapsed标志，并在RecyclerView中将minHeight设置为无效.然后，我尝试将minHeight移至其他布局，例如AppBarLayout，但没有任何效果.有时候，即使没有整个视图，它也会缩小图像.

So, I set scroll|enterAlwaysCollapsed flag to my toolbar and minHeight in my RecyclerView, which didn't work. Then I tried moving the minHeight to other layouts such as AppBarLayout, nothing worked. It just shrank the image sometimes without the whole view.

推荐答案

AppBarComponent提供了一个名为.setExpanded(boolean expanded)的方法，该方法可用于扩展AppBarComponent.

The AppBarComponentprovides a method called .setExpanded(boolean expanded), which allows you to expand your AppBarComponent.

但是请记住，此方法依赖于此布局是CoordinatorLayout的直接子代.

But keep in mind, that this method relies on this layout being a direct child of a CoordinatorLayout.

您可以阅读此有关更多信息.

You can read this for more information.

如果要设置自定义偏移量的动画，请尝试使用setTopAndBottomOffset(int)方法.

If you want to animate to a custom offset, try using the setTopAndBottomOffset(int) method.

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();
}

这篇关于如何在Android中实现自定义可折叠工具栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！