包含折叠工具栏

Question

我的应用中有一个折叠Toolbar。 我使用NavigationDrawer并在具有不同片段的项目之间切换，同时替换FrameLayout，并将工具栏留在应用中。

其中一个片段有一个标签布局 当我显示该片段时，它显示在Toolbar下方，工具栏阴影与其重叠 我希望它与工具栏位于同一级别，并且看起来和行为类似于AppBarLayout。 此外，我想在展开工具栏时使标签透明。

如何重新组织布局以便这样做？

这是我的Xml：

主Xml：

<android.support.v4.widget.DrawerLayout 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:layout_gravity="right"
    android:clickable="true"
    android:layoutDirection="rtl"
    android:fitsSystemWindows="true"
    android:id="@+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/mainCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="rtl"
    android:background="#EEEEEE"
    android:clickable="true">
    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/toolbar_layout">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:collapsedTitleGravity="right"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
            app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp">
            <ImageView
                android:id="@+id/headerImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/soldier" />
            <View
                android:layout_width="match_parent"
                android:layout_height="88dp"
                android:background="@drawable/scrim_top"
                app:layout_collapseMode="pin" />
            <View
                android:layout_width="match_parent"
                android:layout_height="88dp"
                android:layout_gravity="bottom"
                android:layout_alignBottom="@+id/headerImage"
                android:background="@drawable/scrim_bottom" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/WhiteTitle"
                app:layout_scrollFlags="scroll|enterAlways"
                app:titleTextColor="@color/White"
                android:fitsSystemWindows="true"
                android:layout_gravity="right"
                android:layoutDirection="rtl"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame"
        android:animateLayoutChanges="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fillViewport="true" />
    </FrameLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/mainFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_gravity="bottom|end"
        android:layout_marginLeft="16dp"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="5dp"
        android:elevation="8dp"
        app:pressedTranslationZ="12dp"
        app:backgroundTint="?android:colorAccent"
        android:src="@drawable/ic_perm_phone_msg_white_24px" />
    <LinearLayout
        android:id="@+id/miniFabFrame"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:layout_alignParentLeft="true"
        android:layout_gravity="bottom|end"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="80dp"
        android:padding="0dp">
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/messageFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:elevation="8dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            app:pressedTranslationZ="12dp"
            app:backgroundTint="?android:colorPrimary"
            app:fabSize="mini"
            android:src="@drawable/ic_textSMS_white_24px" />
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/callFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="5dp"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:elevation="8dp"
            app:pressedTranslationZ="12dp"
            app:backgroundTint="?android:colorPrimary"
            app:fabSize="mini"
            android:src="@drawable/ic_call_white_24px" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:id="@+id/nav_view"
    android:layoutDirection="rtl"
    app:headerLayout="@layout/header"
    app:menu="@menu/nav_menu" />

带标签布局的片段：

<LinearLayout 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:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/halachot_layout"
    android:layoutDirection="ltr"
    android:animateLayoutChanges="true">
  <android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:elevation="0dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <com.refractored.PagerSlidingTabStrip
        android:id="@+id/halachotTabs"
        android:layout_below="@id/halachot_layout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/transparent"
        android:fitsSystemWindows="true"
        pstsPaddingMiddle="false"
        app:pstsShouldExpand="true" />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
       android:id="@+id/halachotPager"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1" />
</LinearLayout>

任何指导将不胜感激。

感谢。

Answer 1

你应该做这样的结构

<?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: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="256dp"
        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"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:tabMode="scrollable"
                app:tabContentStart="72dp" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="parallax" />

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

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="8dp"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/tabs"
        app:layout_anchorGravity="center|left|start"
        app:fabSize="mini"
        app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior"
        app:borderWidth="0dp" />

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

取自here

另见this答案，但在那里解释得很清楚。

如果您想进一步解释，请阅读这些博客

http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library

http://blog.nkdroidsolutions.com/collapsing-toolbar-with-tabs-android-example

https://lab.getbase.com/nested-scrolling-with-coordinatorlayout-on-android/

Answer 2

  

当我显示该片段时，它显示在工具栏下方，工具栏阴影与其重叠。   我希望它与工具栏处于同一级别，并且看起来和行为类似于AppBarLayout。

为此提供与标签布局相同的高程，根据材料设计指南described here默认高程为4 dp。所以尝试给出标签布局高程

  

另外，我希望在扩展工具栏时使标签透明。

