【问题标题】:How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?如何在 CollapsingToolbarLayout 中使用带有 Toolbar 的 TabLayout?
【发布时间】:2015-08-21 05:56:50
【问题描述】:

我正在查看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 在它下面。有没有办法做到这一点?

【问题讨论】:

  • 我不确定,因为我自己刚刚开始玩设计库,但TabLayout上不应该有app:layout_collapseMode="pin"吗?
  • @XaverKapeller 是的,我已经尝试过了,这是合乎逻辑的起点,但不是这样,也许他们还没有完全实现 pin/parallax 功能:/
  • 我还想尝试将TabLayout 放在AppBarLayout 中而不是CollapsingToolbarLayout 中。

标签: android material-design android-toolbar android-design-library


【解决方案1】:

经过整整 2 天的尝试,找到了一个纯 Android 解决方案,这就是我的解决方案。

目标:工具栏下的标签,两个视图后面都有图像背景

(TL;DR:见附件 XML)

我想要实现的行为是将 CollapsingToolbarLayout 和 TabLayout 放在图像顶部,当“标题”向上滚动(超出屏幕)然后显示 ActionBar(工具栏)及其下方的 TabLayout

问题:

由于 CollapsingToolbarLayout 将在折叠时隐藏所有子视图,除了 Toolbar 视图,因此 TabLayout 必须放置在 之外CollapsingToolbarLayout 但在 AppBarLayout 内,因此它“停靠”在屏幕顶部和 Toolbar 下方。现在的问题是放置在 CollapsingToolbarLayout 内的 ImageView 将不在 TabLayout 下方,而是在其垂直上方。

解决方案:

为了解决这个问题,我们需要让 ImageView 更高,这样如果我们将 TabLayout 放在 CollapsingToolbarLayout 内,它就会覆盖它。但是因为我们将 TabLayout 放在 CollapsingToolbarLayout 之外,所以我们需要确保 ImageView 被绘制,即使它的父视图 (CollapsingToolbarLayout ) 更短。 clipChildren="false" 来救援! clipChildren 告诉 ViewGroup 如果它们的子视图大于它的大小,则不要剪辑它们,所以基本上现在我们可以使 ImageView 更高,它仍然会被绘制在标签布局。这样我们就可以在一个漂亮的图像上方同时拥有 CollapsingToolbarLayoutTabLayout

我的布局 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" />

【讨论】:

  • @PhoenixWang 请随时提供适用于 scrimContent 的解决方案
  • 很好的答案,但要解决 contentScrim 的问题,我所做的是使用半透明颜色 #88000000 作为应用程序:tabBackground="@ color/black_overlay_dark" 和 app:contentScrim="@color/black_overlay_dark" 看起来很酷耶!!
【解决方案2】:

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

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

【讨论】:

  • 这行得通,但内容似乎不想在隐藏后向后滚动。
  • 这是正确的答案,并且提到的错误JMRboosties 已在22.2.1 中修复。 code.google.com/p/android/issues/detail?id=178656
  • 如何设置图像视图?我无法将单个图像设置为工具栏和选项卡的背景?有什么提示吗?
  • 我认为,这是更好且可行的解决方案:blog.grafixartist.com/…
  • 显然,这不是最好的解决方案。 OP,和我,希望标签在图片上。 @Tomas 您的解决方案也不完整。在其中,标题没有移动。
【解决方案3】:

原来由于AppBarLayout扩展了LinearLayout,所以里面可以有两个CollapsingToolBarLayout(扩展FrameLayout)。我所做的是让第一个 CollapsingToolBarLayout 容纳我想要消失的内容,并给它 AppBarLayout 标志:

app:layout_scrollFlags="scroll|exitUntilCollapsed"

对于实际上有标签的第二个 CollapsingToolbarLayout,我将它的滚动标志设置为:

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

【讨论】:

  • 这也是个好主意:)
  • 这工作正常。但在第二个 CollapsingToolbarLayout 中没有得到 app:tabBackground="@color/transparent"
  • @AthiraSanthosh @color/transparent 是您必须在 res/values/colors.xml 中定义的颜色,如下所示:#00000000
  • 我用过这个。但是我在第二个 CollapsingToolbarLayout 中获得了第一个 CollapsingToolbarLayout 背景色
  • 看起来很烂。这是Android可以做到的最好的吗?怀疑。
