仅包含自定义视图（布局）的折叠工具栏布局

Question

我有一个片段，我想在其中使用折叠工具栏布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@android:color/transparent"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:contentDescription="@string/app_name"
                android:src="@drawable/festival"
                app:layout_collapseMode="parallax"/>

             <include layout="@+id/custom_layout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />

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

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

    <android.support.v4.widget.NestedScrollView 
      //...custom view /> ...

当collapsing_toolbar展开时，我希望显示图像，当折叠时，我希望只有@id/custom_layout。custom_layout是一个带有文本视图和图像视图的相对布局。

我想要有完全相同的行为，就像我有以下行为一样：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_collapseMode="pin" />

而不是自定义布局。

为什么这是不工作？即使折叠ToobarLayout扩展我看到的ImageView和自定义布局。

！！注意我确实有一个定义了工具栏的活动。我不想碰这部分代码。当我向上滚动片段时，我希望@id/custom_layout在活动中定义的现有工具栏下面对齐。

我在片段中添加了以下onViewCreated（）方法：

RelativeLayout headerLayout = view.findViewById(R.id.custom_layout);
AppBarLayout mAppBarLayout = view.findViewById(R.id.app_bar_layout);

 mAppBarLayout.addOnOffsetChangedListener(new 
 AppBarLayout.OnOffsetChangedListener() {

                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                    if (verticalOffset == 0) {
                     //fully expanded
                     headerLayout.setVisibility(View.GONE)
                    } else  {
                        //fully collapsed
                       headerLayout.setVisibility(View.Visible);

                     //ISSUE HERE!!!: Only when ImageView has height = 0, the headerLayout pops up. 
                    //!!The transition is not smoothly. 
                    // I would like the headerLayout to be visible when the ImageView height reaches the headerLayout height.
                    }
                }
            });

Answer 1

当折叠工具栏折叠时，您可以隐藏ImageView，并在展开时再次显示。在您的活动类中，使用onOffsetChangedListener：

AppBarLayout appBarLayout = (AppBarLayout) view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                // If collapsed, then do this
                imageViewHeaderImage.setVisibility(View.GONE);
            } else if (verticalOffset == 0) {
                // If expanded, then do this
                imageViewHeaderImage.setVisibility(View.VISIBLE);
            } 

        }
    }););

Answer 2

你可以按程序来做。在活动中，在OnCreate（）方法中添加此侦听器

ImageView headerImage = view.findViewById(R.id.header_image);
AppBarLayout mAppBarLayout = view.findViewById(R.id.app_bar_layout);
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            boolean isShow = false;
            int scrollRange = -1;

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (scrollRange == -1) {
                    scrollRange = appBarLayout.getTotalScrollRange();
                }
                if (scrollRange + verticalOffset == 0) {
                    isShow = true;
                    headerImage.setVisibility(View.VISIBLE);
                } else if (isShow) {
                    isShow = false;
                    headerImage.setVisibility(View.GONE);
                }
            }
        });

编辑为什么你不能得到与实际工具栏相同的效果

docs statecollazingtoolbarlayout是工具栏的包装器，它实现了一个折叠的应用程序栏。它被设计成一个AppBarLayout的直接子级。所以它被谷歌设计成与工具栏一起使用。您可以创建一些简单的变通方法来使用自定义布局