为此添加一个类似

的类

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

public enum State {
    EXPANDED,
    COLLAPSED,
    IDLE
}

private State mCurrentState = State.IDLE;

@Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
    if (i == 0) {
        if (mCurrentState != State.EXPANDED) {
            onStateChanged(appBarLayout, State.EXPANDED);
        }
        mCurrentState = State.EXPANDED;
    } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
        if (mCurrentState != State.COLLAPSED) {
            onStateChanged(appBarLayout, State.COLLAPSED);
        }
        mCurrentState = State.COLLAPSED;
    } else {
        if (mCurrentState != State.IDLE) {
            onStateChanged(appBarLayout, State.IDLE);
        }
        mCurrentState = State.IDLE;
    }
}

public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
 }

然后在您的活动中使用它

appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
    Log.d("STATE", state.name());

    //if state is expanded then set your tab layout background to transparent
  }
});

Answer 3

我有类似的问题。 我解决了删除ActionBar的elevation，同时显示带有不需要的阴影的片段。

我在Activity中添加了这两个方法：

public void setToolbarElevation(){
        if (Build.VERSION.SDK_INT >= 21){
            if (toolbar!=null) {
                toolbar.setElevation(getResources().getDimensionPixelSize(R.dimen.actionbar_elevation));
            }
        }
    }

public void removeToolbarElevation(){
        if (Build.VERSION.SDK_INT >= 21){
            if (toolbar!=null) {
                toolbar.setElevation(0);
            }
        }
    }

因此，当您使用选项卡调用片段时，您将调用活动中的removeToolbarElevation()，阴影将消失。

让我知道它是否适合你。

Answer 4

你已经完成了这个。正如我所说的Blog。

您需要的内容的组合意味着DrawerLayout + Fragments + CollapsingToolbarLayout的组合。

<强> activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

app_bar_main.xml

<?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"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

<强> content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">

    <FrameLayout
        android:id="@+id/content_main_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>

输出

Answer 5

感谢大家的所有意见 我最终做的是：

主Xml：

<android.support.v4.widget.DrawerLayout 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:layout_gravity="right"
android:clickable="true"
android:layoutDirection="rtl"
android:fitsSystemWindows="true"
android:id="@+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/mainCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="rtl"
    android:background="#EEEEEE"
    android:clickable="true">
    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/toolbar_layout">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:collapsedTitleGravity="right"
            app:expandedTitleGravity="bottom|right"
            app:expandedTitleMarginBottom="50dp"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
            app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp">

            <ImageView
                android:id="@+id/headerImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:background="@drawable/soldier" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:gravity="top"
                app:titleTextColor="@color/White"
                android:fitsSystemWindows="true"
                android:layout_gravity="right"
                android:layoutDirection="rtl"
                app:layout_collapseMode="pin"
                android:minHeight="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:titleMarginTop="15dp" />
        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:tabIndicatorHeight="3dp"
            android:layoutDirection="ltr"
            app:tabIndicatorColor="@android:color/white"
            app:tabSelectedTextColor="@color/White"
            app:tabTextColor="@color/Black"
            app:tabMode="fixed"
            app:tabGravity="fill" />
    </android.support.design.widget.AppBarLayout>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame"
        android:animateLayoutChanges="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fillViewport="true" />
    </FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:id="@+id/nav_view"
    android:layoutDirection="rtl"
    app:headerLayout="@layout/header"
    app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

然后，当我切换片段时，我只在我想要它们的片段上显示标签，并在我不希望它们显示时隐藏它们：

toolbar_layout.SetExpanded(true);
tabs.Visibility = ViewStates.Gone;

当我想向他们展示时：

toolbar_layout.SetExpanded(false,false);
tabs.Visibility = ViewStates.Visible;

虽然我没有让它们透明，但我决定在显示它们时折叠工具栏，并禁用使用标签在片段上展开它。
也许不是最好的解决方案，但它对我来说效果很好。

这些链接对我很有帮助：
- http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/
- http://blog.iamsuleiman.com/material-design-tabs-with-android-design-support-library/
- How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
- http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/
- Disable Scrolling in child Recyclerview android - 如何使用选项卡（还包含recyclerview）禁用扩展片段上的工具栏。

看看它在这里的样子： https://youtu.be/y2xLVSQ_NGM

这可能不是最好的解决方案，但我想要一种看起来不错的清洁方式 谢谢大家的帮助！