AppBar collapses/expands 时如何保持工具栏固定在顶部?
How to keep the toolbar fixed at the top when AppBar collapses/expands?
概览
我正在尝试实施 Scrolling Techniques、具有重叠内容 的灵活 space 之一,如 Material 设计所述。
Flexible space with overlapping content
Content can overlap the app bar.
Behavior:
The app bar’s starting position should be located behind the content.
Upon upward scroll, the app bar should scroll faster than the content,
until the content no longer overlaps it. Once anchored in place, the
app bar lifts up to allow content to scroll underneath.
问题
然而,问题是,
我的 AppBar 中的标题在展开时向下滚动并隐藏在重叠内容下方。
在这里,我的工具栏隐藏在重叠的 CardView 下方。
当应用栏折叠时,工具栏和标题从下方向上滑动。
代码
这是我的代码:
activity-main.xml
<android.support.design.widget.CoordinatorLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
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.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</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"
...
我还在我的 MainActivity 的 onCreate 函数中添加了这些
setSupportActionBar(toolbar);
collapsingToolbarLayout.setTitle("App Name");
我希望工具栏(带有磁贴和其他内容,我将在稍后添加)保持在顶部,无论应用栏是展开还是折叠。
我阅读了文档,阅读了许多帖子和教程,观看了很多视频,但根本找不到有效的解决方案或任何相关解决方案。
如果有人知道如何解决这个问题,请提出建议。感谢您的帮助。
当我在类似问题报告的评论中找到答案时,我正在自己寻找解决方案。
基本上你在 CollapsingToolbarLayout
上调用 setTitleEnabled()
是这样的:
CollapsingToolbarLayout.setTitleEnabled(false);
您也可以在 xml 中执行此操作,方法是将其添加到您的 CollapsingToolbarLayout
:
app:titleEnabled="false"
通过将其设置为 false
,您将获得所需的行为。标题固定在屏幕顶部。
Toolbar
本身实际上已经在顶部,但这使得标题也保留在那里,而不是在 CollapsingToolbarLayout
的底部和 Toolbar
之间转换。
我通过在 Toolbar
标签内添加以下代码实现了这一点。
app:layout_collapseMode="pin"
在我的例子中,我需要将 app:titleEnabled="false"
添加到 CollapsingToolbarLayout
AND app:layout_collapseMode="pin"
到 android.support.v7.widget.Toolbar
现在,无论用户向上或向下滚动,工具栏都会固定在屏幕顶部。
要将标题保持在顶部,只需将此属性添加到您的 CollapsingToolbarLayout
:
app:expandedTitleGravity="top"
概览
我正在尝试实施 Scrolling Techniques、具有重叠内容 的灵活 space 之一,如 Material 设计所述。
Flexible space with overlapping content
Content can overlap the app bar.
Behavior:
The app bar’s starting position should be located behind the content. Upon upward scroll, the app bar should scroll faster than the content, until the content no longer overlaps it. Once anchored in place, the app bar lifts up to allow content to scroll underneath.
问题
然而,问题是, 我的 AppBar 中的标题在展开时向下滚动并隐藏在重叠内容下方。
在这里,我的工具栏隐藏在重叠的 CardView 下方。
当应用栏折叠时,工具栏和标题从下方向上滑动。
代码
这是我的代码:
activity-main.xml
<android.support.design.widget.CoordinatorLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
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.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</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"
...
我还在我的 MainActivity 的 onCreate 函数中添加了这些
setSupportActionBar(toolbar);
collapsingToolbarLayout.setTitle("App Name");
我希望工具栏(带有磁贴和其他内容,我将在稍后添加)保持在顶部,无论应用栏是展开还是折叠。
我阅读了文档,阅读了许多帖子和教程,观看了很多视频,但根本找不到有效的解决方案或任何相关解决方案。
如果有人知道如何解决这个问题,请提出建议。感谢您的帮助。
当我在类似问题报告的评论中找到答案时,我正在自己寻找解决方案。
基本上你在 CollapsingToolbarLayout
上调用 setTitleEnabled()
是这样的:
CollapsingToolbarLayout.setTitleEnabled(false);
您也可以在 xml 中执行此操作,方法是将其添加到您的 CollapsingToolbarLayout
:
app:titleEnabled="false"
通过将其设置为 false
,您将获得所需的行为。标题固定在屏幕顶部。
Toolbar
本身实际上已经在顶部,但这使得标题也保留在那里,而不是在 CollapsingToolbarLayout
的底部和 Toolbar
之间转换。
我通过在 Toolbar
标签内添加以下代码实现了这一点。
app:layout_collapseMode="pin"
在我的例子中,我需要将 app:titleEnabled="false"
添加到 CollapsingToolbarLayout
AND app:layout_collapseMode="pin"
到 android.support.v7.widget.Toolbar
现在,无论用户向上或向下滚动,工具栏都会固定在屏幕顶部。
要将标题保持在顶部,只需将此属性添加到您的 CollapsingToolbarLayout
:
app:expandedTitleGravity="top"