【解决方案4】:

我创建了这个sample 项目,在其中使用了 CollapsingToolbarLayout 中的 TabLayout

在 API 14-23 上测试。工作没有任何问题。

【讨论】:

    【解决方案5】:

    我找到了一个简单的解决方案,使其适用于透明 TabLayout 背景:

    • CollapsingToolbarLayout 中使用expandedTitleMarginBottom 以避免扩展标题重叠TabLayout
    • layout_height 设置为TabLayout 为常数值
    • layout_marginBottom 添加到ToolbarTabLayout 相同的值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>
    

    【讨论】:

    • 这是最直接最简单的解决方案。它适用于 scrimContent 并且应该是公认的答案。谢谢!
    • 像魅力一样工作。
    【解决方案6】:

    使用带有源代码的新材料设计支持库示例的带有标签的折叠工具栏

    我使用了新材料设计支持库的官方折叠工具栏功能。

    此处折叠视图高度为 256dp,标签高度为 56dp

    我创建了以下路径,我将图像分成两部分,一部分用于折叠视图,另一部分用于选项卡。

    我根据dp to pixel 尺寸用高分辨率drawable xxxhdpi 剪切图像并放入drawable 文件夹,以便它可以调整到所有屏幕尺寸

    我有 2000x1246 的图像

    顶部图像 256dp= 2000x1024 像素

    底部标签图像 56dp= 2000x224 像素

    这是source code的完整示例

    【讨论】:

    • 好主意,虽然我想,没有视差。
    【解决方案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);
    

    【讨论】:

    • setDisplayHomeAsUpEnabled 正在使用 23 sdk 或更高版本
    【解决方案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 值是否适合您的屏幕尺寸,但它适合我的。如果有人有更好的答案,请分享。

    对不起,如果我的代码或英语有误。谢谢!!

    【讨论】:

      【解决方案9】:

      我遇到了类似的问题,我的解决方案非常简单。我所要做的就是将工具栏设置为支持操作栏(我使用的是Theme.NoActionBar 样式库)

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

      【讨论】:

        【解决方案10】:

        下面的代码实现了展开/折叠工具栏的操作。

        基本上我们会有一个
        CoordinatorLayout(FrameLayout)
        AppBarLayout(实现了很多东西设计功能的垂直线性布局),
        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
        

        在你的课堂上

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
        mCollapsingToolbarLayout.setTitle("YourTitle");
        setSupportActionBar(toolbar);
        

        【讨论】:

          【解决方案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>
          

          【讨论】:

            【解决方案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>
            

            【讨论】:

              【解决方案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+ 的设备

              【讨论】:

                【解决方案14】:

                正如之前有人指出的那样,看起来这是因为(来自文档):

                导航按钮在工具栏的 最小高度(如果已设置)。

                因此,根据初始布局,您可以执行以下操作:

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

                【讨论】:

                  【解决方案15】:

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

                  我现在将“ViewPager”替换为“FrameLayout”,正如我们所期望的那样。

                  我期待,如果滚动 Viewpager 的页面,那么应该听“CollapsingToolbarLayout”。为此,我使用了“NestedScrollView”。但问题是“ViewPager”在“NestedScrollView”中不起作用。

                  所以最后我用 FrameLayout 实现了。

                  但问题是“tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {" 被贬低了

                  <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

                  【讨论】:

                    【解决方案16】:

                    Toolbar> 将底部边距设置为 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>
                    

                    【讨论】:

                      【解决方案17】:

                      我可以通过将 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>
                      

                      【讨论】:

                        【解决方案18】:

                        尝试将Toolbarapp:layout_collapseMode="pin" 放在CollapsingToolbar 内,将TabLayoutapp:layout_scrollFlags="enterAlways" 放在外面

                        【讨论】:

                          猜你喜欢
                          • 1970-01-01
                          • 2016-05-15
                          • 1970-01-01
                          • 2016-07-31
                          • 2015-08-18
                          • 1970-01-01
                          • 2016-02-18
                          • 1970-01-01
                          • 1970-01-01
                          相关资源
                          最近更新 更多