折叠工具栏的问题

时间:2018-02-06 14:15:09

标签: android android-coordinatorlayout android-collapsingtoolbarlayout

我有一个问题#34;带有标题文字的工具栏"在CollapsingToolbarLayout中向上滚动时不要折叠。

我尝试过一些调整但是没有用。也许我的布局有问题。

以下是我想要实现的目标。

Trying to Achieve

但是当我滚动到顶部时,工具栏也会崩溃,并且tabBar也会向内滚动,并变得不可见。以下就是我现在所拥有的。

what i have now

这是我的布局代码

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <com.oxymob.oxygen.customviews.MemberView
            android:id="@+id/view_member"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="?actionBarSize"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:layout_collapseMode="pin">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                style="@style/AppTheme.ToolbarStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                app:theme="@style/AppTheme.ActionBarTheme" />

            <include
                layout="@layout/include_progress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom" />
        </FrameLayout>
    </android.support.design.widget.CollapsingToolbarLayout>

    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/detail_tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/colorPrimary"
        android:clipToPadding="false"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        app:stl_defaultTabTextColor="@android:color/white"
        app:stl_defaultTabTextHorizontalPadding="18dp"
        app:stl_dividerColor="@color/transparent"
        app:stl_dividerThickness="0dp"
        app:stl_indicatorColor="@color/black_20"
        app:stl_indicatorCornerRadius="18dp"
        app:stl_indicatorGravity="center"
        app:stl_indicatorInterpolation="smart"
        app:stl_indicatorThickness="36dp"
        app:stl_underlineColor="@color/transparent"
        app:stl_underlineThickness="0dp" />

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

<android.support.v4.view.ViewPager
    android:id="@+id/tabs_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

依赖关系

dependencies {
    cimplementation 'com.android.support:appcompat-v7:27.0.2'
implementation 'com.android.support:design:27.0.2'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation 'com.android.support:cardview-v7:27.0.2'
implementation 'com.android.support:recyclerview-v7:27.0.2'
implementation 'com.android.support:design:27.0.2'

}

1 个答案:

答案 0 :(得分:-1)

在您的xml中,您的父级必须是协调员布局,而AppBarLayout需要特定类型的主题

android:theme="@style/AppTheme.AppBarOverlay"

。我强烈建议您按照下一个教程来实现您所开展的行为。

https://www.coderefer.com/collapsing-toolbar-layout-android/