折叠工具栏布局 |滚动和布局问题 2
Posted
技术标签:
【中文标题】折叠工具栏布局 |滚动和布局问题 2【英文标题】:CollapsingToolbarLayout | Scrolling and layout issues 2 【发布时间】:2015-09-03 07:54:58 【问题描述】:相关问题
CollapsingToolbarLayout | Scrolling and layout issues
背景
我想使用 2 个不同的片段,让我可以根据方向和屏幕大小更改布局
-
标题图片(目前只是
ImageView
)
可滚动内容
问题
CollapsingToolbarLayout
不允许我展开 Toolbar
以查看完整 Header Image
Top
已被剪切,但底部可见。
Toolbar
设置为 Pin
但滚动时隐藏
Header Image
应该消失,但我的整个 Appbar 被隐藏了
当滚动查看Expanded Toolbar
时,会出现一个空视图,直到Expanded Toolbar
达到其最大高度。
Expanded Toolbar
和 Toolbar
本身都被隐藏后
Up Arrow
未显示在 Toolbar
中
代码
布局.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:layout_
android:layout_
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_
android:layout_
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_
android:layout_
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="16dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="@+id/header"
android:layout_
android:layout_
android:background="@drawable/download"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:id="@+id/anim_toolbar"
android:layout_
android:layout_
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_
android:layout_
android:layout_below="@+id/anim_toolbar"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<fragment
android:id="@+id/detail"
android:name="<package>.<fragment_name>"
android:layout_
android:layout_ />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
创建时
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
1 2 3
4 5 6
【问题讨论】:
将exitUntilCollapsed
添加到 CollapsingToolbarLayout 至少应该修复一个点。
您可以删除的其他内容是 NestedScrollView 上的 layout_below
。
【参考方案1】:
问题 1
将android:fitsSystemWindows="true"
添加到您的AppBarLayout
、CollapsingToolbarLayout
和您的ImageView
。
我猜您的图像的一部分位于状态栏下方(由于缺少这些行),这就是您看不到图像顶部的原因。
问题 2
collapseMode="pin"
只影响工具栏对折叠的反应(因此它被称为collapseMode
而不是scrollFlags
)。
在使用CollapsingToolbarLayout
的几乎所有 情况下,您应该将scroll|exitUntilCollapsed
用于您的scrollFlags
- 这样即使您向下滚动也可以保持折叠的工具栏可见。
问题 3
这是由于使用了scroll|enterAlways
。按照 #2 更改您的标志
问题 4
如您的相关问题的答案中所述,您需要致电getSupportActionBar().setDisplayHomeAsUpEnabled(true);
以显示向上按钮:
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
【讨论】:
好的,这些解决了大部分问题... Q4 除外,因为没有显示后退箭头。我认为 Q2 和 Q3 在哪里链接 注意:我必须同时对 Q1 和 Q2/3 进行修复。它们分别会导致布局问题。我认为这是我之前的问题。 另外,我认为有些图像隐藏在状态栏后面,也许我可以将其设置为透明....得看看怎么做..... 好的,Google Android 开发者倡导者!!我的 Q4 是否与这个已知错误有关...code.google.com/p/android/issues/detail?id=175240。实际上,我确实记得以前看到过 App Bar Action Overflow 图标。随着一些变化,它消失了,但我不知道那个变化是什么。也许现在有了你的建议,会出现后退导航和动作溢出??? 我有一个问题,即使在完成这篇完整的帖子后,我的布局也无法滚动【参考方案2】:从您的布局 XML 中的 CollapsingToolBarLayout
标记中删除 app:contentScrim="?attr/colorPrimary"
。它会在工具栏中显示后退按钮
【讨论】:
以上是关于折叠工具栏布局 |滚动和布局问题 2的主要内容,如果未能解决你的问题,请参考以下文章