折叠工具栏布局 |滚动和布局问题 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 ToolbarToolbar 本身都被隐藏后

    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" 添加到您的AppBarLayoutCollapsingToolbarLayout 和您的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的主要内容,如果未能解决你的问题,请参考以下文章

折叠工具栏布局,工具栏中带有徽标、标题、副标题

ios的折叠工具栏布局

工具栏折叠时显示视图

android:折叠工具栏在向上滚动时反弹

在折叠工具栏布局上将 RecyclerView 锚定得更高[重复]

像谷歌游戏商店一样折叠工具栏布局