Question

我有一个片段，我想使用CollapsingToolbarLayout

<?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是具有textview和imageview的相对布局。

我想要有完全相同的行为，就好像我有以下内容：

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

而不是自定义布局。

为什么这不起作用？即使展开了CollapsingToobarLayout，我也会看到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

您可以以编程方式执行此操作。在您的活动中，在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);
                }
            }
        });

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

文档状态CollapsingToolbarLayout是工具栏的包装器，它实现了折叠应用栏。它旨在用作AppBarLayout的直接子项。所以它被设计为与Google的工具栏一起使用。您可以简单地创建某种变通方法来使用自定义布局

Answer 2

当imageView 崩溃时，隐藏 collapsingToolbar， 再次隐藏 >扩展即可。在您的活动类中，使用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); } } }););

仅包含自定义视图（布局）的CollapsingToolbarLayout

2 个答案: