折叠工具栏布局 |滚动和布局问题 2 [英] CollapsingToolbarLayout | Scrolling and layout issues 2

问题描述

CollapsingToolbarLayout |滚动和布局问题

我想使用 2 个不同的片段，这将允许我根据方向和屏幕大小更改布局

I want to use 2 different fragments that will allow me to change the layout based on orientation and screen size

1. 标题图片(目前只是一个ImageView)
2. 可滚动的内容

1. Header Image (Currently just an ImageView)
2. Scrollable content

问题

1. CollapsingToolbarLayout 不允许我展开 Toolbar 以查看 full Header Image

1. The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image

• 它显示了图像的大部分，但不是全部.顶部被剪掉了，但底部是可见的.

• It shows a majority of the image, but not all. Top is cut, but the bottom is visible.

Toolbar 设置为 Pin 但滚动时隐藏

The Toolbar is set to Pin but it is hidden when scrolling

• 只是 Header Image 应该消失，但我的整个 Appbar 被隐藏了

• Just the Header Image should disappear, but instead my whole Appbar gets hidden

当滚动查看Expanded Toolbar 时，会出现一个空视图，直到Expanded Toolbar 达到其最大高度.

When scrolling to view the Expanded Toolbar there is an empty view until the Expanded Toolbar reaches its max height.

• 在 Expanded Toolbar 和 Toolbar 本身被隐藏后

• After both the Expanded Toolbar and the Toolbar itself become hidden

向上箭头没有出现在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_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <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:expandedTitleMarginEnd="16dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/download"

                android:scaleType="centerCrop" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"

                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        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_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

OnCreate

@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

推荐答案

问题 1

将 android:fitsSystemWindows="true" 添加到您的 AppBarLayout、CollapsingToolbarLayout 和您的 ImageView.

Question 1

Add android:fitsSystemWindows="true" to your AppBarLayout, CollapsingToolbarLayout, and to your ImageView.

我猜您图片的一部分位于状态栏下方(由于缺少这些行)，这就是您看不到图片顶部的原因.

I'm guessing a part of your image is below the status bar (due to these lines being missing) which is why you can't see the top of the image.

collapseMode="pin" 只影响工具栏对折叠的反应(因此它被称为 collapseMode 而不是 scrollFlags).

collapseMode="pin" only affects how the Toolbar reacts to collapsing (hence why it is called collapseMode and not scrollFlags).

在几乎所有情况下，当使用 CollapsingToolbarLayout 时，您应该为 scrollFlags 使用 scroll|exitUntilCollapsed -即使向下滚动，这也会使折叠的工具栏保持可见.

In almost all cases when using CollapsingToolbarLayout, you should be using scroll|exitUntilCollapsed for your scrollFlags - this keeps the collapsed Toolbar visible even when you scroll downward.

这是由于使用了scroll|enterAlways.按照 #2 更改您的标志

This is due to using scroll|enterAlways. Change your flags as per #2

如您的相关问题的答案中所述，您需要调用 getSupportActionBar().setDisplayHomeAsUpEnabled(true); 以显示向上按钮:

As mentioned in the answer to your related question, you need to call getSupportActionBar().setDisplayHomeAsUpEnabled(true); to show the Up button:

 @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");
}

这篇关于折叠工具栏布局 |滚动和布局问题 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！