如何在CollapsingToolbarLayout中使用带有工具栏的TabLayout？

我正在看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在它下面。 有什么办法可以实现吗？

Answer 1

这是我设法做到这一点的方式，我不认为这是最好的解决scheme，但如果有人find更好的方法，请随时发布答案。

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

Answer 2

经过2天的努力，find一个纯粹的Android解决scheme，这里是我的解决scheme。

目标：在两个视图后面的图像背景下的工具栏下的标签

（TL; DR：请参阅XML附件）

我想要实现的行为是将CollapsingToolbarLayout和TabLayout放在图像顶部，当“标题”向上滚动（不在屏幕上）时，然后使用其下的TabLayout显示ActionBar （工具栏）。

问题：

由于CollapsingToolbarLayout在隐藏除了工具栏视图之外的所有子视图时， TabLayout必须放置在CollapsingToolbarLayout之外，但位于AppBarLayout内部，因此它被“停靠”在屏幕顶部和工具栏下 。 现在的问题是放置在CollapsingToolbarLayout内的ImageView不会在TabLayout下方，而是在垂直方向上方。

解决scheme：

为了解决这个问题，我们需要使ImageView更高，这样如果我们将TabLayout放置在CollapsingToolbarLayout中 ，它将覆盖它。 但是因为我们把TabLayout放在了CollapsingToolbarLayout之外，所以我们需要确保即使它的父视图（ CollapsingToolbarLayout ）更短，也能绘制ImageView 。 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" /> 

Answer 3

事实certificate，由于AppBarLayout扩展了LinearLayout，因此可以在其中包含两个CollapsingToolBarLayout（扩展FrameLayout）。 我做的是第一个CollapsingToolBarLayout房子我想消失的内容，并给了它的AppBarLayout标志：

应用：layout_scrollFlags = “滚动| exitUntilCollapsed”

对于实际上具有选项卡的第二个CollapsingToolbarLayout，我将其滚动标志设置为：

应用：layout_scrollFlags = “滚动| 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> 

Answer 4

我已经创build了这个示例项目，在CollapsingToolbarLayout中使用TabLayout

testingAPI 14-23。 工作没有任何问题。

Answer 5

我发现一个简单的解决scheme，使其与透明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> 

Answer 6

使用带有源代码的新材料devise支持库示例的选项卡折叠工具栏

我使用了新的材料devise支持库的官方折叠工具栏function。

这里折叠的视图高度是256dp，标签的高度是56dp

我做了下面的path，我将图像剪切成两个部分，一个用于折叠视图，一个用于制表符。

我根据dp切割图像像素大小与高分辨率可绘制xxxhdpi并放入可绘制的文件夹，所以它可以调整到所有屏幕尺寸

我有2000×1246的图像

顶部图像256dp = 2000×1024像素

底部标签图像56dp = 2000×224像素

以下是源代码的完整示例

Answer 7

使用此代码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); 

Answer 8

这是我的想法。

我把选项卡布局放在AppBar的外面，用垂直的线性布局来包装它，并且像这样设置位置

 <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_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值是否适合您的屏幕尺寸，但是它与我的屏幕尺寸相符。 如果有人有更好的答案，请分享。

对不起，如果我犯我的代码或我的英语错误。谢谢！

Answer 9

我有一个类似的问题，我的解决scheme是荒谬的简单。 我所要做的就是设置工具栏作为支持的操作栏（我使用的是Theme.NoActionBar风格的基础）

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); 

Answer 10

下面的代码实现了Expand / Collapse工具栏。

基本上我们会有一个
CoordinatorLayout （FrameLayout）
AppBarLayout （垂直LinearLayout实现了东西devise的许多function），
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); 

Answer 11

我将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> 

Answer 12

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

Answer 13

 <?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+的设备

Answer 14

正如有人指出，看起来这是因为（从文档）：

如果设置，导航button在工具栏的最小高度内垂直alignment。

因此，基于最初的布局，你可以做这样的事情：

 <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大小减去文本大小所需的间距，它应该很好地alignment。

Answer 15

以上所有代码仅折叠“CollapsingtoolbarLayout”组件。 这意味着如果我们滚动“ViewPager”内容的页面，它不起作用。

我用“FrameLayout”replace“ViewPager”，现在它正在工作，我们期待什么。

我期待，如果滚动Viewpager的页面，然后“CollapsingToolbarLayout”应该听。 为此，我使用了“NestedScrollView”。 但问题是“ViewPager”不工作在“NestedScrollView”。

所以最后我用FrameLayout实现了。

但问题是“tabLayout.setOnTabSelectedListener（新的TabLayout.OnTabSelectedListener（）{”被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创buildTablayout： http : //www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager

Answer 16

我可以通过将TabLayout放置在第二个CollapsingToolbarLayout ，将滚动标志设置为始终折叠状态，从而实现了这一目标。

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

Answer 17

尝试将Toolbar放在CollapsingToolbar并使用app:layout_collapseMode="pin"和TabLayout外部的app:layout_scrollFlags="enterAlways"