CollapsingToolbarLayout 表现不佳

Question

我在实现 collapsingtoolbarLayout 的正确行为时遇到问题。我在Whosebug上研究了很多其他用户提供的解决方案，但是到现在都没能解决。

这是未折叠时的视图：

这是折叠时的视图：

现在我希望在折叠时实现的视图。奇怪的是，在用户点击 FABedit 并向下滚动后，达到了预期的结果：

清单：

<activity
        android:name=".GDriveActivities.DeleteActivity"
        android:theme="@style/AppTheme.NoActionBar" />

Style.xlm:

    <style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    <item name="android:statusBarColor">@null</item>
</style>

在 activity_detail.xml 中，我尝试过使用和不使用 FrameLayout。没有frame布局，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:transitionName="tMainHolder">

<android.support.design.widget.AppBarLayout
    android:id="@+id/main.appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/activity_background"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/header.collapsing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        android:background="@android:color/white"
        app:contentScrim="?attr/colorPrimary">

        <FrameLayout
            android:id="@+id/main.framelayout.title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:orientation="vertical"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0">

            <include layout="@layout/activity_detail_project_detail"/>
            <include layout="@layout/activity_detail_editable_fields"/>

        </FrameLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/main.toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:popupTheme="@style/AppTheme.PopupOverlay"
            android:titleTextColor="@color/white"
            app:title=""/>

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/activity_background"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/article_collection"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:requiresFadingEdge="vertical" />


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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_mode_edit_black_24dp"
    android:tint="@android:color/white"
    app:layout_anchor="@id/main.appbar"
    app:layout_anchorGravity="bottom|right|end"
    app:backgroundTint="@color/colorPrimary"
    app:elevation="4dp" />


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

DetailActivity.java:

mAppBarLayout.addOnOffsetChangedListener(this);
...
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    int maxScroll = appBarLayout.getTotalScrollRange();
    float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll;

    handleAlphaOnTitle(percentage);
    handleToolbarTitleVisibility(percentage);

}

private void handleToolbarTitleVisibility(float percentage) {
    if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {

        if(!mIsTheTitleVisible) {
            collapsingToolbarLayout.setTitle(mProject.getpName()+ ":Article Collection");
            mIsTheTitleVisible = true;
        }

    } else {

        if (mIsTheTitleVisible) {
            collapsingToolbarLayout.setTitle("");
            mIsTheTitleVisible = false;
        }
    }
}

private void handleAlphaOnTitle(float percentage) {
    if (percentage >= PERCENTAGE_TO_HIDE_TITLE_DETAILS) {
        if(mIsTheTitleContainerVisible) {
            mIsTheTitleContainerVisible = false;
        }

    } else {

        if (!mIsTheTitleContainerVisible) {
            mIsTheTitleContainerVisible = true;
        }
    }
}

我也尝试过类似建议的解决方案 and here。

知道我做错了什么吗？如果您还需要我在 activity_detail.xml 中包含的布局，请告诉我，我会包含它。

提前感谢您的宝贵时间。我将不胜感激任何帮助。我完全被屏蔽了。

Answer 1

只需将 app:layout_collapseMode="pin" 放入您的应用栏这是很好的例子，只需复制所有 xml 个文件 http://saulmm.github.io/mastering-coordinator

此处代码 - https://github.com/saulmm/CoordinatorExamples

或者你也可以为你的操作栏使用 ancher

 <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/ioexample.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ioexample.collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/ioexample.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/material_flat"
                app:layout_collapseMode="parallax"
                tools:ignore="ContentDescription"
                />
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="56dp"
            android:textSize="20sp"
            android:lineSpacingExtra="8dp"
            android:text="@string/lorem"
            android:padding="@dimen/activity_horizontal_margin"
            />
    </android.support.v4.widget.NestedScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/ioexample.toolbar"
        android:layout_width="match_parent"
        android:layout_height="112dp"
        android:background="@color/brand_primary"
        android:elevation="4dp"
        app:layout_collapseMode="pin"
        app:layout_anchor="@id/ioexample.appbar"
        app:layout_anchorGravity="bottom"
        app:theme="@style/ThemeOverlay.AppCompat.Light"
        style="@style/ToolBarWithNavigationBack">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="8dp"
            android:minHeight="?android:attr/actionBarSize"
            android:orientation="vertical"
            >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
                android:text="@string/example_title"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse"
                android:text="@string/example_subtitle"
                />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout 表现不佳

CollapsingToolbarLayout is not behaving well

android

android-collapsingtoolbarlayout