如何在 CollapsingToolbarLayout 中使用带工具栏的 TabLayout？
How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
我正在查看 chrisbanes/cheesesquare，我正在尝试将带有工具栏的 TabLayout 放在 CollapsingToolbarLayout 中，这是我的代码
<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:fitsSystemWindows="true">
<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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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="match_parent"
android:background="@color/primary_dark"
android:minHeight="150dip"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="60dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="110dip"
android:layout_gravity="top"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
打开 CollapsingToolbar 时会显示类似这样的内容，这正是我要找的内容：
但是当我折叠它（通过向上拉图像）时，我得到了这样的东西
这是因为如果我保留选项卡和工具栏标题重叠的默认设置，我将工具栏的高度设置为 110dip。所以我正在寻找正确的方法来做到这一点，以便工具栏的标题在 appbar 上得到正确的位置，tablayout 在它下面。有什么办法可以实现吗？
尝试将 Toolbar 放在 CollapsingToolbar 里面 app:layout_collapseMode="pin"，TabLayout 放在外面 app:layout_scrollFlags="enterAlways"
这是我设法做到这一点的方法，我认为这不是最好的解决方案，但如果有人找到更好的方法，请随时 post 回答。
<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:fitsSystemWindows="true">
<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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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="206dip"
android:background="@color/primary_dark"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dip"
app:tabGravity="center"
app:tabMode="scrollable"
android:gravity="bottom"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
事实证明，由于 AppBarLayout 扩展了 LinearLayout，因此您可以在其中包含两个 CollapsingToolBarLayout（扩展了 FrameLayout）。我所做的是让第一个 CollapsingToolBarLayout 容纳我想要消失的内容，并给它 AppBarLayout 标志：
应用程序：layout_scrollFlags="scroll|exitUntilCollapsed"
对于第二个实际具有选项卡的 CollapsingToolbarLayout，我将其滚动标志设置为：
应用程序：layout_scrollFlags="scroll|enterAlways"
最后的 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"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
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="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="@dimen/quadruple_margin"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="@+id/header_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:background="@color/black_40">
<!-- YOUR CONTENT HERE -->
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/action_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/abc_action_bar_default_height_material"
app:contentInsetLeft="@dimen/triple_margin"
app:contentInsetStart="@dimen/triple_margin"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.NoActionBar"
app:theme="@style/Theme.AppCompat.NoActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:layout_marginTop="@dimen/half_margin"
app:layout_scrollFlags="enterAlways"
app:tabBackground="@color/transparent"
app:tabGravity="center"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/grey_400" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
下面的代码实现了展开/折叠工具栏的操作。
基本上我们会有一个
CoordinatorLayout（框架布局）
AppBarLayout (vertical LinearLayout 实现了stuff designs的很多特性),
CollapsingToolbarLayout（工具栏的包装）
ImageView 和工具栏
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/logo"
android:minHeight="300dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dip"
app:tabGravity="center"
app:tabMode="scrollable"
android:gravity="bottom"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/fr_container_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Observation
- FrameLayout is necessary app: layout_behavior = "@string/appbar_scrolling_view_behavior"
-TOOLBAR Not need backgroud, insert the color in the attribute app:contentScrim = "?Attr/ColorPrimary" from our CollapsingToolbarLayout
在你的class
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);
我将 TabLayout 放在 AppBarLayout 之外，并将 ViewPager 和 TabLayout 一起包装在 LinearLayout 中。
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="210dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="@color/profile_header_bg_color"
android:fitsSystemWindows="true">
<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:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
android:background="@color/profile_header_bg_color">
<ImageView
android:layout_width="match_parent"
android:paddingTop="60dp"
android:layout_height="210dp"
android:background="@color/profile_header_bg_color"
android:id="@+id/user_details"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Light"
android:background="@color/profile_header_bg_color"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="fill_parent" />
</LinearLayout>
这是我的想法。
我把tab布局放在AppBar外面，用垂直LinearLayout包裹起来，然后这样设置位置
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabDetail"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>
如果你不把 TabLayout 换成另一个两倍高的 Layout。当你设置layout_anchor为AppBar时，只有一半的TabLayout在AppBar中。
这是我的整个 XML 文件。
<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:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="@+id/viewpagerDetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginBottom="54dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabDetail"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>
我不确定这组 dp 值是否适合您的屏幕尺寸，但它适合我的。如果有人有更好的答案，请分享。
抱歉，如果我的代码或我的 english.Thank 你有误！！
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize" >
<include layout="@layout/YOUR-CONTENT-LAYOUT" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="false"
app:contentScrim="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:orientation="vertical" >
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_scrollFlags="scroll"
android:background="@color/primary_color" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
我可以通过将 TabLayout 放在第二个 CollapsingToolbarLayout 内并将滚动标志设置为进入 Always Collapsed 来实现此功能。
<android.support.design.widget.AppBarLayout
android:id="@+id/event_guide_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/event_guide_collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="80dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/event_guide_banner_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/darkened_placeholder"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/event_guide_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.design.widget.TabLayout
android:id="@+id/event_guide_tabbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/BaseTheme"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/event_guide_swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/light_gray"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.meetball.activity.EventGuideActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/event_guide_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.v4.widget.SwipeRefreshLayout>
<?xml version="1.0" encoding="utf-8"?>
<ui.screen.ProfileView
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.support.design.widget.CoordinatorLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/profile_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="@+id/profile_appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:elevation="2dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="@android:color/transparent"
app:elevation="2dp">
<LinearLayout
android:id="@+id/profile_user_layout"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="?attr/colorPrimary"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="24dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:paddingTop="64dp"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:orientation="horizontal">
<FrameLayout
android:layout_width="96dp"
android:layout_height="96dp"
android:clipChildren="false">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profile_user_photo"
android:layout_width="86dp"
android:layout_height="86dp"
android:src="@mipmap/ic_launcher"
app:border_width="1dp"
app:border_color="@color/white" />
<View
android:id="@+id/profile_user_medal"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="@drawable/medal"
android:layout_marginRight="6dp"
android:layout_marginTop="2dp"
android:layout_gravity="top|right" />
</FrameLayout>
<LinearLayout
android:id="@+id/profile_user_details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="16dp">
<TextView
android:id="@+id/profile_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="KateÅ™ina BÃla"
android:textColor="@color/white"
android:textSize="24sp" />
<TextView
android:id="@+id/profile_user_completed_activities"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dokoncene 4 z 5"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/profile_user_progress_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="@color/white"
android:text="50%" />
<com.rey.material.widget.ProgressView
android:id="@+id/profile_user_progress_bar"
android:layout_width="match_parent"
android:layout_height="6dp"
android:visibility="visible"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:paddingRight="16dp"
app:pv_progressMode="determinate"
app:pv_circular="false"
app:pv_autostart="true"
app:lpd_strokeSize="3dp"
app:lpd_strokeColor="@color/red"
app:lpd_strokeSecondaryColor="@color/white"
app:lpd_maxLineWidth="62dp"
app:lpd_minLineWidth="31dp"
app:pv_progressStyle="@style/ProfileTotalProgressBar"
app:pv_progress="0.5" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<include layout="@layout/toolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="48dp"
app:elevation="2dp">
<android.support.design.widget.TabLayout
android:id="@+id/profile_tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
app:tabTextColor="@color/white_87"
app:tabGravity="fill"
app:tabIndicatorColor="@color/white"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/white"
app:tabTextAppearance="@style/TabTextAppearance"
app:elevation="2dp" />
</FrameLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</ui.screen.ProfileView>
这对我有用，但只适用于 api 19+
的设备
使用新的 material 带有源代码的设计支持库示例
折叠带有选项卡的工具栏
我使用了新 material 设计支持库的官方折叠工具栏功能。
此处折叠视图高度为 256dp，标签高度为 56dp
我做了以下路径，我将图像分成两部分，一部分用于折叠视图，一部分用于选项卡。
我根据 dp to pixel 尺寸使用高分辨率 drawable xxxhdpi 裁剪图像并放入 drawable 文件夹，这样它就可以适应所有屏幕尺寸
我有 2000x1246 图片
顶部图像 256dp= 2000x1024 像素
底部标签图像 56dp= 2000x224 像素
这是 source code
的完整示例
正如之前有人指出的那样，这看起来是因为（来自文档）：
The navigation button is vertically aligned within the Toolbar's
minimum height, if set.
因此，根据初始布局，您可以这样做：
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/primary_dark"
android:minHeight="150dip"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="60dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_height="?actionBarSize"
android:layout_gravity="bottom"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="110dip"
android:layout_gravity="top"
app:titleMarginTop="13dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
其中 app:titleMarginTop 是工具栏大小减去 TabLayout 大小减去文本大小所需的间距，它应该很好地对齐。
我创建了这个 sample 项目，我在 CollapsingToolbarLayout 中使用 TabLayout
测试于 API 14-23。工作没有任何问题。
经过整整 2 天的努力寻找一个纯粹的 Android 解决方案，这就是我的解决方案。
目标：工具栏下的选项卡，两个视图后面都有图像背景
（TL；DR：见附件XML）
我想要实现的行为是让 CollapsingToolbarLayout 和 TabLayout 位于图像顶部，当 "header" 向上滚动（超出屏幕) 然后显示 ActionBar（工具栏）及其下方的 TabLayout。
问题：
由于 CollapsingToolbarLayout 在折叠时将隐藏除 Toolbar 视图之外的所有子视图，因此 TabLayout 必须放在 CollapsingToolbarLayout 之外，但在 AppBarLayout 之内，这样它就在 "docked" 屏幕顶部和下方工具栏。现在的问题是 ImageView 放在 CollapsingToolbarLayout 里面，不会在 TabLayout 之下，而是在它上面垂直。
解决方法：
为了解决这个问题，我们需要使 ImageView 更高，这样如果我们将 TabLayout 放在 CollapsingToolbarLayout 中，它将覆盖它。但是因为我们将 TabLayout 放置在 CollapsingToolbarLayout 之外，所以我们需要确保 ImageView 绘制均匀如果其父视图 (CollapsingToolbarLayout) 较短。 clipChildren="false" 救援！ clipChildren 告诉 ViewGroup 如果它们的子视图大于它的大小，则不要裁剪它们，所以基本上现在我们可以使 ImageView 更高并且它仍将绘制在 TabLayout 下。这样我们就可以在漂亮的图像上方同时拥有 CollapsingToolbarLayout 和 TabLayout！
我的布局xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false" /////IMPORTANT!!!!!!
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipChildren="false" /////IMPORTANT!!!!!!
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/poster"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="@color/PrimaryColor"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_material"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabsInLogin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorHeight="2dp"
app:tabIndicatorColor="@android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpagerDetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Java代码
collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapse_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(cheeseName);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
我遇到了类似的问题，我的解决方案非常简单。我所要做的就是将工具栏设置为支持操作栏（我使用的是 Theme.NoActionBar 样式基础）
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
我找到了一个简单的解决方案，使其适用于透明 TabLayout 背景：
- 在
CollapsingToolbarLayout 中使用 expandedTitleMarginBottom 以避免扩展标题重叠 TabLayout
- 将
layout_height设置为TabLayout作为常数值
- 将
layout_marginBottom 添加到 Toolbar 与 TabLayout layout_height 相同的值
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginBottom="70dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<YourMagicViewWithBackgroundImageTextAndOtherStuff
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
以上所有代码仅折叠 "CollapsingtoolbarLayout" 个组件。这意味着如果我们滚动 "ViewPager" 内容的页面，它不起作用。
我用 "FrameLayout" 替换了 "ViewPager" 现在它可以正常工作了，正如我们所期望的那样。
我希望，如果滚动 Viewpager 的页面，那么 "CollapsingToolbarLayout" 应该可以收听。为此，我使用了 "NestedScrollView"。但问题是 "ViewPager" 在 "NestedScrollView" 中不起作用。
所以终于用FrameLayout实现了。
But problem is "tabLayout.setOnTabSelectedListener(new
TabLayout.OnTabSelectedListener() {" is depricated
<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.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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:visibility="gone"
android:src="@drawable/srl_mallikaarjuna_lrg"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:text="Calendar"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
>
</android.support.design.widget.TabLayout>
</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="#fefefe"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/frame_container">
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
在没有 ViewPager 的情况下创建 Tablayout：http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager
工具栏> 将底部边距设置为 48dp，将 layout_height 设置为 ?attr/actionBarSize
<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:fitsSystemWindows="true">
<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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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="match_parent"
android:background="@color/primary_dark"
android:minHeight="150dip"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="60dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="38dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
我正在查看 chrisbanes/cheesesquare，我正在尝试将带有工具栏的 TabLayout 放在 CollapsingToolbarLayout 中，这是我的代码
<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:fitsSystemWindows="true">
<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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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="match_parent"
android:background="@color/primary_dark"
android:minHeight="150dip"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="60dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="110dip"
android:layout_gravity="top"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
打开 CollapsingToolbar 时会显示类似这样的内容，这正是我要找的内容：
但是当我折叠它（通过向上拉图像）时，我得到了这样的东西
这是因为如果我保留选项卡和工具栏标题重叠的默认设置，我将工具栏的高度设置为 110dip。所以我正在寻找正确的方法来做到这一点，以便工具栏的标题在 appbar 上得到正确的位置，tablayout 在它下面。有什么办法可以实现吗？
尝试将 Toolbar 放在 CollapsingToolbar 里面 app:layout_collapseMode="pin"，TabLayout 放在外面 app:layout_scrollFlags="enterAlways"
这是我设法做到这一点的方法，我认为这不是最好的解决方案，但如果有人找到更好的方法，请随时 post 回答。
<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:fitsSystemWindows="true">
<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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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="206dip"
android:background="@color/primary_dark"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dip"
app:tabGravity="center"
app:tabMode="scrollable"
android:gravity="bottom"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
事实证明，由于 AppBarLayout 扩展了 LinearLayout，因此您可以在其中包含两个 CollapsingToolBarLayout（扩展了 FrameLayout）。我所做的是让第一个 CollapsingToolBarLayout 容纳我想要消失的内容，并给它 AppBarLayout 标志：
应用程序：layout_scrollFlags="scroll|exitUntilCollapsed"
对于第二个实际具有选项卡的 CollapsingToolbarLayout，我将其滚动标志设置为：
应用程序：layout_scrollFlags="scroll|enterAlways"
最后的 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"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
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="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="@dimen/quadruple_margin"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="@+id/header_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:background="@color/black_40">
<!-- YOUR CONTENT HERE -->
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/action_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/abc_action_bar_default_height_material"
app:contentInsetLeft="@dimen/triple_margin"
app:contentInsetStart="@dimen/triple_margin"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.NoActionBar"
app:theme="@style/Theme.AppCompat.NoActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:layout_marginTop="@dimen/half_margin"
app:layout_scrollFlags="enterAlways"
app:tabBackground="@color/transparent"
app:tabGravity="center"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/grey_400" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
下面的代码实现了展开/折叠工具栏的操作。
基本上我们会有一个
CoordinatorLayout（框架布局）
AppBarLayout (vertical LinearLayout 实现了stuff designs的很多特性),
CollapsingToolbarLayout（工具栏的包装）
ImageView 和工具栏
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/logo"
android:minHeight="300dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dip"
app:tabGravity="center"
app:tabMode="scrollable"
android:gravity="bottom"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/fr_container_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Observation
- FrameLayout is necessary app: layout_behavior = "@string/appbar_scrolling_view_behavior"
-TOOLBAR Not need backgroud, insert the color in the attribute app:contentScrim = "?Attr/ColorPrimary" from our CollapsingToolbarLayout
在你的class
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);
我将 TabLayout 放在 AppBarLayout 之外，并将 ViewPager 和 TabLayout 一起包装在 LinearLayout 中。
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="210dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="@color/profile_header_bg_color"
android:fitsSystemWindows="true">
<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:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
android:background="@color/profile_header_bg_color">
<ImageView
android:layout_width="match_parent"
android:paddingTop="60dp"
android:layout_height="210dp"
android:background="@color/profile_header_bg_color"
android:id="@+id/user_details"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Light"
android:background="@color/profile_header_bg_color"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="fill_parent" />
</LinearLayout>
这是我的想法。
我把tab布局放在AppBar外面，用垂直LinearLayout包裹起来，然后这样设置位置
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabDetail"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>
如果你不把 TabLayout 换成另一个两倍高的 Layout。当你设置layout_anchor为AppBar时，只有一半的TabLayout在AppBar中。
这是我的整个 XML 文件。
<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:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="@+id/viewpagerDetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginBottom="54dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabDetail"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>
我不确定这组 dp 值是否适合您的屏幕尺寸，但它适合我的。如果有人有更好的答案，请分享。
抱歉，如果我的代码或我的 english.Thank 你有误！！
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize" >
<include layout="@layout/YOUR-CONTENT-LAYOUT" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="false"
app:contentScrim="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:orientation="vertical" >
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_scrollFlags="scroll"
android:background="@color/primary_color" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
我可以通过将 TabLayout 放在第二个 CollapsingToolbarLayout 内并将滚动标志设置为进入 Always Collapsed 来实现此功能。
<android.support.design.widget.AppBarLayout
android:id="@+id/event_guide_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/event_guide_collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="80dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/event_guide_banner_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/darkened_placeholder"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/event_guide_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.design.widget.TabLayout
android:id="@+id/event_guide_tabbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/BaseTheme"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/event_guide_swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/light_gray"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.meetball.activity.EventGuideActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/event_guide_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.v4.widget.SwipeRefreshLayout>
<?xml version="1.0" encoding="utf-8"?>
<ui.screen.ProfileView
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.support.design.widget.CoordinatorLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/profile_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="@+id/profile_appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:elevation="2dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="@android:color/transparent"
app:elevation="2dp">
<LinearLayout
android:id="@+id/profile_user_layout"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="?attr/colorPrimary"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="24dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:paddingTop="64dp"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:orientation="horizontal">
<FrameLayout
android:layout_width="96dp"
android:layout_height="96dp"
android:clipChildren="false">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profile_user_photo"
android:layout_width="86dp"
android:layout_height="86dp"
android:src="@mipmap/ic_launcher"
app:border_width="1dp"
app:border_color="@color/white" />
<View
android:id="@+id/profile_user_medal"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="@drawable/medal"
android:layout_marginRight="6dp"
android:layout_marginTop="2dp"
android:layout_gravity="top|right" />
</FrameLayout>
<LinearLayout
android:id="@+id/profile_user_details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="16dp">
<TextView
android:id="@+id/profile_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="KateÅ™ina BÃla"
android:textColor="@color/white"
android:textSize="24sp" />
<TextView
android:id="@+id/profile_user_completed_activities"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dokoncene 4 z 5"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/profile_user_progress_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="@color/white"
android:text="50%" />
<com.rey.material.widget.ProgressView
android:id="@+id/profile_user_progress_bar"
android:layout_width="match_parent"
android:layout_height="6dp"
android:visibility="visible"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:paddingRight="16dp"
app:pv_progressMode="determinate"
app:pv_circular="false"
app:pv_autostart="true"
app:lpd_strokeSize="3dp"
app:lpd_strokeColor="@color/red"
app:lpd_strokeSecondaryColor="@color/white"
app:lpd_maxLineWidth="62dp"
app:lpd_minLineWidth="31dp"
app:pv_progressStyle="@style/ProfileTotalProgressBar"
app:pv_progress="0.5" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<include layout="@layout/toolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="48dp"
app:elevation="2dp">
<android.support.design.widget.TabLayout
android:id="@+id/profile_tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
app:tabTextColor="@color/white_87"
app:tabGravity="fill"
app:tabIndicatorColor="@color/white"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/white"
app:tabTextAppearance="@style/TabTextAppearance"
app:elevation="2dp" />
</FrameLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</ui.screen.ProfileView>
这对我有用，但只适用于 api 19+
的设备使用新的 material 带有源代码的设计支持库示例
折叠带有选项卡的工具栏我使用了新 material 设计支持库的官方折叠工具栏功能。
此处折叠视图高度为 256dp，标签高度为 56dp
我做了以下路径，我将图像分成两部分，一部分用于折叠视图，一部分用于选项卡。
我根据 dp to pixel 尺寸使用高分辨率 drawable xxxhdpi 裁剪图像并放入 drawable 文件夹，这样它就可以适应所有屏幕尺寸
我有 2000x1246 图片
顶部图像 256dp= 2000x1024 像素
底部标签图像 56dp= 2000x224 像素
这是 source code
的完整示例正如之前有人指出的那样，这看起来是因为（来自文档）：
The navigation button is vertically aligned within the Toolbar's minimum height, if set.
因此，根据初始布局，您可以这样做：
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/primary_dark"
android:minHeight="150dip"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="60dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_height="?actionBarSize"
android:layout_gravity="bottom"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="110dip"
android:layout_gravity="top"
app:titleMarginTop="13dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
其中 app:titleMarginTop 是工具栏大小减去 TabLayout 大小减去文本大小所需的间距，它应该很好地对齐。
我创建了这个 sample 项目，我在 CollapsingToolbarLayout 中使用 TabLayout
测试于 API 14-23。工作没有任何问题。
经过整整 2 天的努力寻找一个纯粹的 Android 解决方案，这就是我的解决方案。
目标：工具栏下的选项卡，两个视图后面都有图像背景
（TL；DR：见附件XML）
我想要实现的行为是让 CollapsingToolbarLayout 和 TabLayout 位于图像顶部，当 "header" 向上滚动（超出屏幕) 然后显示 ActionBar（工具栏）及其下方的 TabLayout。
问题：
由于 CollapsingToolbarLayout 在折叠时将隐藏除 Toolbar 视图之外的所有子视图，因此 TabLayout 必须放在 CollapsingToolbarLayout 之外，但在 AppBarLayout 之内，这样它就在 "docked" 屏幕顶部和下方工具栏。现在的问题是 ImageView 放在 CollapsingToolbarLayout 里面，不会在 TabLayout 之下，而是在它上面垂直。
解决方法：
为了解决这个问题，我们需要使 ImageView 更高，这样如果我们将 TabLayout 放在 CollapsingToolbarLayout 中，它将覆盖它。但是因为我们将 TabLayout 放置在 CollapsingToolbarLayout 之外，所以我们需要确保 ImageView 绘制均匀如果其父视图 (CollapsingToolbarLayout) 较短。 clipChildren="false" 救援！ clipChildren 告诉 ViewGroup 如果它们的子视图大于它的大小，则不要裁剪它们，所以基本上现在我们可以使 ImageView 更高并且它仍将绘制在 TabLayout 下。这样我们就可以在漂亮的图像上方同时拥有 CollapsingToolbarLayout 和 TabLayout！
我的布局xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false" /////IMPORTANT!!!!!!
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipChildren="false" /////IMPORTANT!!!!!!
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/poster"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="@color/PrimaryColor"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_material"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabsInLogin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorHeight="2dp"
app:tabIndicatorColor="@android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpagerDetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Java代码
collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapse_toolbar);
collapsingToolbarLayout.setTitleEnabled(false);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(cheeseName);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
我遇到了类似的问题，我的解决方案非常简单。我所要做的就是将工具栏设置为支持操作栏（我使用的是 Theme.NoActionBar 样式基础）
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
我找到了一个简单的解决方案，使其适用于透明 TabLayout 背景：
- 在
CollapsingToolbarLayout中使用expandedTitleMarginBottom以避免扩展标题重叠TabLayout - 将
layout_height设置为TabLayout作为常数值 - 将
layout_marginBottom添加到Toolbar与TabLayoutlayout_height 相同的值
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginBottom="70dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<YourMagicViewWithBackgroundImageTextAndOtherStuff
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
以上所有代码仅折叠 "CollapsingtoolbarLayout" 个组件。这意味着如果我们滚动 "ViewPager" 内容的页面，它不起作用。
我用 "FrameLayout" 替换了 "ViewPager" 现在它可以正常工作了，正如我们所期望的那样。
我希望，如果滚动 Viewpager 的页面，那么 "CollapsingToolbarLayout" 应该可以收听。为此，我使用了 "NestedScrollView"。但问题是 "ViewPager" 在 "NestedScrollView" 中不起作用。
所以终于用FrameLayout实现了。
But problem is "tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {" is depricated
<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.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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:visibility="gone"
android:src="@drawable/srl_mallikaarjuna_lrg"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:text="Calendar"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
>
</android.support.design.widget.TabLayout>
</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="#fefefe"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/frame_container">
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
在没有 ViewPager 的情况下创建 Tablayout：http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager
工具栏> 将底部边距设置为 48dp，将 layout_height 设置为 ?attr/actionBarSize
<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:fitsSystemWindows="true">
<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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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="match_parent"
android:background="@color/primary_dark"
android:minHeight="150dip"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="60dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="38dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>