CollapsingToolbarLayout 和 TabLayout 导致标题重叠
CollapsingToolbarLayout and TabLayout results in title overlapping
我正在使用 CollapsingToolbarLayout，我正在尝试使 activity 的标题很好地融入其工具栏，同时不与 TabLayout 重叠。
我已经搜索了几个小时，大多数答案都建议工具栏的自定义高度，但这会导致标题进入工具栏的下部 (android:gravity ="bottom"）。尝试改变它的重力但没有成功。
有什么办法吗？
这就是我现在得到的：
我的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="@bool/isFitSystemWindows">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/awesomeviewpager_appbar"
android:fitsSystemWindows="@bool/isFitSystemWindows"
app:layout_behavior="com.iac.awesomeviewpager.FlingBehavior"
app:theme="@style/ThemeOverlay.AppCompat.Light" >
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/header_height"
android:fitsSystemWindows="@bool/isFitSystemWindows"
app:expandedTitleGravity="center"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<com.flaviofaria.kenburnsview.KenBurnsView
android:id="@+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/raton"
android:fitsSystemWindows="@bool/isFitSystemWindows"
android:scaleType="centerCrop"
android:src="@drawable/raton"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:tabBackground="@android:color/transparent"
app:tabIndicatorColor="@android:color/white"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
谢谢！
我最近发现自己和你有类似的情况。不幸的是，我找不到一个干净利落的解决方案。但是，我确实找到了一个肮脏的 XML 混搭解决方案。
一个关键时刻是意识到 CollapsingToolbarLayout 将从第一个 Toolbar 或 app:toolbarId 属性定义的那个继承它的终端折叠高度。
一旦跨过这一关，如何利用边距和填充来对齐最终结果只是时间和耐心的问题。
以下解决方案中的关键组件是：
@dimen/height维度@dimen/height_double维度app:collapsedTitleGravity="top" 属性
@dimen/height和@dimen/height_double的实际值并不像它们之间的关系那么有趣；一个是另一个的两倍大。我想我在测试中分别使用了 56dp 和 112dp。
我还向 Toolbar 和 TabLayout 添加了半透明背景颜色属性，这将突出显示（在运行时）到底发生了什么。
希望这对您有所帮助。
my_layout.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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--
This one is interesting, especially the
"collapsedTitleGravity" and "expandedTitleMarginBottom"
attributes
-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="top"
app:expandedTitleMarginBottom="@dimen/height"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/pancake"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<!--
This one is extra interesting, given the relation
between its own height and the TabLayout height.
The layout margins and paddings are dependant on
text size etc.
-->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="@dimen/height_double"
android:layout_gravity="top"
android:layout_marginBottom="14dp"
android:layout_marginTop="-14dp"
android:background="#33ff0000"
android:paddingTop="12dp"
app:layout_collapseMode="pin" />
<!--
And this one too, given how its "layout_height"
attribute relates to the Toolbar.
-->
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="@dimen/height"
android:layout_gravity="bottom"
android:background="#3300ff00"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
我在布局上遇到了同样的问题。
我终于从下面得到了答案。
https://gist.github.com/iPaulPro/1468510f046cb10c51ea
参考评论：
"sachins commented on 18 Aug 2015"
The changes I made above are:
Move TabLayout out of CollapsingToolbarLayout and put it directly under CoordinatorLayout
Set these attributes inside TabLayout:
android:layout_gravity="bottom" - To make sure AppBarLayout doesn't overlap on TabLayout
app:layout_anchor="@+id/appbar" and app:layout_anchorGravity="bottom" - To make sure tabs appear below AppBarLayout
Also set android:layout_marginTop="?attr/actionBarSize" inside ViewPager to make sure TabLayout doesn't overlap any items in the list
添加评论，
别忘了从 TabLayout
中删除 android:fitsSystemWindows="true"
如果您想要透明 TabLayout 且上面的标题始终可见，请执行以下操作：
- 将
expandedTitleMarginBottom 添加到 CollapsingToolbarLayout
- 将
layout_height设置为TabLayout作为常数值
- 将
layout_marginBottom 添加到 Toolbar 与 TabLayout 高度相同的值
<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="56dp"
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="48dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
一个非常简单的工作解决方案，只需将其添加到您的工具栏中即可。如果你需要，我可以 post 完整的 xml 代码
android:layout_marginBottom="43dp"
我正在使用 CollapsingToolbarLayout，我正在尝试使 activity 的标题很好地融入其工具栏，同时不与 TabLayout 重叠。
我已经搜索了几个小时，大多数答案都建议工具栏的自定义高度，但这会导致标题进入工具栏的下部 (android:gravity ="bottom"）。尝试改变它的重力但没有成功。
有什么办法吗？
这就是我现在得到的：
我的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="@bool/isFitSystemWindows">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/awesomeviewpager_appbar"
android:fitsSystemWindows="@bool/isFitSystemWindows"
app:layout_behavior="com.iac.awesomeviewpager.FlingBehavior"
app:theme="@style/ThemeOverlay.AppCompat.Light" >
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/header_height"
android:fitsSystemWindows="@bool/isFitSystemWindows"
app:expandedTitleGravity="center"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<com.flaviofaria.kenburnsview.KenBurnsView
android:id="@+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/raton"
android:fitsSystemWindows="@bool/isFitSystemWindows"
android:scaleType="centerCrop"
android:src="@drawable/raton"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:tabBackground="@android:color/transparent"
app:tabIndicatorColor="@android:color/white"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
谢谢！
我最近发现自己和你有类似的情况。不幸的是，我找不到一个干净利落的解决方案。但是，我确实找到了一个肮脏的 XML 混搭解决方案。
一个关键时刻是意识到 CollapsingToolbarLayout 将从第一个 Toolbar 或 app:toolbarId 属性定义的那个继承它的终端折叠高度。
一旦跨过这一关，如何利用边距和填充来对齐最终结果只是时间和耐心的问题。
以下解决方案中的关键组件是：
@dimen/height维度@dimen/height_double维度app:collapsedTitleGravity="top"属性
@dimen/height和@dimen/height_double的实际值并不像它们之间的关系那么有趣；一个是另一个的两倍大。我想我在测试中分别使用了 56dp 和 112dp。
我还向 Toolbar 和 TabLayout 添加了半透明背景颜色属性，这将突出显示（在运行时）到底发生了什么。
希望这对您有所帮助。
my_layout.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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--
This one is interesting, especially the
"collapsedTitleGravity" and "expandedTitleMarginBottom"
attributes
-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="top"
app:expandedTitleMarginBottom="@dimen/height"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/pancake"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<!--
This one is extra interesting, given the relation
between its own height and the TabLayout height.
The layout margins and paddings are dependant on
text size etc.
-->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="@dimen/height_double"
android:layout_gravity="top"
android:layout_marginBottom="14dp"
android:layout_marginTop="-14dp"
android:background="#33ff0000"
android:paddingTop="12dp"
app:layout_collapseMode="pin" />
<!--
And this one too, given how its "layout_height"
attribute relates to the Toolbar.
-->
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="@dimen/height"
android:layout_gravity="bottom"
android:background="#3300ff00"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
我在布局上遇到了同样的问题。 我终于从下面得到了答案。
https://gist.github.com/iPaulPro/1468510f046cb10c51ea
参考评论：
"sachins commented on 18 Aug 2015"
The changes I made above are:
Move TabLayout out of CollapsingToolbarLayout and put it directly under CoordinatorLayout
Set these attributes inside TabLayout:
android:layout_gravity="bottom" - To make sure AppBarLayout doesn't overlap on TabLayout
app:layout_anchor="@+id/appbar" and app:layout_anchorGravity="bottom" - To make sure tabs appear below AppBarLayout
Also set android:layout_marginTop="?attr/actionBarSize" inside ViewPager to make sure TabLayout doesn't overlap any items in the list
添加评论，
别忘了从 TabLayout
中删除 android:fitsSystemWindows="true"如果您想要透明 TabLayout 且上面的标题始终可见，请执行以下操作：
- 将
expandedTitleMarginBottom添加到CollapsingToolbarLayout - 将
layout_height设置为TabLayout作为常数值 - 将
layout_marginBottom添加到Toolbar与TabLayout高度相同的值
<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="56dp"
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="48dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
一个非常简单的工作解决方案，只需将其添加到您的工具栏中即可。如果你需要，我可以 post 完整的 xml 代码
android:layout_marginBottom="43dp"