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

Question

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

Tod*_*dev 37 android material-design android-toolbar android-design-library

我正在查看chrisbanes/cheesesquare,我正在尝试将TabLayout与Toolbar放在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>

Run Code Online (Sandbox Code Playgroud)

当打开CollapsingToolbar时,这会出现类似这样的内容,这正是我正在寻找的内容:

在此输入图像描述

但当我崩溃时(通过拉动图像)我得到这样的东西

在此输入图像描述

这是因为我将工具栏的高度设置为110dip,如果我保留标签和工具栏标题重叠的默认设置.所以我正在寻找正确的方法,以便工具栏的标题在appbar上正确的位置,tablayout在它下面.有没有办法实现这一目标？

Answer 1

Tod*_*dev 22

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

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

Run Code Online (Sandbox Code Playgroud)

你如何设置imageview？我无法将单个图像设置为工具栏和选项卡的背景？任何提示？ (5认同)
这样可行,但内容似乎不想在隐藏后向后滚动. (3认同)
我认为,这是更好的工作解决方案:http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library/ (2认同)
显然,这不是最好的解决方案.OP和我,希望标签在图片上方.@Tomas你的解决方案也不完整.在其中,标题不动. (2认同)

Answer 2

Ale*_*nou 22

经过2天试图找到纯Android解决方案,这是我的解决方案.

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

(TL; DR:参见XML附件)

我想要实现的行为是将CollapsingToolbarLayout和TabLayout放在图像顶部,当"标题"向上滚动(在屏幕外),然后显示ActionBar(工具栏)下面的TabLayout.

问题:

由于CollapsingToolbarLayout将在折叠时隐藏除工具栏视图之外的所有子视图,因此TabLayout必须放在CollapsingToolbarLayout之外但位于AppBarLayout内部,以便它"停靠"在屏幕顶部和工具栏下方.现在的问题是放在CollapsingToolbarLayout内的ImageView不会在TabLayout下面,而是在垂直上方.

解决方案:

要解决这个问题,我们需要让ImageView更高,这样如果我们将TabLayout放在CollapsingToolbarLayout中,它将覆盖它.但是,因为我们放在TabLayout外CollapsingToolbarLayout 我们需要确保的ImageView被绘制,即使它的父视图(CollapsingToolbarLayout)较短.clipChildren ="false"救援!clipChildren告诉ViewGroup不要剪切它的子视图,如果它们的大小超过它的大小,所以基本上现在我们可以让ImageView更高,它仍然会在TabLayout下绘制.通过这种方式,我们可以将CollapsingToolbarLayout和TabLayout放在一个漂亮的图像上面!

我的布局xml:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

Tun*_*i_D 14

事实证明,既然AppBarLayout扩展了LinearLayout,你可以在其中使用两个CollapsingToolBarLayouts(扩展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>

Run Code Online (Sandbox Code Playgroud)

这也是个好主意:) (2认同)

Answer 4

Vit*_*lov 7

我创建了这个示例项目,我在CollapsingToolbarLayout中使用了TabLayout

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

Answer 5

sos*_*ite 5

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

使用expandedTitleMarginBottom中CollapsingToolbarLayout避免扩大标题重叠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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	49900 次
最近记录：	7 年，5 月前